`style.postcss.plugins` part of `craco.config.js` isn't merged to resulting webpack config
vlad-elagin opened this issue · comments
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"
},
}
me too
Me too, finally found out that you can configure plugins in postcss.loaderOptions.postcssOptions.plugins
