update demo deps and add composes and value keyworks

css-modules · Jan 8, 2018 · 1eb95a8 · 1eb95a8
1 parent 07a8739
commit 1eb95a8
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 33 deletions.
diff --git a/demo/components/Button/Button.css b/demo/components/Button/Button.css
@@ -1,24 +1,24 @@
+@value primary, primaryShadow from 'Colors.css';
+
+.common
+{
+  composes: common from './Common.css';
+}
+
 .common,
 .common:active
 {
-  display: inline-block;
-
   margin: 0 0 20px;
   padding: 0 11px;
 
-  cursor: pointer;
-  user-select: none;
   transition: all .3s;
-  text-align: center;
-  white-space: nowrap;
-  text-decoration: none;
 
   color: #fff;
   border: none;
   border-radius: 5px;
   outline: none;
-  background: #43a047;
-  box-shadow: 0 5px 0 #2e7d32;
+  background: primary;
+  box-shadow: 0 5px 0 primaryShadow;
 
   font: normal 20px/38px Roboto;
 }

diff --git a/demo/components/Button/Colors.css b/demo/components/Button/Colors.css
@@ -0,0 +1,2 @@
+@value primary #43a047;
+@value primaryShadow #2e7d32;
diff --git a/demo/components/Button/Common.css b/demo/components/Button/Common.css
@@ -0,0 +1,11 @@
+.common
+{
+  display: inline-block;
+
+  cursor: pointer;
+  user-select: none;
+
+  text-align: center;
+  white-space: nowrap;
+  text-decoration: none;
+}
diff --git a/demo/package.json b/demo/package.json
@@ -25,18 +25,18 @@
     "react-dom": "^15.3.2"
   },
   "devDependencies": {
-    "autoprefixer": "^6.5.0",
-    "babel-core": "^6.17.0",
-    "babel-loader": "^6.2.5",
-    "babel-preset-es2015": "^6.16.0",
-    "babel-preset-react": "^6.16.0",
-    "babel-preset-stage-0": "^6.16.0",
-    "css-loader": "^0.25.0",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "autoprefixer": "^7.2.4",
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "css-loader": "0.28.7",
+    "extract-text-webpack-plugin": "^3.0.2",
     "npm-install-webpack-plugin": "^4.0.4",
-    "postcss-font-magician": "^1.4.0",
-    "postcss-loader": "^0.13.0",
-    "style-loader": "^0.13.1",
-    "webpack": "^1.13.2"
+    "postcss-font-magician": "^2.1.0",
+    "postcss-loader": "^2.0.10",
+    "style-loader": "^0.19.1",
+    "webpack": "^3.10.0"
   }
 }
diff --git a/demo/postcss.config.js b/demo/postcss.config.js
@@ -0,0 +1,9 @@
+'use strict';
+
+module.exports = {
+  plugins: [
+    // small sugar for CSS
+    require('postcss-font-magician'),
+    require('autoprefixer'),
+  ],
+};
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
@@ -15,29 +15,37 @@ module.exports = {
   },
 
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.js$/i,
         exclude: /node_modules/,
-        loader: 'babel?presets[]=es2015,presets[]=react,presets[]=stage-0',
+        loader: 'babel-loader',
+        options: {
+          presets: ['es2015', 'react', 'stage-0'],
+        },
       },
       {
         test: /\.css$/i,
-        loader: ExtractTextPlugin.extract('style',
-          `css?modules&localIdentName=${config.css}!postcss`),
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            {
+              loader: 'css-loader',
+              options: {
+                modules: true,
+                localIdentName: config.css,
+              },
+            },
+            'postcss-loader',
+          ],
+        }),
       },
     ],
   },
 
-  postcss: [
-    // small sugar for CSS
-    require('postcss-font-magician'),
-    require('autoprefixer'),
-  ],
-
   plugins: [
     new ExtractTextPlugin('common.css', {
-      allChunks: true
+      allChunks: true,
     }),
     new NpmInstallPlugin({
       cacheMin: 999999,
@@ -50,5 +58,5 @@ module.exports = {
     {
       react: true,
     },
-  ]
+  ],
 };