Use postcss-simple-vars for variables (scratchfoundation#125)

Using postcss-modules-values with imported values failed on our current basic usage; it is apparently not mature enough to be used yet.

The syntax used by postcss-simple-vars is already familiar to most people familiar with modern CSS build systems.

Author: rschamp

package.json

@@ -49,8 +49,9 @@
     "lodash.pick": "4.4.0",
     "minilog": "3.1.0",
     "opt-cli": "1.5.1",
+    "postcss-import": "9.1.0",
     "postcss-loader": "1.3.1",
-    "postcss-modules-values": "1.2.2",
+    "postcss-simple-vars": "3.0.0",
     "react": "15.4.2",
     "react-dom": "15.4.2",
     "react-modal": "1.6.5",

src/components/gui/gui.css

@@ -1,95 +1,90 @@
-/* 
-    OQ: convention: _ for variables?
-    TODO: refactor into resuable vars file
-    https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md
-*/
-@value _space: 0.5rem;
+@import "../../css/units.css";
 
 .page-wrapper {
     height: 100%;
 }
 
 .body-wrapper {
-    /*  
+    /*
         Calc the height by subtracting the menu bar height
         TODO: Make height a reusable variable, link to use in .menu-bar
     */
-    height: calc(100% - 3rem); 
+    height: calc(100% - 3rem);
     background-color: #e8edf1;
 }
 
 .flex-wrapper {
     display: flex;
 
-    /* 
-        Make 2 columns: 
-        a) for the blocks + workspace panes, and 
-        b) for combined stage menu + stage + sprite/stage selectors 
+    /*
+        Make 2 columns:
+        a) for the blocks + workspace panes, and
+        b) for combined stage menu + stage + sprite/stage selectors
     */
-    flex-direction: row; 
+    flex-direction: row;
     height: 100%;
 }
 
 .blocks-wrapper {
-    /* 
-        scratch-blocks is based on absolute positioning, which injects 
+    /*
+        scratch-blocks is based on absolute positioning, which injects
         inside this element and becomes the child
     */
-    position: relative; 
+    position: relative;
 
     flex-basis: 600px;
     flex-grow: 1;
     flex-shrink: 0;
 
-    /* 
-        Normally we'd use padding, but the absolute positioning ignores it, 
-        so use margin instead. Temporary, until tabs are inserted. 
+    /*
+        Normally we'd use padding, but the absolute positioning ignores it,
+        so use margin instead. Temporary, until tabs are inserted.
     */
-    margin-top: 3rem;  
+    margin-top: 3rem;
 
     background: #e8edf1;
 }
 
 .stage-and-target-wrapper {
-    /*  
-        Make rows for children: 
+    /*
+        Make rows for children:
           1) stage menu
           2) stage
           3) sprite/stage selectors
-        Only reason we need this, is so .targetWrapper, which holds the selectors, 
+        Only reason we need this, is so .targetWrapper, which holds the selectors,
         goes to full vertical height of the window
     */
     display: flex;
-    flex-direction: column; 
+    flex-direction: column;
 
-    /* 
-        Calc the minimum width for this pane, accounting for left + right spacing. 
-        If and when the width doesn't need to be fixed, we can move the spacing out 
-        of this calc, and into padding instead  
+    /*
+        Calc the minimum width for this pane, accounting for left + right spacing.
+        If and when the width doesn't need to be fixed, we can move the spacing out
+        of this calc, and into padding instead
     */
-    flex-basis: calc(480px + (_space * 2));  
-}    
+    flex-basis: calc(480px + ($space * 2));
+}
 
 .stage-wrapper {
-    padding-left: _space;
-    padding-right: _space;
+    padding-left: $space;
+    padding-right: $space;
 }
 
 .target-wrapper {
     /*  Take all the available vertical space available.
-        Works in tandem with height: 100%; which is set on the child: .targetPane 
-        TODO: Not working in Safari, not great in FFx 
+        Works in tandem with height: 100%; which is set on the child: .targetPane
+        TODO: Not working in Safari, not great in FFx
     */
     flex-grow: 1;
     flex-basis: 0;
 
-    padding-top: _space;
-    padding-left: _space;
-    padding-right: _space;
-    
-    /* 
+    padding-top: $space;
+    padding-left: $space;
+    padding-right: $space;
+
+    /*
         For making the sprite-selector a scrollable pane.
-        TODO: Not working in Safari 
+        TODO: Not working in Safari
     */
     overflow: hidden;
 }
@@ -99,5 +94,5 @@
     flex-shrink: 0;
     align-items: center;
     height: 3rem;
-    padding: _space;
+    padding: $space;
 }

src/css/units.css

@@ -0,0 +1 @@
+$space: 0.5rem;

webpack.config.js

@@ -7,7 +7,8 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 // PostCss
 var autoprefixer = require('autoprefixer');
-var values = require('postcss-modules-values');
+var postcssVars = require('postcss-simple-vars');
+var postcssImport = require('postcss-import');
 
 module.exports = {
     devServer: {
@@ -52,9 +53,11 @@ module.exports = {
             }, {
                 loader: 'postcss-loader',
                 options: {
+                    ident: 'postcss',
                     plugins: function () {
                         return [
-                            values,
+                            postcssImport,
+                            postcssVars,
                             autoprefixer({
                                 browsers: ['last 3 versions', 'Safari >= 8', 'iOS >= 8']
                             })