Watching HTML files for changes

[tillkruss]

Hi! I'm using the default Postcss watch command to compile and purge even in development to avoid missing selectors in production.

Is there any way to not only watch .css files for changes, but also re-compile when any .html files change?

{
  "scripts": {
    "watch:html": "npx @11ty/eleventy --watch",
    "watch:css": "npx postcss resources/css/app.css -o public/assets/app.css --watch --verbose"
  }
}

[paulpopus]

purge even in development to avoid missing selectors in production

This can be a problem, as traditionally purge will not rescan your files. So it's recommended that development is done with it off and then enabling it only for production/deployment.

You can add your templates to the tailwind purger if you're using that instead of an external tool.

Perhaps I misunderstand your issue, it would be helpful to know what you're currently doing and what you're trying to achieve and what tools you're using.

[tillkruss]

My compiled templates are added to the purge settings.

1. Why isn't postcss running every time these files are changed?

2. Why should I not use purge in development?

module.exports = {
  purge: {
    enabled: true,
    content: ['./public/**/*.html'],
  }
}

[paulpopus]

Why isn't postcss running every time these files are changed?

I don't know the reason exactly but based on my experience it would have to do something with internal caching of the files.

Why should I not use purge in development?

You can, but it will be annoying if you're adding lots of new classes and you have to restart your compiler every time.

To give an example, if you've never used bg-red before and you start your compiler, then you add it to your templates, the class will still be purged. By not using it in development it allows you to quickly add whatever classes you need and then you can worry about purging them for production and for most cases this workflow works just fine.