`style.postcss.plugins` part of `craco.config.js` isn't merged to resulting webpack config

[vlad-elagin]

What's happening I tried to migrate project to CRA5 and Craco 7 and encountered strange behavior, listed in title. Setting style.postcss.plugins, both via array and function, doesn't affect resulting webpack config. Apparetnly it also happens with env field.

What should happen Resulting webpack config should be modified and include any custom configuration that is provided in craco.config.js.

To reproduce Set up a project with CRA, add CRACO. Then include some postcss plugins and list them in style.postcss.config as listed in CRACO's docs. Now when you start project you should notice that postcss plugins didn't work.

You can also go to node_modules/@craco/craco/dist/lib/features/webpack/override.js and log resultingWebpackConfig to the console to check that postcss config wasn't affected.

CRACO version 7.1.0

CRACO config

const {
  addMomentTimezoneDataPlugin,
  whenWithBundleAnalyzer,
  addBundleAnalyzerPlugin,
  configureHtmlWebpackPlugin,
  addNodeBuiltInsFallbacks,
  addProvidePlugin,
} = require('./configOverrides/utils');

module.exports = {
  webpack: {
    plugins: {
      add: [
        addMomentTimezoneDataPlugin(),
        ...whenWithBundleAnalyzer(addBundleAnalyzerPlugin, []),
        addProvidePlugin(),
      ],
    },

    configure: (webpackConfig, { env, paths }) => {
      configureHtmlWebpackPlugin(webpackConfig);
      addNodeBuiltInsFallbacks(webpackConfig);

      return webpackConfig;
    },
  },

  style: {
    css: {
      loaderOptions: {
        url: {
          filter: url => !url.startsWith('/'),
        },

        modules: {
          exportLocalsConvention: 'camelCase',
        },

        importLoaders: 2,
      },
    },

    postcss: {
      plugins: [
        require('postcss-modules-values-replace')({
          noEmitExports: true,
        }),
        require('postcss-mixins'),
        require('postcss-for'),
        require('postcss-calc'),
        require('postcss-nested')({ bubble: ['container'] }),
      ],
      env: {
        stage: 0,
      },

      // POSSIBLE WORKAROUND
      // loaderOptions: (postCssConfig, { env, paths }) => {
      //   const { plugins } = postCssConfig.postcssOptions;
      //   const existingPlugins = typeof plugins === 'function' ? plugins() : plugins;
      //   postCssConfig.postcssOptions.plugins = existingPlugins.concat(CUSTOM_POSTCSS_PLUGINS);
      //   return postCssConfig;
      // },
    },
  },

  eslint: {
    mode: 'file',
  },
};

package.json

{
  "dependencies": {
    "@microsoft/signalr": "^6.0.5",
    "acorn": "^6.0.5",
    "add": "^2.0.6",
    "antd": "^4.2.5",
    "autoprefixer": "^9.8.6",
    "axios": "^0.18.0",
    "classnames": "^2.2.6",
    "connected-react-router": "^6.9.3",
    "detectrtc": "^1.4.0",
    "eslint-plugin-import": "^2.27.5",
    "flow-bin": "^0.101.0",
    "fslightbox-react": "^1.4.7",
    "http-proxy-middleware": "^0.18.0",
    "husky": "^1.3.1",
    "intersection-observer": "^0.12.0",
    "js-cookie": "^2.2.0",
    "jsbarcode": "^3.11.0",
    "lodash": "^4.17.4",
    "loglevel": "^1.8.0",
    "loglevel-plugin-remote": "^0.6.8",
    "moment": "^2.22.0",
    "moment-timezone": "^0.5.23",
    "moment-timezone-data-webpack-plugin": "^1.5.0",
    "normalize.css": "3.0.2",
    "normalizr": "^3.3.0",
    "prettier": "^1.14.2",
    "promise": "8.0.1",
    "query-string": "^7.0.1",
    "re-reselect": "^2.2.0",
    "react": "^18.2.0",
    "react-async-script": "0.11.0",
    "react-autosuggest": "^9.4.2",
    "react-custom-scrollbars": "^4.2.1",
    "react-day-picker": "7.1.2",
    "react-device-detect": "^2.2.3",
    "react-dom": "^18.2.0",
    "react-draggable": "^2.2.6",
    "react-easy-print": "^0.6.0",
    "react-error-overlay": "^2.0.2",
    "react-geocode": "^0.1.2",
    "react-gtm-module": "^2.0.11",
    "react-helmet": "^5.2.0",
    "react-highlight-words": "^0.14.0",
    "react-idle-timer": "1.5.2",
    "react-input-mask": "^1.1.0",
    "react-intersection-observer": "8.31.0",
    "react-modal": "^3.14.3",
    "react-moment-proptypes": "^1.6.0",
    "react-onclickoutside": "^6.7.0",
    "react-rating": "^1.4.1",
    "react-recaptcha-v3": "^1.0.2",
    "react-redux": "^7.1.0",
    "react-router-dom": "^5.3.4",
    "react-router-hash-link": "^2.4.3",
    "react-router-redux": "^4.0.8",
    "react-scripts": "5.0.1",
    "react-select": "^1.1.0",
    "react-simple-keyboard": "^2.2.78",
    "react-slick": "^0.29.0",
    "react-textarea-autosize": "^6.1.0",
    "recompose": "^0.30.0",
    "redux": "^4.0.1",
    "redux-form": "^8.1.0",
    "redux-logger": "^3.0.1",
    "redux-persist": "^4.8.3",
    "redux-persist-crosstab": "^3.6.0",
    "redux-saga": "^0.16.2",
    "reselect": "^3.0.1",
    "shallow-equal": "^1.0.0",
    "simple-keyboard-layouts": "^1.12.79",
    "simple-peer": "^9.6.2",
    "slick-carousel": "^1.6.0",
    "smart-plurals": "^1.1.0",
    "ua-parser-js": "^0.7.19",
    "whatwg-fetch": "^2.0.4",
    "why-did-you-update": "^0.1.1"
  },
  "devDependencies": {
    "@craco/craco": "^7.1.0",
    "babel-plugin-import": "^1.12.2",
    "buffer": "^6.0.3",
    "chalk": "^3.0.0",
    "circular-dependency-plugin": "^5.2.2",
    "cross-env": "^7.0.3",
    "eslint-config-prettier": "^8.8.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-compat": "^4.1.4",
    "eslint-plugin-flowtype": "^8.0.3",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.11.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "jest-junit-reporter": "^1.1.0",
    "lint-staged": "^9.2.0",
    "msw": "^0.38.2",
    "postcss-calc": "^8.2.4",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-for": "^2.1.1",
    "postcss-loader": "^7.2.4",
    "postcss-mixins": "^9.0.4",
    "postcss-modules-values-replace": "^4.1.0",
    "postcss-nested": "^6.0.1",
    "postcss-normalize": "^10.0.1",
    "postcss-preset-env": "^8.3.2",
    "postcss-selector-parser": "^6.0.11",
    "process": "^0.11.10",
    "querystring-es3": "^0.2.1",
    "simple-git": "^1.126.0",
    "stylelint": "^15.4.0",
    "stylelint-config-css-modules": "^4.2.0",
    "stylelint-config-idiomatic-order": "^9.0.0",
    "stylelint-config-standard": "^32.0.0",
    "uibook": "^0.5.4",
    "webpack-bundle-analyzer": "^4.8.0"
  },
}

[kaneruan]

me too

[hsbtr]

Me too, finally found out that you can configure plugins in postcss.loaderOptions.postcssOptions.plugins

[stevenewald]

513 should fix - will write tests to make sure then merge the PR