Added PostCSS preset env basic extends

Ouchuxuan · Nov 17, 2018 · 2835f39 · 2835f39
1 parent 1635461
commit 2835f39
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 13 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,4 +8,5 @@ packages/debug
 .DS_Store
 
 npm-debug.log*
+lerna-debug.log*
 *.tgz
diff --git a/package.json b/package.json
@@ -2,6 +2,7 @@
     "private": true,
     "scripts": {
         "publish": "lerna publish --progress",
+        "publish:alpha": "lerna publish --npm-tag alpha --progress",
         "bootstrap": "lerna bootstrap",
         "test": "jest"
     },

diff --git a/packages/craco/README.md b/packages/craco/README.md
@@ -172,6 +172,11 @@ module.exports = {
         postcss: {
             mode: "extends" /* (default value) */ || "file",
             plugins: [],
+            env: {
+                autoprefixer: { /* Any autoprefixer options: https://github.com/postcss/autoprefixer#options */ },
+                stage: 3, /* Any valid stages: https://cssdb.org/#staging-process. */
+                features: { /* Any CSS features: https://preset-env.cssdb.org/features. */ }
+            },
             loaderOptions: { /* Any postcss-loader configuration options: https://github.com/postcss/postcss-loader. */ },
             loaderOptions: (postcssLoaderOptions, { env, paths }) => { return postcssLoaderOptions; }
         }

diff --git a/packages/craco/lib/features/style/postcss.js b/packages/craco/lib/features/style/postcss.js
@@ -7,6 +7,21 @@ const POSTCSS_MODES = {
     file: "file"
 };
 
+const CRA_PLUGINS = presetEnv => {
+    // prettier-ignore
+    return [
+        require("postcss-flexbugs-fixes"),
+        require("postcss-preset-env")(presetEnv)
+    ];
+};
+
+const CRA_PRESET_ENV = {
+    autoprefixer: {
+        flexbox: "no-2009"
+    },
+    stage: 3
+};
+
 function usePostcssConfigFile(match) {
     if (match.loader.options) {
         const ident = match.loader.options.ident;
@@ -21,26 +36,38 @@ function usePostcssConfigFile(match) {
     }
 }
 
-function extendsPostcss(match, { plugins }) {
-    if (plugins) {
-        addPlugins(match, plugins);
-    }
-}
+function extendsPostcss(match, { plugins, env }) {
+    if (isArray(plugins) || env) {
+        let postcssPlugins;
 
-function addPlugins(match, postcssPlugins) {
-    if (isArray(postcssPlugins)) {
-        if (match.loader.options) {
-            const craPlugins = match.loader.options.plugins();
-            const mergedPlugins = postcssPlugins.concat(craPlugins || []);
+        if (env) {
+            const mergedPreset = deepMergeWithArray(CRA_PRESET_ENV, env);
+            postcssPlugins = CRA_PLUGINS(mergedPreset);
 
-            match.loader.options.plugins = () => mergedPlugins;
+            log("Merged PostCSS env preset.");
+        } else {
+            let craPlugins = [];
+
+            if (match.loader.options) {
+                craPlugins = match.loader.options.plugins();
+            }
+
+            postcssPlugins = craPlugins || [];
+        }
+
+        if (plugins) {
+            postcssPlugins = postcssPlugins.concat(plugins);
+
+            log("Added PostCSS plugins.");
+        }
+
+        if (match.loader.options) {
+            match.loader.options.plugins = () => postcssPlugins;
         } else {
             match.loader.options = {
                 plugins: () => postcssPlugins
             };
         }
-
-        log("Added PostCSS plugins.");
     }
 }