[Proposal] - Load postcss.config.js configs from project root by default

[pavinthan]

Hi!

First thanks for your grate works, can you please merge root postcss.config.js config with provided options if not specified any config files in options and postcss.config.js available in project root directory.

I try to add additional PostCSS plugin into my create-react-app project but It won't allow to add any additional plugins. also I tried to add that in CRA https://github.com/facebook/create-react-app/pull/5893#issuecomment-442228623 but that did not works.

I have created a Proposal in postcss-loader see https://github.com/postcss/postcss-loader/issues/403

if this wrong may you please check any additional way to resolve this kind of issues, thanks.

Thanks

[michael-ciniawsky]

CRA doesn't support postcss.config.js since it already defines options/defaults in webpack.config.js, thereforepostcss-load-config never searches for any config file. CRA would need to add a postcss.config.js/postcssrc.js file to the project root instead of setting things up in webpack.config.js.

postcssrc.js

module.exports = (file, options, env) => ({
   plugins: [
     // Add your own plugins here
    'postcss-flexbugs-fixes': {}
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    }
  ]
})

💁‍♂️ I recommend checking out parcel for your use case. It works well by default for must react apps while it's easy to configurate things like babel, postcss by adding a config file (e.g babelrc.js, postcssrc.js) in case one needs it.

[pavinthan]

Thanks @michael-ciniawsky for your reply and I'll consider your suggestion too, could you please search postcss.config.js if there are no any files defined in options then merge the root file config with options?

I know that is crazy way but that may help to fix that 😟

[michael-ciniawsky]

No sry, merging is deliberately not supported, because it comes with other potential annoyances (e.g plugin ordering, useless file searching in case one doesn't (want to) use a config file (currently indicated by setting options in the webpack.config.js instead)). It's either or for simplicity reasons and addresses the 2 common ways to setup postcss-loader. CRA is an opinionated wrapper around webpack and choosed this setup for it's users. Either try to use CRA's eject feature (no idea how it particularly works) or do yourself a favor and consider other options which suit your needs (own webpack.confg.js, parcel, ...) in a better way.

[pavinthan]

Thanks @michael-ciniawsky, 🙇 for your kind of responses.

[pavinthan]

Hi @michael-ciniawsky if we add config path like this, it will this works, right ?

{
    loader: require.resolve('postcss-loader'),
    options: {
        ident: 'postcss',
        config: {
            path: path.resolve(fs.realpathSync(process.cwd()), '.')
        },
        plugins: () => [
        require('postcss-flexbugs-fixes'),
        require('postcss-preset-env')({
            autoprefixer: {
            flexbox: 'no-2009',
            },
            stage: 3,
        }),
        ],
        sourceMap: true,
    },
}

[michael-ciniawsky]

No, since plugins are still specified which would require merging, for this reason currently no config searching happens if loader.options.plugins is specified. One of the following setups should work (recommending the second one, which is also the default behavior)

1. Use the current working directory e.g { path: process.cwd() } or any other absolute path to start searching for a config file (generally used if only one config is needed, which is located at dirname('absolute path')). No Config Cascading

webpack.config.js

{
    loader: require.resolve('postcss-loader'),
    options: {
        ident: 'postcss',
        config: {
            // Why is path.resolve && fs.realpathSync needed here ? 
            // `process.cwd()` should be sufficient since it already provides an absolute path
            path: path.resolve(fs.realpathSync(process.cwd()), '.')
        },
        sourceMap: true
    }
}

2. Uses the directory of the currently processed file dirname(file) (this.resourcePath) to start searching for a config file upwards the file tree and therefore enables Config Cascading (default)

webpack.config.js

{
    loader: require.resolve('postcss-loader'),
    options: {
        ident: 'postcss',  
        sourceMap: true
    }
}

[pavinthan]

thanks @michael-ciniawsky for your grateful explanation

[tysepa]

Good explanation @michael-ciniawsky