ui: remove sass-loader and node-sass dependencies (#137)

* converted elements to css, removed theme * removing node-sass, sass-loader, scss refs
target · Sep 12, 2019 · 3221aab · 3221aab
1 parent 242f9ac
commit 3221aab
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 502 deletions.
diff --git a/web/src/app/styles/base/elements.scss → web/src/app/styles/base/elements.css b/web/src/app/styles/base/elements.scss → web/src/app/styles/base/elements.css
@@ -1,4 +1,8 @@
-@import './variables.scss';
+:root {
+  --color-critical: #ff324d;
+  --color-warning: #ffd602;
+  --color-ok: #8cc800;
+}
 
 html {
   height: 100%;
@@ -17,11 +21,10 @@ body {
 a {
   text-decoration: none;
   color: #cd1831;
+}
 
-  &:hover {
-    text-decoration: underline;
-    //color: #8f1022;
-  }
+a:hover {
+  text-decoration: underline;
 }
 
 .rbc-time-content .rbc-current-time-indicator {
@@ -89,17 +92,17 @@ pre code {
 
 tr.unacknowledged,
 div.unacknowledged {
-  border-left: 3px solid $color-critical;
+  border-left: 3px solid var(--color-critical);
 }
 
 tr.acknowledged,
 div.acknowledged {
-  border-left: 3px solid $color-warning;
+  border-left: 3px solid var(--color-warning);
 }
 
 tr.resolved,
 div.resolved {
-  border-left: 3px solid $color-ok;
+  border-left: 3px solid var(--color-ok);
 }
 
 .list-label {
@@ -111,10 +114,8 @@ div.resolved {
   width: 100%;
 }
 
-ul.no-separators {
-  li {
-    border: none;
-  }
+ul.no-separators li {
+  border: none;
 }
 
 .margin-top-none {

diff --git a/web/src/app/styles/base/theme.scss b/web/src/app/styles/base/theme.scss
diff --git a/web/src/app/styles/base/variables.scss b/web/src/app/styles/base/variables.scss
diff --git a/web/src/app/styles/index.js b/web/src/app/styles/index.js
@@ -1,2 +1 @@
-import './base/elements.scss'
-import './base/theme.scss'
+import './base/elements.css'
diff --git a/web/src/package.json b/web/src/package.json
@@ -4,10 +4,10 @@
   "description": "user interface for the goalert project",
   "main": "index.js",
   "scripts": {
-    "slint": "stylelint ./app/**/*.css ./app/**/*.scss --syntax scss",
+    "slint": "stylelint ./app/**/*.css",
     "lint": "eslint .",
     "precommit-msg": "echo 'Pre-commit checks...' && exit 0",
-    "fmt": "prettier -l --write '**/*.{js,yml,yaml,json,css,scss,ts,html}' || eslint --fix .",
+    "fmt": "prettier -l --write '**/*.{js,yml,yaml,json,css,ts,html}' || eslint --fix .",
     "build-deps": "webpack --config ./webpack.dll.config.js --progress"
   },
   "jest": {
@@ -33,9 +33,9 @@
       "eslint --fix",
       "git add"
     ],
-    "*.{css,scss}": [
+    "*.css": [
       "prettier --write",
-      "stylelint --syntax scss",
+      "stylelint",
       "git add"
     ]
   },
@@ -145,14 +145,12 @@
     "jest": "24.9.0",
     "json-loader": "0.5.7",
     "lint-staged": "9.2.5",
-    "node-sass": "4.12.0",
     "postcss-loader": "3.0.0",
     "prettier": "1.18.2",
     "raw-loader": "3.1.0",
     "react-hot-loader": "4.12.12",
     "redux": "4.0.4",
     "redux-devtools-extension": "2.13.8",
-    "sass-loader": "7.1.0",
     "style-loader": "1.0.0",
     "stylelint": "10.1.0",
     "stylelint-config-standard": "18.3.0",

diff --git a/web/src/webpack.config.js b/web/src/webpack.config.js
@@ -24,7 +24,7 @@ module.exports = {
     publicPath: '/',
   },
   resolve: {
-    extensions: ['.js', '.ts', '.jsx', '.css', '.scss'],
+    extensions: ['.js', '.ts', '.jsx', '.css'],
     alias: {
       'react-dom': '@hot-loader/react-dom',
     },
@@ -47,19 +47,6 @@ module.exports = {
         exclude: [/node_modules/],
         include: [APP],
       },
-      {
-        test: /\.scss$/,
-        use: [
-          'style-loader',
-          'css-loader',
-          {
-            loader: 'sass-loader',
-            options: {
-              includePaths: ['./node_modules'],
-            },
-          },
-        ],
-      },
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],

diff --git a/web/src/webpack.prod.config.js b/web/src/webpack.prod.config.js
@@ -24,7 +24,7 @@ module.exports = {
     publicPath: '/',
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.css', '.scss'],
+    extensions: ['.js', '.jsx', '.css'],
   },
   module: {
     rules: [
@@ -36,20 +36,6 @@ module.exports = {
         ],
         include: [APP],
       },
-      {
-        test: /\.scss$/,
-        use: [
-          'style-loader',
-          { loader: 'css-loader', options: { importLoaders: 1 } },
-          'postcss-loader',
-          {
-            loader: 'sass-loader',
-            options: {
-              includePaths: ['./node_modules'],
-            },
-          },
-        ],
-      },
       {
         test: /\.css$/,
         use: [