Introducing PostCSS Preset Env

package.json

@@ -50,7 +50,6 @@
     "@babel/preset-env": "^7.1.0",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "autoprefixer": "^9.1.5",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^9.0.0",
     "babel-jest": "^23.6.0",
@@ -87,19 +86,11 @@
     "pleeease-filters": "^4.0.0",
     "postcss": "^7.0.2",
     "postcss-calc": "^6.0.1",
-    "postcss-color-function": "^4.0.1",
-    "postcss-custom-media": "^7.0.3",
-    "postcss-custom-properties": "^8.0.5",
-    "postcss-custom-selectors": "^5.1.2",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-import": "^12.0.0",
     "postcss-loader": "^3.0.0",
-    "postcss-media-minmax": "^4.0.0",
-    "postcss-nested": "^4.1.0",
-    "postcss-nesting": "^7.0.0",
+    "postcss-preset-env": "^6.6.0",
     "postcss-pseudoelements": "^5.0.0",
-    "postcss-selector-matches": "^4.0.0",
-    "postcss-selector-not": "^4.0.0",
     "prettier": "^1.14.3",
     "raw-loader": "^0.5.1",
     "react-deep-force-update": "^2.1.3",

tools/postcss.config.js

@@ -18,50 +18,25 @@ module.exports = () => ({
     // Transfer @import rule by inlining content, e.g. @import 'normalize.css'
     // https://github.com/postcss/postcss-import
     require('postcss-import')(),
-    // 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')(),
-    // Unwraps nested rules like how Sass does it
-    // https://github.com/postcss/postcss-nested
-    require('postcss-nested')(),
-    // W3C color() function, e.g. div { background: color(red alpha(90%)); }
-    // https://github.com/postcss/postcss-color-function
-    require('postcss-color-function')(),
     // Convert CSS shorthand filters to SVG equivalent, e.g. .blur { filter: blur(4px); }
     // https://github.com/iamvdo/pleeease-filters
     require('pleeease-filters')(),
     // Generate pixel fallback for "rem" units, e.g. div { margin: 2.5rem 2px 3em 100%; }
     // https://github.com/robwierzbowski/node-pixrem
     require('pixrem')(),
-    // 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')(),
     // Postcss flexbox bug fixer
     // https://github.com/luisrudge/postcss-flexbugs-fixes
     require('postcss-flexbugs-fixes')(),
-    // Add vendor prefixes to CSS rules using values from caniuse.com
-    // https://github.com/postcss/autoprefixer
-    require('autoprefixer')({
+    // PostCSS Preset Env, which allows you easily to use all the features in cssdb.
+    // See what features in which stage in https://preset-env.cssdb.org/features
+    // https://github.com/csstools/postcss-preset-env
+    require('postcss-preset-env')({
+      stage: 3,
       browsers: pkg.browserslist,
-      flexbox: 'no-2009',
+      autoprefixer: { flexbox: 'no-2009' },
     }),
   ],
 });