Open sizeak opened 2 years ago
@simoncent thanks a lot for opening this issue!
I'm keen on reviewing this as long as it works with the latest CRA. Have you tested with that?
this feature would be great.
Hi,
We're currently using a modified version of this because we don;t want to replace the existing config, we only want to append a new plugin without duplicating the existing CRA postcss config ourselves. Is there any appetite for adding support for this functionality to this plugin itself? I'd be happy to consider putting a PR together if you're interested in adding support.
We're currently using it like this, in case it's useful:
// This function is borrowed & modified from the 'react-app-rewire-postcss' plugin const rewirePostCss = (config, additionalPlugins) => { const filterPostCSSLoader = (array) => array.filter((object) => JSON.stringify(object).includes('postcss-loader')) // find any first matching rule that contains postcss-loader filterPostCSSLoader(config.module.rules).forEach((rule) => { filterPostCSSLoader(rule.oneOf).forEach((oneOf) => { filterPostCSSLoader(oneOf.use || oneOf.loader).forEach((use) => { // use the latest version of postcss-loader use.loader = require.resolve('postcss-loader') use.options.plugins = [...use.options.plugins(), ...additionalPlugins] }) }) }) return config }
Thanks!
Hi @simoncent, will the PR support PostCSS 8? If so, I would love to see your PR :)
Thank you so much!
Best wishes, Hai
I finally made it works for PostCSS 8 by editing the above code
// This function is borrowed & modified from the 'react-app-rewire-postcss' plugin
const rewirePostCss = (config, additionalPlugins) => {
const filterPostCSSLoader = (array) => array.filter((object) => JSON.stringify(object).includes('postcss-loader'));
// find any first matching rule that contains postcss-loader
filterPostCSSLoader(config.module.rules).forEach((rule) => {
filterPostCSSLoader(rule.oneOf).forEach((oneOf) => {
filterPostCSSLoader(oneOf.use || oneOf.loader).forEach((use) => {
// use the latest version of postcss-loader
use.loader = require.resolve('postcss-loader');
// change use.options.plugins to use.options.postcssOptions.plugins -> for supporting PostCSS 8
use.options.postcssOptions.plugins = [...use.options.postcssOptions.plugins, ...additionalPlugins];
});
});
});
// return the mutated configuration
return config;
};
Note: the postcss-import
(if used) will cause some SCSS importing problems with new postcss-loader
version. Therefore, it is better to remove it from the additionalPlugins
.
Best wishes, Hai
Hi,
We're currently using a modified version of this because we don;t want to replace the existing config, we only want to append a new plugin without duplicating the existing CRA postcss config ourselves. Is there any appetite for adding support for this functionality to this plugin itself? I'd be happy to consider putting a PR together if you're interested in adding support.
We're currently using it like this, in case it's useful:
Thanks!