From 90b1c4fe049293c7d7b613103bfc9da1f0b08eb4 Mon Sep 17 00:00:00 2001
From: Adolfo Panizo <adolfo.panizo@gmail.com>
Date: Mon, 5 Mar 2018 09:45:42 +0100
Subject: [PATCH] Adding JS -> SCSS variables to webpack

---
 config/webpack.config.dev.js | 11 ++++++-
 package-lock.json            | 63 ++++++++++++++++++++++++++++++++++++
 package.json                 |  1 +
 src/App.css                  |  2 +-
 4 files changed, 75 insertions(+), 2 deletions(-)

diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js
index d3de2ea4..2d4021aa 100644
--- a/config/webpack.config.dev.js
+++ b/config/webpack.config.dev.js
@@ -1,4 +1,5 @@
 var autoprefixer = require('autoprefixer');
+var cssvars = require('postcss-simple-vars');
 var webpack = require('webpack');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
@@ -19,6 +20,8 @@ var publicUrl = '';
 // Get environment variables to inject into our app.
 var env = getClientEnvironment(publicUrl);
 
+var cssvariables = require(paths.appSrc + '/theme/variables');
+
 // This is the development configuration.
 // It is focused on developer experience and fast rebuilds.
 // The production configuration is different and lives in a separate file.
@@ -136,7 +139,7 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        loader: 'style!css?importLoaders=1&modules=true&localIdentName=[name]__[local]___[hash:base64:5]!postcss'
+        loader: 'style!css?importLoaders=1&modules=true&minimize=true&localIdentName=[name]__[local]___[hash:base64:5]!postcss?sourceMap'
       },
       // "postcss" loader applies autoprefixer to our CSS.
       // "css" loader resolves paths in CSS and adds assets as dependencies.
@@ -207,6 +210,12 @@ module.exports = {
           'not ie < 9', // React doesn't support IE8 anyway
         ]
       }),
+      cssvars({
+        variables: function () {
+            return Object.assign({}, cssvariables);
+        },
+        silent: false
+      }),
     ];
   },
   plugins: [
diff --git a/package-lock.json b/package-lock.json
index b5a0724a..df6509e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9453,6 +9453,69 @@
         "uniq": "1.0.1"
       }
     },
+    "postcss-simple-vars": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-4.1.0.tgz",
+      "integrity": "sha512-J/TRomA8EqXhS4VjQJsPCYTFIa9FYN/dkJK/8oZ0BYeVIPx91goqM8T+ljsP57+4bwSEywFOuB7EZ8n1gjjxZw==",
+      "dev": true,
+      "requires": {
+        "postcss": "6.0.19"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "1.9.1"
+          }
+        },
+        "chalk": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz",
+          "integrity": "sha512-ZM4j2/ld/YZDc3Ma8PgN7gyAk+kHMMMyzLNryCPGhWrsfAuDVeuid5bpRFTDgMH9JBK2lA4dyyAkkZYF/WcqDQ==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.3.0"
+          }
+        },
+        "has-flag": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
+        },
+        "postcss": {
+          "version": "6.0.19",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.19.tgz",
+          "integrity": "sha512-f13HRz0HtVwVaEuW6J6cOUCBLFtymhgyLPV7t4QEk2UD3twRI9IluDcQNdzQdBpiixkXj2OmzejhhTbSbDxNTg==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.3.2",
+            "source-map": "0.6.1",
+            "supports-color": "5.3.0"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.3.0.tgz",
+          "integrity": "sha512-0aP01LLIskjKs3lq52EC0aGBAJhLq7B2Rd8HC/DR/PtNNpcLilNmHC12O+hu0usQpo7wtHNRqtrhBwtDb0+dNg==",
+          "dev": true,
+          "requires": {
+            "has-flag": "3.0.0"
+          }
+        }
+      }
+    },
     "postcss-svgo": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-2.1.6.tgz",
diff --git a/package.json b/package.json
index 4485248f..0cf38645 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
     "object-assign": "4.1.0",
     "path-exists": "2.1.0",
     "postcss-loader": "1.0.0",
+    "postcss-simple-vars": "^4.0.0",
     "promise": "7.1.1",
     "react-dev-utils": "^0.4.2",
     "recursive-readdir": "2.1.0",
diff --git a/src/App.css b/src/App.css
index b8d02755..774869dd 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,6 +1,6 @@
 body {
   font-family: 'Montserrat', sans-serif;
-  color: #6b7c93;
+  color: $(secondary);
   background-color: #f0f1f3;
 }