How can I tell Parcel to ignore the postcss config in watch mode?

[puka-tchou]

Due to the nature of my project, I only feed the .scss files to Parcel so they are compiled to the directory containing our .php files. In my configuration, I'm using PostCSS with the excellent @fullhuman/postcss-purgecss to remove any unused selectors and rules.

When in development, I will often change the classes used in the PHP files to apply different styles and effects but, because Parcel is not watching the PHP files, the sass compilation pipeline won't trigger and because Parcel keeps using the PostCSS configuration event in watch mode, adding a new class to an element has no effect, because the rule was unused and thus removed from the compiled CSS files.

I'm using this command to watch the files:

parcel watch 'resources/themes/*/{scripts,scss}/**/*.{scss,js}' 'resources/blocks/**/*.{scss,js}' --dist-dir public/application/

Is there a way to tell Parcel not to use PostCSS in watch mode?

[DeMoorJasper]

You can use a postcss.config.js config file and use process.env.NODE_ENV I think although this is pretty terrible for caching

[puka-tchou]

Thanks, I just saw your comment. I think I'll use that solution. Would there be another option to keep the caching performances?

For reference, here is the final config I ended up using:

const plugins = { autoprefixer: {} };

if (process.env.NODE_ENV === "production") {
    plugins = {
        autoprefixer: {},
        "@fullhuman/postcss-purgecss": {
            content: ["public/**/*.php"],
        },
    };
}

module.exports = {
    modules: false,
    plugins,
};

[DeMoorJasper]

Not really at the moment, we should probably get some standardised version for this in postcss.

Not yet sure what kind of standard we should push for though, maybe something like this?

{
  "development": {
    "plugins": "@fullhuman/postcss-purgecss"
  },
  "modules": false,
  "plugins": ["autoprefixer"]
}

[puka-tchou]

I think that would be a really simple and understandable way to separate multiple configurations. What could be even better would be to allow any string to be used as a key, thus supporting any use case, but maybe I'm asking too much here!

[eldk]

Hello,

Is there a way now to disable postcss plugins (here postcss-uncss) in watch mode/dev using .postcssrc file or .postcssrc.json ?

Thanks,

Eric

PS : the warning from parceljs 2.12 when using postcss.config.js :

@parcel/transformer-postcss: WARNING: Using a JavaScript PostCSS config file means losing out on caching features of Parcel. Use a .postcssrc(.json) file whenever possible.

PS2 : the warning given when using postcss.config.js with and empty plugins list in watch/dev mode :

@parcel/transformer-postcss: PostCSS config must have plugins

const inDev = process.env.NODE_ENV !== "production"

let config

if (inDev) {
  config = {
    plugins : {}
  }
} else {
...
// uncss plugin stuff
...
}
module.exports = config

[eldk]

Maybe something like this will be usefull in package.json :

 "postcss": {
    "profiles": {
      "development": {
        "disable": true
      },
      "production": {
        "disable": false
      }
    }
  }