Works only when importing CSS from JS

[jsierles]

This plugin is working if I import css from a JS file. However, I'd like to use a CSS file as an entrypoint to allow watch mode to work when making CSS changes. Is this possible using the esbuild plugin system?

[martonlederer]

Okay, so it is possible to use css entries: https://esbuild.github.io/content-types/#css

Have you tried it?

[jsierles]

Yes, I tried but the postcss plugin is not invoked. I didn't look yet, but I'd guess that plugins may not apply yet to CSS.

[g45t345rt]

You should implement watch files on your own with chokidar https://www.npmjs.com/package/chokidar and use incremental API https://esbuild.github.io/api/#incremental to rebuild on file change.

For example: https://github.com/g45t345rt/esbuild-firebase-ssr-react-ts/blob/master/bundle.js#L82

[jsierles]

I think I confused two issues here. The main issue is that, even without watch mode, this plugin does not seem to apply to CSS entry points. Here's an example error that happens when importing tailwind in a CSS file used as an entry point: Build options:

let buildOptions = {
  entryPoints: ["app/packs/entrypoints/application.css"],
  outdir: './public/packs',
  logLevel: 'info',
  plugins: [
    postCssPlugin.default({
      plugins: [tailwind, autoprefixer]
    }),
  ]
}

The following error pops up:

 > app/packs/entrypoints/application.css:1:0: warning: "@tailwind" is not a known rule name
    1 │ @tailwind base;
      ╵ ~~~~~~~~~

But it works fine if imported directly from Javascript.

I can provide a smaller test case if that helps. I didn't find anything in esbuild docs to suggest that CSS entry points would not pass through plugins.

[g45t345rt]

Yep we are mixing two issues here.

The first one is that esbuild does not watch files other than js,jsx,ts,tsx so that's why you have to make your own watcher.

And for your issue, the plugin wont work if you use CSS file as an entry point. It's because the plugin is only parsing CSS files that are being resolved from esbuild and not actually compiled.

So this https://github.com/martonlederer/esbuild-plugin-postcss2/blob/577e566f36dd0fe389aa6a9a9e34297023e2bfe3/src/index.ts#L58 never gets hit.

We have to use onLoad https://esbuild.github.io/plugins/#load-callbacks to make it work with css entrypoint.

[jsierles]

OK - would it be interesting to do that?

After some testing, tt looks like esbuild does watch css files that are used as entrypoints, but not the files they import. Also, the postcss2 plugin does get invoked for files imported from an entrypoint, but not for the entrypoint itself. So by moving everything to an imported file, everything works except for the watcher.

Given this, I agree the right move would be to use a custom watcher until esbuild is able to watch CSS imports.

[g45t345rt]

Okay, I was able to make it work with a small fix inside of onResolve instead of using onLoad like I initially thought. https://github.com/g45t345rt/esbuild-plugin-postcss2/blob/9b4b14aa5b81125496031c0a0a03c078df817f82/src/index.ts#L61

My fork as the changes https://github.com/g45t345rt/esbuild-plugin-postcss2

The pull request https://github.com/martonlederer/esbuild-plugin-postcss2/pull/5

[Zertz]

I'm not sure if this is related but I believe the 0.10.0 release of esbuild with "Allow plugins to return custom file watcher paths" should avoid the need for chokidar?

[g45t345rt]

@Zertz neat thanks for letting us know

[g45t345rt]

@Zertz Thanks again for the info I was able to use watchFiles: [] inside onResolve https://esbuild.github.io/plugins/#resolve-results and it worked like magic.

I've created a new pull request with the changes that I've made here https://github.com/martonlederer/esbuild-plugin-postcss2/pull/6

If you guys want to try it now before @martonlederer accept the pull and makes the npm publish, you can always install directly from my github branch using npm install https://github.com/g45t345rt/esbuild-plugin-postcss2

[martonlederer]

Closed #6