refactor: use postcss-preset-env

Author: buschtoens

lib/clark-plugin.js

@@ -24,14 +24,6 @@ module.exports = class ClarkPlugin extends Plugin {
       // Use :enter, which is equal to :hover and :focus combined
       require('postcss-pseudo-class-enter'),
 
-      // https://github.com/jonathantneal/postcss-pseudo-class-any-link
-      // Combination of :link and :visited
-      require('postcss-pseudo-class-any-link'),
-
-      // https://github.com/postcss/postcss-custom-selectorsx
-      // @custom-selector :--heading h1, h2, h3;
-      require('postcss-custom-selectors'),
-
       // https://github.com/jedmao/postcss-nested-props
       // Nest properties like `font: { size: 10px; family: Helvetica; }`
       // @TODO: https://github.com/jedmao/postcss-nested-props/issues/9
@@ -83,9 +75,34 @@ module.exports = class ClarkPlugin extends Plugin {
       // cubic-bezier() for linear-gradient()
       require('postcss-easing-gradients'),
 
-      // https://github.com/postcss/autoprefixer
-      // Add vendor prefixes to rules by Can I Use
-      require('autoprefixer')({ browsers: this.browsers })
+      // https://github.com/csstools/postcss-preset-env
+      // Adds vendor prefixes based on Can I Use and polyfills new features
+      require('postcss-preset-env')({
+        browsers: this.browsers,
+
+        // https://cssdb.org/
+        stage: 4,
+
+        // Disable `preserve` so that the resulting CSS is consistent among all
+        // browsers, diminishing the probability of discovering bugs only when
+        // testing in older browsers
+        preserve: false,
+
+        // Enable features that we want, despite being proposals yet
+        features: {
+          'custom-selectors': true,
+          'custom-properties': true,
+          'custom-media-queries': true,
+          'nesting-rules': true,
+          'pseudo-class-any-link': true
+        },
+
+        autoprefixer: {
+          // We don't use prefixes unless they are really necessary, e.g. when
+          // dealing with quirks therefore, we disable removing them.
+          remove: false
+        }
+      })
     ];
 
     for (const [stage, plugins] of Object.entries({ before, after })) {

package.json

@@ -19,11 +19,9 @@
     "start": "ember serve"
   },
   "dependencies": {
-    "autoprefixer": "^9.4.10",
     "postcss-calc": "^7.0.1",
     "postcss-color-function": "^4.0.1",
     "postcss-conditionals": "^2.1.0",
-    "postcss-custom-selectors": "^5.1.2",
     "postcss-each": "^0.10.0",
     "postcss-easing-gradients": "^3.0.1",
     "postcss-for": "^2.1.1",
@@ -32,8 +30,8 @@
     "postcss-nested": "^4.1.2",
     "postcss-nested-ancestors": "^2.0.0",
     "postcss-nested-props": "^2.0.0",
+    "postcss-preset-env": "^6.6.0",
     "postcss-property-lookup": "^2.0.0",
-    "postcss-pseudo-class-any-link": "^6.0.0",
     "postcss-pseudo-class-enter": "^5.0.0",
     "postcss-scss": "^2.0.0",
     "postcss-short": "^5.0.0"