Add ability for ESBuild to watch a directory for CSS changes

[jhirn]

Hello. I needed this make ES Build recognize changes to my stylesheets which were in a different location. The approach is copied form esbuild-scss-plugin and works well for me locally.

I can make some changes if you desire to merge it. If not this serves as an example of how to do this.

Cheers!

[jhirn]

Usage:

 plugins: [
    svgrPlugin(svgrOptions),
    esbuildPostCssPlugin({
      cssPath:'./app/assets/stylesheets/',
      plugins: [
        postCssImportPlugin,
        postCssTailwindNestingPlugin,
        postCssTailwindPlugin('./tailwind.config.js'),
        postCssAutoPrefixer
      ]
    })
  ],

Happy to update the readme as well.

[hanayashiki]

I think you might just watch those are bundled!

[hanayashiki]

I just wonder why this plugin uses temp files. I wrote a custom one, which is quite easy, handling file watching with no extra efforts. Just use postcss as the loader:

import { Plugin } from 'esbuild'
import postcss, { AcceptedPlugin } from 'postcss'
import fs from 'fs/promises'

export const pluginPostcss = (plugins?: AcceptedPlugin[]): Plugin => {
  return {
    name: 'plugin-postcss',
    setup(build) {
      build.onLoad({ filter: /\.css$/ }, async ({ path }) => {
        const processor = postcss(plugins);
        const content = await fs.readFile(path);
        const result = await processor.process(content, { from: path });
        return {
          contents: result.toString(),
          loader: 'css',
        }
      });
    },
  }
};

[jhirn]

I just wonder why this plugin uses temp files. I wrote a custom one, which is quite easy, handling file watching with no extra efforts. Just use postcss as the loader:

import { Plugin } from 'esbuild'

import postcss, { AcceptedPlugin } from 'postcss'

import fs from 'fs/promises'



export const pluginPostcss = (plugins?: AcceptedPlugin[]): Plugin => {

  return {

    name: 'plugin-postcss',

    setup(build) {

      build.onLoad({ filter: /\.css$/ }, async ({ path }) => {

        const processor = postcss(plugins);

        const content = await fs.readFile(path);

        const result = await processor.process(content, { from: path });

        return {

          contents: result.toString(),

          loader: 'css',

        }

      });

    },

  }

};

This is real nice @hanayashiki i will try and if it meets my needs, would you be interested publishing this as a new esbuild plug in. Seems the maintainer doesn't need or has moved on. Understandable but the esbuild needs better plugins in its ecosystem.

[hanayashiki]

I just wonder why this plugin uses temp files. I wrote a custom one, which is quite easy, handling file watching with no extra efforts. Just use postcss as the loader:

import { Plugin } from 'esbuild'

import postcss, { AcceptedPlugin } from 'postcss'

import fs from 'fs/promises'



export const pluginPostcss = (plugins?: AcceptedPlugin[]): Plugin => {

  return {

    name: 'plugin-postcss',

    setup(build) {

      build.onLoad({ filter: /\.css$/ }, async ({ path }) => {

        const processor = postcss(plugins);

        const content = await fs.readFile(path);

        const result = await processor.process(content, { from: path });

        return {

          contents: result.toString(),

          loader: 'css',

        }

      });

    },

  }

};

This is real nice @hanayashiki i will try and if it meets my needs, would you be interested publishing this as a new esbuild plug in. Seems the maintainer doesn't need or has moved on. Understandable but the esbuild needs better plugins in its ecosystem.

https://github.com/karolis-sh/esbuild-postcss/blob/main/src/index.ts

Hi, this library is using the same way as I do. Hopefully it works for you