Update npm modules; add more plugins to PostCSS

package.json

@@ -6,23 +6,23 @@
   },
   "dependencies": {
     "autoprefixer": "^6.3.6",
-    "babel-cli": "^6.8.0",
-    "babel-core": "^6.8.0",
+    "babel-cli": "^6.9.0",
+    "babel-core": "^6.9.0",
     "babel-eslint": "^6.0.4",
     "babel-loader": "^6.2.4",
-    "babel-plugin-transform-runtime": "^6.8.0",
-    "babel-polyfill": "^6.8.0",
-    "babel-preset-es2015": "^6.6.0",
+    "babel-plugin-transform-runtime": "^6.9.0",
+    "babel-polyfill": "^6.9.0",
+    "babel-preset-es2015": "^6.9.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-1": "^6.5.0",
-    "babel-register": "^6.8.0",
-    "babel-runtime": "^6.6.1",
+    "babel-register": "^6.9.0",
+    "babel-runtime": "^6.9.0",
     "browser-sync": "^2.12.8",
     "chai": "^3.5.0",
     "cpy": "^4.0.1",
     "css-loader": "^0.23.1",
     "del": "^2.2.0",
-    "eslint": "^2.10.1",
+    "eslint": "^2.10.2",
     "eslint-config-airbnb": "^9.0.1",
     "eslint-plugin-import": "^1.8.0",
     "eslint-plugin-jsx-a11y": "^1.2.0",
@@ -33,20 +33,24 @@
     "file-loader": "^0.8.5",
     "front-matter": "^2.0.7",
     "git-repository": "^0.1.4",
-    "highlight.js": "^9.3.0",
+    "highlight.js": "^9.4.0",
     "history": "^2.1.1",
     "json-loader": "^0.5.4",
-    "markdown-it": "^6.0.1",
+    "markdown-it": "^6.0.2",
     "mocha": "^2.4.5",
     "pixrem": "^3.0.0",
     "pleeease-filters": "^3.0.0",
     "postcss": "^5.0.21",
     "postcss-calc": "^5.2.1",
     "postcss-color-function": "^2.0.1",
+    "postcss-custom-media": "^5.0.1",
     "postcss-custom-properties": "^5.0.1",
+    "postcss-custom-selectors": "^3.0.0",
     "postcss-import": "^8.1.2",
     "postcss-loader": "^0.9.1",
-    "postcss-pseudoelements": "^3.0.0",
+    "postcss-media-minmax": "^2.1.2",
+    "postcss-nesting": "^2.3.1",
+    "postcss-selector-matches": "^2.0.1",
     "postcss-selector-not": "^2.0.0",
     "react": "^15.0.2",
     "react-app": "^1.0.0-alpha.3",
@@ -56,7 +60,7 @@
     "redux": "^3.5.2",
     "s3": "^4.4.0",
     "style-loader": "^0.13.1",
-    "stylelint": "^6.3.3",
+    "stylelint": "^6.4.1",
     "stylelint-config-standard": "^7.0.0",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.0",

tools/webpack.config.js

@@ -122,9 +122,21 @@ const config = {
       // W3C variables, e.g. :root { --color: red; } div { background: var(--color); }
       // https://github.com/postcss/postcss-custom-properties
       require('postcss-custom-properties')(),
+      // W3C CSS Custom Media Queries, e.g. @custom-media --small-viewport (max-width: 30em);
+      // https://github.com/postcss/postcss-custom-media
+      require('postcss-custom-media')(),
+      // CSS4 Media Queries, e.g. @media screen and (width >= 500px) and (width <= 1200px) { }
+      // https://github.com/postcss/postcss-media-minmax
+      require('postcss-media-minmax')(),
+      // W3C CSS Custom Selectors, e.g. @custom-selector :--heading h1, h2, h3, h4, h5, h6;
+      // https://github.com/postcss/postcss-custom-selectors
+      require('postcss-custom-selectors')(),
       // W3C calc() function, e.g. div { height: calc(100px - 2em); }
       // https://github.com/postcss/postcss-calc
       require('postcss-calc')(),
+      // Allows you to nest one style rule inside another
+      // https://github.com/jonathantneal/postcss-nesting
+      require('postcss-nesting')(),
       // W3C color() function, e.g. div { background: color(red alpha(90%)); }
       // https://github.com/postcss/postcss-color-function
       require('postcss-color-function')(),
@@ -134,9 +146,9 @@ const config = {
       // Generate pixel fallback for "rem" units, e.g. div { margin: 2.5rem 2px 3em 100%; }
       // https://github.com/robwierzbowski/node-pixrem
       require('pixrem')(),
-      // Pseudo elements such as a:before { }
-      // https://github.com/axa-ch/postcss-pseudoelements
-      require('postcss-pseudoelements')(),
+      // W3C CSS Level4 :matches() pseudo class, e.g. p:matches(:first-child, .special) { }
+      // https://github.com/postcss/postcss-selector-matches
+      require('postcss-selector-matches')(),
       // Transforms :not() W3C CSS Level 4 pseudo class to :not() CSS Level 3 selectors
       // https://github.com/postcss/postcss-selector-not
       require('postcss-selector-not')(),