Update dependencies

.eslintrc

@@ -20,6 +20,8 @@
     "react/no-find-dom-node": 0,
     "react/jsx-filename-extension": 0,
     "import/prefer-default-export": 0,
+    "jsx-a11y/no-noninteractive-tabindex": 0,
+    "jsx-a11y/no-noninteractive-element-interactions": 0,
     "jsx-a11y/no-static-element-interactions": 0,
     "jsx-a11y/label-has-for": 0,
     "import/no-extraneous-dependencies": [

.stylelintrc

@@ -14,11 +14,11 @@
       ]
     }],
     "color-hex-case": "lower",
-    "order/declaration-block-order": [
+    "order/order": [
       "custom-properties",
       "declarations"
     ],
-    "order/declaration-block-properties-alphabetical-order": true,
+    "order/properties-alphabetical-order": true,
     "font-family-name-quotes": "always-where-recommended",
     "string-quotes": "single",
     "selector-pseudo-class-no-unknown": [

components/dialog/Dialog.js

@@ -39,7 +39,7 @@ const factory = (Overlay, Button) => {
             {props.children}
           </section>
           {actions.length
-            ? <nav role="navigation" className={props.theme.navigation}>
+            ? <nav className={props.theme.navigation}>
               {actions}
             </nav>
             : null

gulpfile.js

@@ -21,6 +21,7 @@ gulp.task('css', function () {
     }),
     require('postcss-mixins')(),
     require('postcss-each')(),
+    require('postcss-nested')(),
     require('postcss-reporter')({ clearMessages: true })
   ];
 

package.json

@@ -29,70 +29,71 @@
     "classnames": "^2.2.5",
     "core-js": "^2.4.0",
     "ramda": "^0.23.0",
-    "react-css-themr": "^1.7.2",
-    "react-style-proptype": "^2.0.0",
+    "react-css-themr": "^2.1.2",
+    "react-style-proptype": "^3.0.0",
     "react-transition-group": "^1.1.3"
   },
   "devDependencies": {
-    "babel-cli": "^6.22.2",
-    "babel-core": "^6.22.1",
-    "babel-eslint": "^7.1.1",
-    "babel-loader": "^6.2.10",
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.24.1",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^7.0.0",
     "babel-plugin-react-transform": "^2.0.2",
-    "babel-polyfill": "^6.22.0",
-    "babel-preset-es2015": "^6.22.0",
-    "babel-preset-react": "^6.22.0",
-    "babel-preset-stage-0": "^6.22.0",
+    "babel-polyfill": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
     "cpx": "^1.5.0",
-    "cross-env": "^3.1.3",
-    "css-loader": "^0.26.1",
-    "enzyme": "^2.7.1",
-    "enzyme-to-json": "^1.4.5",
-    "eslint": "^3.15.0",
-    "eslint-config-airbnb": "^14.1.0",
+    "cross-env": "^5.0.0",
+    "css-loader": "^0.28.2",
+    "enzyme": "^2.8.2",
+    "enzyme-to-json": "^1.5.1",
+    "eslint": "^3.19.0",
+    "eslint-config-airbnb": "^15.0.1",
     "eslint-import-resolver-webpack": "^0.8.1",
-    "eslint-plugin-babel": "^4.0.1",
-    "eslint-plugin-compat": "^1.0.1",
+    "eslint-plugin-babel": "^4.1.1",
+    "eslint-plugin-compat": "^1.0.2",
     "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^4.0.0",
-    "eslint-plugin-react": "^6.9.0",
-    "express": "^4.14.1",
-    "extract-text-webpack-plugin": "~2.0.0-rc.3",
+    "eslint-plugin-jsx-a11y": "^5.0.3",
+    "eslint-plugin-react": "^7.0.1",
+    "express": "^4.15.3",
+    "extract-text-webpack-plugin": "^2.1.0",
     "git-dirty": "^1.0.2",
-    "glob": "^7.1.1",
+    "glob": "^7.1.2",
     "gulp": "^3.9.1",
     "gulp-babel": "^6.1.2",
-    "gulp-postcss": "^6.3.0",
+    "gulp-postcss": "^7.0.0",
     "gulp-rimraf": "^0.2.1",
     "identity-obj-proxy": "^3.0.0",
     "internal-ip": "^1.2.0",
-    "jest": "^18.1.0",
-    "lint-staged": "^3.3.0",
-    "mocha": "^3.1.2",
-    "normalize.css": "^5.0.0",
-    "postcss-cssnext": "^2.8.0",
-    "postcss-each": "^0.9.3",
-    "postcss-import": "^9.1.0",
-    "postcss-loader": "^1.2.2",
-    "postcss-mixins": "^5.4.0",
+    "jest": "^20.0.3",
+    "lint-staged": "^3.4.2",
+    "mocha": "^3.4.1",
+    "normalize.css": "^7.0.0",
+    "postcss-cssnext": "^2.11.0",
+    "postcss-each": "^0.10.0",
+    "postcss-import": "^10.0.0",
+    "postcss-loader": "^2.0.5",
+    "postcss-mixins": "^6.0.0",
+    "postcss-nested": "^2.0.2",
     "postcss-reporter": "^3.0.0",
     "pre-commit": "^1.2.2",
-    "prop-types": "^15.5.7",
+    "prop-types": "^15.5.10",
     "react": "^15.5.0",
     "react-addons-test-utils": "^15.5.0",
     "react-dom": "^15.5.0",
     "react-test-renderer": "^15.5.0",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.4",
-    "redbox-react": "^1.3.2",
-    "rimraf": "^2.5.2",
-    "style-loader": "^0.13.1",
-    "stylelint": "^7.8.0",
+    "redbox-react": "^1.3.6",
+    "rimraf": "^2.6.1",
+    "style-loader": "^0.18.0",
+    "stylelint": "^7.10.1",
     "stylelint-config-standard": "^16.0.0",
-    "stylelint-order": "^0.2.2",
-    "webpack": "~2.2.0",
-    "webpack-dev-middleware": "^1.10.0",
-    "webpack-hot-middleware": "^2.16.1"
+    "stylelint-order": "^0.4.4",
+    "webpack": "^2.6.0",
+    "webpack-dev-middleware": "^1.10.2",
+    "webpack-hot-middleware": "^2.18.0"
   },
   "engines": {
     "node": ">= 6"
@@ -137,8 +138,8 @@
     "classnames": "^2.2.0",
     "prop-types": "^15.5.7",
     "react": "^15.5.0",
-    "react-transition-group": "^1.1.3",
-    "react-dom": "^15.5.0"
+    "react-dom": "^15.5.0",
+    "react-transition-group": "^1.1.3"
   },
   "pre-commit": "lint:staged"
 }

webpack/postcss.config.js

@@ -0,0 +1,17 @@
+const path = require('path');
+
+module.exports = {
+  plugins: {
+    'postcss-import': {
+      root: path.join(__dirname, '../'),
+      path: [path.join(__dirname, '../components')]
+    },
+    'postcss-mixins': {},
+    'postcss-each': {},
+    'postcss-cssnext': {},
+    'postcss-nested': {},
+    'postcss-reporter': {
+      clearMessages: true
+    }
+  }
+}

webpack/webpack.config.dev.js

@@ -23,7 +23,7 @@ module.exports = {
   module: {
     rules: [{
       test: /\.js$/,
-      loader: 'babel-loader',
+      use: 'babel-loader',
       include: [
         path.join(__dirname, '../components'),
         path.join(__dirname, '../spec')
@@ -31,7 +31,7 @@ module.exports = {
     }, {
       test: /\.css$/,
       include: /node_modules/,
-      loader: ExtractTextPlugin.extract({
+      use: ExtractTextPlugin.extract({
         fallback: 'style-loader',
         loader: 'css-loader',
       })
@@ -44,33 +44,24 @@ module.exports = {
       use: ['style-loader', {
         loader: 'css-loader',
         query: {
-          modules: true,
+          import: false,
+          importLoaders: 1,
           localIdentName: '[name]__[local]___[hash:base64:5]',
+          modules: true,
           sourceMap: true
         },
-      }, 'postcss-loader']
+      }, {
+        loader: 'postcss-loader',
+        options: {
+          // context: path.join(__dirname, '../'),
+          config: {
+            path: path.join(__dirname, './postcss.config.js')
+          }
+        }
+      }]
     }]
   },
   plugins: [
-    new webpack.LoaderOptionsPlugin({
-      options: {
-        context: path.join(__dirname, '../'),
-        postcss () {
-          return [
-            require('postcss-import')({
-              root: path.join(__dirname, '../'),
-              path: [path.join(__dirname, '../components')]
-            }),
-            require('postcss-mixins')(),
-            require('postcss-each')(),
-            require('postcss-cssnext')(),
-            require('postcss-reporter')({
-              clearMessages: true
-            })
-          ];
-        }
-      }
-    }),
     new ExtractTextPlugin({ filename: 'spec.css', allChunks: true }),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.EvalSourceMapDevToolPlugin(),