From 6d2d1dae4bd4860ec7e593590ee18fafb06a6e55 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Tue, 21 Feb 2017 18:43:00 -0500 Subject: [PATCH] Use postcss-simple-vars for variables (#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. --- package.json | 3 +- src/components/gui/gui.css | 77 ++++++++++++++++++-------------------- src/css/units.css | 1 + webpack.config.js | 7 +++- 4 files changed, 44 insertions(+), 44 deletions(-) create mode 100644 src/css/units.css diff --git a/package.json b/package.json index 4cb1e3d5b..41feccd8a 100644 --- a/package.json +++ b/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", diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css index 9238a34d0..8ddce5ec5 100644 --- a/src/components/gui/gui.css +++ b/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; } diff --git a/src/css/units.css b/src/css/units.css new file mode 100644 index 000000000..2b54f0e61 --- /dev/null +++ b/src/css/units.css @@ -0,0 +1 @@ +$space: 0.5rem; diff --git a/webpack.config.js b/webpack.config.js index a752bec8e..693b18861 100644 --- a/webpack.config.js +++ b/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'] })