Support appending to current options object instead of always replacing.

[sizeak]

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!

[Antonio-Laguna]

@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?

[AndrejGajdos]

this feature would be great.

[honghainguyen777]

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

[honghainguyen777]

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