Overriding postcssOptions plugins without function making postcss plugins works

[kitayoshi]

Hi there

Thanks for all the efforts that upgrade from v6 to v7 that compatible with react-script@5, which upgrade webpack setting.

I found the current 7.1.0 version still won't make postcss-loader postcssOptions.plugins work, and I check the document of postcss-loader and am not sure it allows a function that returns the postcss plugin list.

In my case, using the merged new plugins will work well.

Related code: https://github.com/dilanx/craco/blob/main/packages/craco/src/lib/features/webpack/style/postcss.ts#L86

Since I am not sure of the reason, I am not going to make a pull request but will be happy to do that.

---

My current @craco/[email protected] patch-package diff

diff --git a/node_modules/@craco/craco/dist/lib/features/webpack/style/postcss.js b/node_modules/@craco/craco/dist/lib/features/webpack/style/postcss.js
index 42789f9..6660e09 100644
--- a/node_modules/@craco/craco/dist/lib/features/webpack/style/postcss.js
+++ b/node_modules/@craco/craco/dist/lib/features/webpack/style/postcss.js
@@ -64,11 +64,11 @@ function extendsPostcss(match, _a) {
         }
         if (match.loader.options && !(0, lodash_1.isString)(match.loader.options)) {
             if (match.loader.options.postcssOptions) {
-                match.loader.options.postcssOptions.plugins = function () { return postcssPlugins_1; };
+                match.loader.options.postcssOptions.plugins = postcssPlugins_1;
             }
             else {
                 match.loader.options.postcssOptions = {
-                    plugins: function () { return postcssPlugins_1; },
+                    plugins: postcssPlugins_1,
                 };
             }
         }

---

My previous @craco/[email protected] patch-package diff, for anyone needed:

diff --git a/node_modules/@craco/craco/lib/features/webpack/style/postcss.js b/node_modules/@craco/craco/lib/features/webpack/style/postcss.js
index c66146a..31372ef 100644
--- a/node_modules/@craco/craco/lib/features/webpack/style/postcss.js
+++ b/node_modules/@craco/craco/lib/features/webpack/style/postcss.js
@@ -50,8 +50,12 @@ function extendsPostcss(match, { plugins, env }) {
         } else {
             let craPlugins = [];
 
-            if (match.loader.options) {
-                craPlugins = match.loader.options.plugins();
+            if (match.loader.options.postcssOptions) {
+                if (typeof match.loader.options.postcssOptions === "function") {
+                    craPlugins = match.loader.options.postcssOptions().plugins;
+                } else {
+                    craPlugins = match.loader.options.postcssOptions.plugins;
+                }
             }
 
             postcssPlugins = craPlugins || [];
@@ -63,13 +67,20 @@ function extendsPostcss(match, { plugins, env }) {
             log("Added PostCSS plugins.");
         }
 
-        if (match.loader.options) {
-            match.loader.options.plugins = () => postcssPlugins;
-        } else {
-            match.loader.options = {
-                plugins: () => postcssPlugins
-            };
+        let postcssOptions
+
+        if (match.loader.options.postcssOptions) {
+            if (typeof match.loader.options.postcssOptions === "function") {
+                postcssOptions = match.loader.options.postcssOptions();
+            } else {
+                postcssOptions = match.loader.options.postcssOptions
+            }
         }
+
+        match.loader.options.postcssOptions = () => ({
+            ...postcssOptions,
+            plugins: postcssPlugins
+        });
     }
 }