Merge pull request #3700 from weaveworks/3577-get-rid-of-sass-files

Get rid of SASS files

client/.sass-lint.yml

@@ -1,19 +0,0 @@
-options:
-  merge-default-rules: false
-files:
-  include: 'app/styles/*.s+(a|c)ss'
-rules:
-  no-important: 1
-  no-color-literals: 2
-  variable-for-property:
-    - 2
-    -
-      properties:
-      - 'border-radius'
-      - 'border-top-left-radius'
-      - 'border-top-right-radius'
-      - 'border-bottom-left-radius'
-      - 'border-bottom-right-radius'
-      - 'font-family'
-      - 'font-size'
-      - 'z-index'

client/.stylelintrc

@@ -11,6 +11,7 @@
     "color-no-hex": true,
     "function-blacklist": ["/^rgb/", "/^hsl/"],
     "no-empty-source": null,
+    "no-descending-specificity": null,
     "no-duplicate-selectors": null,
     "property-no-vendor-prefix": [true, {
       "ignoreProperties": ["tab-size", "hyphens"],

client/app/scripts/components/app.js

@@ -6,8 +6,9 @@ import { connect } from 'react-redux';
 import { debounce, isEqual } from 'lodash';
 
 import { ThemeProvider } from 'styled-components';
-import theme from 'weaveworks-ui-components/lib/theme';
+import commonTheme from 'weaveworks-ui-components/lib/theme';
 
+import GlobalStyle from './global-style';
 import Logo from './logo';
 import Footer from './footer';
 import Sidebar from './sidebar';
@@ -54,6 +55,8 @@ import {
   isTableViewModeSelector,
   isGraphViewModeSelector,
 } from '../selectors/topology';
+import defaultTheme from '../themes/default';
+import contrastTheme from '../themes/contrast';
 import { VIEWPORT_RESIZE_DEBOUNCE_INTERVAL } from '../constants/timer';
 import {
   ESC_KEY_CODE,
@@ -205,52 +208,56 @@ class App extends React.Component {
     const isIframe = window !== window.top;
 
     return (
-      <ThemeProvider theme={theme}>
-        <div className={className} ref={this.saveAppRef}>
-          {showingDebugToolbar() && <DebugToolbar />}
+      <ThemeProvider theme={{...commonTheme, scope: contrastMode ? contrastTheme : defaultTheme }}>
+        <>
+          <GlobalStyle />
 
-          {showingHelp && <HelpPanel />}
+          <div className={className} ref={this.saveAppRef}>
+            {showingDebugToolbar() && <DebugToolbar />}
 
-          {showingTroubleshootingMenu && <TroubleshootingMenu />}
+            {showingHelp && <HelpPanel />}
 
-          {showingDetails && (
-          <Details
-            renderNodeDetailsExtras={this.props.renderNodeDetailsExtras}
-          />
-          )}
+            {showingTroubleshootingMenu && <TroubleshootingMenu />}
 
-          <div className="header">
-            {timeTravelSupported && this.props.renderTimeTravel()}
+            {showingDetails && (
+            <Details
+              renderNodeDetailsExtras={this.props.renderNodeDetailsExtras}
+            />
+            )}
 
-            <div className="selectors">
-              <div className="logo">
-                {!isIframe
-                  && (
-                  <svg width="100%" height="100%" viewBox="0 0 1089 217">
-                    <Logo />
-                  </svg>
-                  )
-                }
+            <div className="header">
+              {timeTravelSupported && this.props.renderTimeTravel()}
+
+              <div className="selectors">
+                <div className="logo">
+                  {!isIframe
+                    && (
+                    <svg width="100%" height="100%" viewBox="0 0 1089 217">
+                      <Logo />
+                    </svg>
+                    )
+                  }
+                </div>
+                <Search />
+                <Topologies />
+                <ViewModeSelector />
+                <TimeControl />
               </div>
-              <Search />
-              <Topologies />
-              <ViewModeSelector />
-              <TimeControl />
             </div>
+
+            <Nodes />
+
+            <Sidebar classNames={isTableViewMode ? 'sidebar-gridmode' : ''}>
+              {showingNetworkSelector && isGraphViewMode && <NetworkSelector />}
+              {!isResourceViewMode && <Status />}
+              {!isResourceViewMode && <TopologyOptions />}
+            </Sidebar>
+
+            <Footer />
+
+            <Overlay faded={timeTravelTransitioning} />
           </div>
-
-          <Nodes />
-
-          <Sidebar classNames={isTableViewMode ? 'sidebar-gridmode' : ''}>
-            {showingNetworkSelector && isGraphViewMode && <NetworkSelector />}
-            {!isResourceViewMode && <Status />}
-            {!isResourceViewMode && <TopologyOptions />}
-          </Sidebar>
-
-          <Footer />
-
-          <Overlay faded={timeTravelTransitioning} />
-        </div>
+        </>
       </ThemeProvider>
     );
   }

client/app/scripts/components/terminal-app.js

@@ -1,7 +1,12 @@
 import React from 'react';
 import { connect } from 'react-redux';
 
+import { ThemeProvider } from 'styled-components';
+import commonTheme from 'weaveworks-ui-components/lib/theme';
+
 import Terminal from './terminal';
+import GlobalStyle from './global-style';
+import defaultTheme from '../themes/default';
 import { receiveControlPipeFromParams, hitEsc } from '../actions/app-actions';
 
 const ESC_KEY_CODE = 27;
@@ -50,16 +55,21 @@ class TerminalApp extends React.Component {
     const style = {borderTop: `4px solid ${this.state.titleBarColor}`};
 
     return (
-      <div className="terminal-app" style={style}>
-        {this.props.controlPipe && (
-        <Terminal
-          pipe={this.props.controlPipe}
-          titleBarColor={this.state.titleBarColor}
-          statusBarColor={this.state.statusBarColor}
-          title={this.state.title}
-          embedded={false} />
-        )}
-      </div>
+      <ThemeProvider theme={{...commonTheme, scope: defaultTheme }}>
+        <>
+          <GlobalStyle />
+          <div className="terminal-app" style={style}>
+            {this.props.controlPipe && (
+              <Terminal
+                pipe={this.props.controlPipe}
+                titleBarColor={this.state.titleBarColor}
+                statusBarColor={this.state.statusBarColor}
+                title={this.state.title}
+                embedded={false} />
+            )}
+          </div>
+        </>
+      </ThemeProvider>
     );
   }
 }

client/app/scripts/main.dev.js

@@ -3,7 +3,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 
-import '../styles/main.scss';
 import '../images/favicon.ico';
 import configureStore from './stores/configureStore.dev';
 

client/app/scripts/main.js

@@ -3,7 +3,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 
-import '../styles/main.scss';
 import '../images/favicon.ico';
 import configureStore from './stores/configureStore';
 

client/app/scripts/terminal-main.js

@@ -3,7 +3,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 
-import '../styles/main.scss';
 import '../images/favicon.ico';
 import configureStore from './stores/configureStore';
 

client/app/scripts/themes/contrast.js

@@ -0,0 +1,27 @@
+import theme from 'weaveworks-ui-components/lib/theme';
+import defaultTheme from './default';
+
+const contrastTheme = {
+  ...defaultTheme,
+
+  /* contrast overrides */
+  backgroundColor: theme.colors.white,
+  backgroundDarkerColor: theme.colors.purple200,
+  backgroundDarkerSecondaryColor: theme.colors.purple200,
+  bodyBackgroundColor: theme.colors.white,
+  borderLightColor: theme.colors.gray600,
+  btnOpacityDefault: 1,
+  btnOpacityDisabled: 0.4,
+  btnOpacitySelected: 1,
+  edgeColor: theme.colors.black,
+  edgeHighlightOpacity: 0.3,
+  labelBackgroundColor: theme.colors.white,
+  linkOpacityDefault: 1,
+  nodeElementsInBackgroundOpacity: 0.4,
+  textColor: theme.colors.black,
+  textDarkerColor: theme.colors.black,
+  textSecondaryColor: theme.colors.black,
+  textTertiaryColor: theme.colors.black,
+};
+
+export default contrastTheme;

client/app/scripts/themes/default.js

@@ -0,0 +1,31 @@
+import theme from 'weaveworks-ui-components/lib/theme';
+import { transparentize } from 'polished';
+
+const defaultTheme = {
+  backgroundColor: theme.colors.gray50,
+  backgroundDarkColor: theme.colors.purple900,
+  backgroundDarkerColor: theme.colors.purple100,
+  backgroundDarkerSecondaryColor: theme.colors.gray50,
+  baseEase: 'ease-in-out',
+  bodyBackgroundColor: theme.colors.purple25,
+  borderLightColor: theme.colors.purple100,
+  btnOpacityDefault: 0.9,
+  btnOpacityDisabled: 0.25,
+  btnOpacityHover: 1,
+  btnOpacitySelected: 0.9,
+  detailsWindowPaddingLeft: '30px',
+  detailsWindowWidth: '420px',
+  edgeColor: theme.colors.purple500,
+  edgeHighlightOpacity: 0.1,
+  labelBackgroundColor: transparentize(0.3, theme.colors.purple25),
+  linkOpacityDefault: 0.8,
+  nodeElementsInBackgroundOpacity: 0.7,
+  terminalHeaderHeight: '44px',
+  textColor: theme.colors.purple800,
+  textDarkerColor: theme.colors.purple900,
+  textSecondaryColor: theme.colors.purple600,
+  textTertiaryColor: theme.colors.purple400,
+  timelineHeight: '55px',
+};
+
+export default defaultTheme;

client/app/styles/_contrast-theme.scss

@@ -1,38 +0,0 @@
-@import "default-theme";
-
-$background-color: $color-white;
-$background-lighter-color: $color-white;
-$background-darker-color: $color-purple-200;
-$background-darker-secondary-color: $color-purple-200;
-$background-dark-color: $color-purple-900;
-$text-color: $color-black;
-$text-secondary-color: $color-black;
-$text-tertiary-color: $color-black;
-$border-light-color: $color-gray-600;
-$text-darker-color: $color-black;
-$edge-color: $color-black;
-
-$node-elements-in-background-opacity: 0.4;
-
-$node-highlight-shadow-opacity: 0.4;
-$node-highlight-stroke-opacity: 0.5;
-$node-highlight-stroke-width: 0.16;
-$node-border-stroke-width: 0.2;
-$node-shadow-stroke-width: 0.25;
-$node-pseudo-opacity: 1;
-$edge-highlight-opacity: 0.3;
-$edge-opacity-blurred: 0;
-
-$btn-opacity-default: 1;
-$btn-opacity-hover: 1;
-$btn-opacity-selected: 1;
-$btn-opacity-disabled: 0.4;
-
-$link-opacity-default: 1;
-
-$search-border-color: $color-purple-200;
-$search-border-width: 2px;
-
-/* specific elements */
-$body-background-color: $color-white;
-$label-background-color: $color-white;

client/app/styles/_default-theme.scss

@@ -1,48 +0,0 @@
-$base-ease: ease-in-out;
-
-$background-color: $color-gray-50;
-$background-lighter-color: $color-white;
-$background-darker-color: $color-purple-100;
-$background-darker-secondary-color: $color-gray-50;
-$background-dark-color: $color-purple-900;
-$text-color: $color-purple-800;
-$text-secondary-color: $color-purple-600;
-$text-tertiary-color: $color-purple-400;
-$border-light-color: $color-purple-100;
-$text-darker-color: $color-purple-900;
-
-$details-window-width: 420px;
-$details-window-padding-left: 30px;
-
-$terminal-header-height: 44px;
-
-$node-elements-in-background-opacity: 0.7;
-
-$node-highlight-shadow-opacity: 0.5;
-$node-highlight-stroke-opacity: 0.4;
-$node-highlight-stroke-width: 0.04;
-$node-border-stroke-width: 0.12;
-$node-shadow-stroke-width: 0.18;
-$node-pseudo-opacity: 0.8;
-$node-text-scale: 2;
-$edge-highlight-opacity: 0.1;
-$edge-opacity-blurred: 0.2;
-$edge-opacity: 0.5;
-$edge-color: $color-purple-500;
-
-$btn-opacity-default: 0.9;
-$btn-opacity-hover: 1;
-$btn-opacity-selected: 0.9;
-$btn-opacity-disabled: 0.25;
-
-$link-opacity-default: 0.8;
-
-$search-border-color: transparent;
-$search-border-width: 1px;
-
-$timeline-height: 55px;
-
-/* specific elements */
-$body-background-color: $color-purple-25;
-$label-background-color: transparentize($color-purple-25, 0.3);
-

client/app/styles/main.scss

@@ -1,15 +0,0 @@
-// Load the default theme initially to apply it on the global html level.
-@import "default-theme";
-@import "base";
-@import "terminal";
-
-.scope-app.contrast-mode {
-    // Load the contrast theme and reload all the CSS in the scope-app container.
-    @import "contrast-theme";
-    @import "base";
-}
-.scope-app:not(.contrast-mode) {
-    // Load the default theme and reload all the CSS in the scope-app container.
-    @import "default-theme";
-    @import "base";
-}

client/app/styles/terminal.scss

@@ -1,167 +0,0 @@
-/**
- * Copyright (c) 2014 The xterm.js authors. All rights reserved.
- * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
- * https://github.com/chjj/term.js
- * @license MIT
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in
- * all copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
- * THE SOFTWARE.
- *
- * Originally forked from (with the author's permission):
- *   Fabrice Bellard's javascript vt100 for jslinux:
- *   http://bellard.org/jslinux/
- *   Copyright (c) 2011 Fabrice Bellard
- *   The original design remains. The terminal itself
- *   has been extended to include xterm CSI codes, among
- *   other features.
- */
-
-/**
- *  Default styles for xterm.js
- */
-
-.xterm {
-    font-family: $font-family-monospace;
-    font-feature-settings: "liga" 0;
-    position: relative;
-    user-select: none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-}
-
-.xterm.focus,
-.xterm:focus {
-    outline: none;
-}
-
-.xterm .xterm-helpers {
-    position: absolute;
-    top: 0;
-    /**
-     * The z-index of the helpers must be higher than the canvases in order for
-     * IMEs to appear on top.
-     */
-    /* sass-lint:disable variable-for-property */
-    z-index: 10;
-    /* sass-lint:enable variable-for-property */
-}
-
-.xterm .xterm-helper-textarea {
-    /*
-     * HACK: to fix IE's blinking cursor
-     * Move textarea out of the screen to the far left, so that the cursor is not visible.
-     */
-    position: absolute;
-    opacity: 0;
-    left: -9999em;
-    top: 0;
-    width: 0;
-    height: 0;
-    /* sass-lint:disable variable-for-property */
-    z-index: -10;
-    /* sass-lint:enable variable-for-property */
-    /** Prevent wrapping so the IME appears against the textarea at the correct position */
-    white-space: nowrap;
-    overflow: hidden;
-    resize: none;
-}
-
-.xterm .composition-view {
-    /* TODO: Composition position got messed up somewhere */
-    background: $color-black;
-    color: $color-white;
-    display: none;
-    position: absolute;
-    white-space: nowrap;
-    /* sass-lint:disable variable-for-property */
-    z-index: 1;
-    /* sass-lint:enable variable-for-property */
-}
-
-.xterm .composition-view.active {
-    display: block;
-}
-
-.xterm .xterm-viewport {
-    /* On OS X this is required in order for the scroll bar to appear fully opaque */
-    background-color: $color-black;
-    overflow-y: scroll;
-    cursor: default;
-    position: absolute;
-    right: 0;
-    left: 0;
-    top: 0;
-    bottom: 0;
-}
-
-.xterm .xterm-screen {
-    position: relative;
-}
-
-.xterm .xterm-screen canvas {
-    position: absolute;
-    left: 0;
-    top: 0;
-}
-
-.xterm .xterm-scroll-area {
-    visibility: hidden;
-}
-
-.xterm-char-measure-element {
-    display: inline-block;
-    visibility: hidden;
-    position: absolute;
-    top: 0;
-    left: -9999em;
-    line-height: normal;
-}
-
-.xterm.enable-mouse-events {
-    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
-    cursor: default;
-}
-
-.xterm:not(.enable-mouse-events) {
-    cursor: text;
-}
-
-.xterm .xterm-accessibility,
-.xterm .xterm-message {
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    /* sass-lint:disable variable-for-property */
-    z-index: 100;
-    /* sass-lint:enable variable-for-property */
-    color: transparent;
-}
-
-.xterm .live-region {
-    position: absolute;
-    left: -9999px;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-}
-
-.xterm-cursor-pointer {
-    cursor: pointer;
-}

client/package.json

@@ -29,6 +29,7 @@
     "lodash": "4.17.15",
     "moment": "2.24.0",
     "page": "1.11.4",
+    "polished": "3.4.1",
     "prop-types": "15.7.2",
     "rc-slider": "8.6.13",
     "react": "16.9.0",
@@ -78,12 +79,8 @@
     "jest-cli": "25.0.0",
     "json-loader": "0.5.7",
     "mockdate": "2.0.2",
-    "node-sass": "^4.12.0",
     "postcss-loader": "3.0.0",
     "react-router": "3.2.0",
-    "sass-lint": "^1.13.1",
-    "sass-lint-webpack": "1.0.0",
-    "sass-loader": "7.0.1",
     "style-loader": "0.21.0",
     "stylelint": "11.0.0",
     "stylelint-config-recommended": "3.0.0",
@@ -101,14 +98,14 @@
   "scripts": {
     "build": "webpack --config webpack.production.config.js",
     "build-external": "EXTERNAL=true webpack --config webpack.production.config.js",
-    "copy-pkg-files": "cp package.json build-pkg/ && cp -R app/styles build-pkg/",
+    "copy-pkg-files": "cp package.json build-pkg/",
     "build-pkg": "mkdir -p build-pkg && node node_modules/.bin/babel app/scripts --ignore __tests__ --out-dir build-pkg && yarn run copy-pkg-files",
     "bundle": "mkdir -p bundle && yarn run build-pkg && cd ./build-pkg && yarn pack --filename ../bundle/weave-scope.tgz",
     "start": "node server.js",
     "start-production": "NODE_ENV=production node server.js",
     "test": "jest",
     "coveralls": "cat coverage/lcov.info | coveralls",
-    "lint": "eslint app server.js && stylelint app/scripts && sass-lint -v",
+    "lint": "eslint app server.js && stylelint app/scripts",
     "clean": "rm build/app.js",
     "noprobe": "../scope stop && ../scope launch --no-probe --app.window 8760h",
     "loadreport": "yarn run noprobe && sleep 1 && curl -X POST -H \"Content-Type: application/json\" http://$BACKEND_HOST/api/report -d"

client/webpack.local.config.js

@@ -2,8 +2,6 @@ const webpack = require('webpack');
 const autoprefixer = require('autoprefixer');
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const SassLintPlugin = require('sass-lint-webpack');
-const { themeVarsAsScss } = require('weaveworks-ui-components/lib/theme');
 
 /**
  * This is the Webpack configuration file for local development.
@@ -70,10 +68,6 @@ module.exports = {
       filename: 'index.html',
       template: 'app/html/index.html',
     }),
-    new SassLintPlugin({
-      context: 'app/styles',
-      ignorePlugins: ['html-webpack-plugin'],
-    }),
   ],
 
   // Transform source code using Babel and React Hot Loader
@@ -127,23 +121,6 @@ module.exports = {
             }
           },
         ],
-      },
-      {
-        test: /\.scss$/,
-        use: [
-          { loader: 'style-loader' },
-          { loader: 'css-loader' },
-          {
-            loader: 'sass-loader',
-            options: {
-              data: themeVarsAsScss(),
-              includePaths: [
-                path.resolve(__dirname, './node_modules/xterm'),
-                path.resolve(__dirname, './node_modules/rc-slider'),
-              ]
-            }
-          },
-        ],
       }
     ]
   },

client/webpack.production.config.js

@@ -4,7 +4,6 @@ const path = require('path');
 
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { themeVarsAsScss } = require('weaveworks-ui-components/lib/theme');
 
 const GLOBALS = {
   'process.env': {NODE_ENV: '"production"'}
@@ -122,23 +121,6 @@ module.exports = {
             }
           },
         ],
-      },
-      {
-        test: /\.scss$/,
-        use: [
-          { loader: 'style-loader' },
-          { loader: 'css-loader' },
-          {
-            loader: 'sass-loader',
-            options: {
-              data: themeVarsAsScss(),
-              includePaths: [
-                path.resolve(__dirname, './node_modules/xterm'),
-                path.resolve(__dirname, './node_modules/rc-slider'),
-              ]
-            }
-          },
-        ],
       }
     ]
   },