Provide documentation link for the warning ` Using a JavaScript PostCSS config file means losing out on caching features of Parcel. Use a .postcssrc(.json) file whenever possible.`

[RichardJECooke]

🙋 feature request

I'm using Tailwind and Parcel 2 and every time I build I get this warning: Using a JavaScript PostCSS config file means losing out on caching features of Parcel. Use a .postcssrc(.json) file whenever possible.

However, when I delete the config file Tailwind no longer works.

Please will you add more detail to this warning, or a link to some Parcel documentation explaining what we have to do here to make it work.

Even a comprehensive answer in this issue would probably help people like me who are googling this warning and finding nothing :(

[mischnic]

Instead of something postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

you should add a .postcssrc with:

{
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

[mischnic]

Does Use a .postcssrc(.json) file instead whenever possible. make it clearer?

We should also print the file that triggered the warning

[RichardJECooke]

I found this format confusing .postcssrc(.json). I thought maybe it was postcss.config.postcssrc or postcss.postcssrc.json.

I also tried using my current file contents and that didn't work:

module.exports = 
{
    plugins: 
    {
        tailwindcss: {},
        autoprefixer: {}
    }
}

So I'd say the warning should be:

WARNING: Using a JavaScript PostCSS config file means losing out on caching features of Parcel. 
Rather delete your "postcss.config.js" file and add a ".postcssrc" file.
For example, the file ".postcssrc" with content:
{
  plugins: 
  {
    tailwindcss: {},
    autoprefixer: {}
  }
}

[mischnic]

Translating postcss.config.js into a JSON config doesn't really work in the general case. But that warning could indeed be rephrased.

[alex-ketch]

Translating postcss.config.js into a JSON config doesn't really work in the general case. But that warning could indeed be rephrased.

To add to this, one use case where translating a JS config to JSON doesn't work very well was in our usage of cssnano plugin. We had a check in place to only run the plugin in production in order to optimize development experience. According to Parcel the time to compile with the plugin is ~30 seconds, and only 320ms without.

A tangential question then is, is it possible to tell Parcel to use a different configuration per build target?

Edit: I realize Parcel uses cssnano but my use case stemmed from migrating from raw PostCSS CLI config to Parcel, and the cssnano version on NPMs' next tag is currently outdated which caused PostCSS to throw errors. To bypass this I'm using the --no-optimize flag for Parcel and adding cssnano to the config myself. The next release of Parcel@next has updated cssnano already I think, so that will solve my specific problem, but not the general one of having branching logic in the PostCSS config.

[mischnic]

Babel's env property in config files is great for this:

{
    "presets": ["@babel/preset-env"],
    "env": {
        "development": {
            "plugins": ["babel-plugin-run-only-in-dev"]
        }
    }
}

Unfortunately PostCSS doesn't have something like this (yet)

[Ashrayaa]

{ plugins: { tailwindcss: {}, autoprefixer: {}, } }

• trying this is not working for me

[p3g-18]

yes, @Ashrayaa i tried the same but it's not working for me either!! Did you find any solution?