Private plugin with ES Module: any example?

[pierreberchtold]

Hi! I'm trying to create a postCSS plugin for my project with a simple vitejs/postCSS/tailwindcss setup.
I need to add a custom plugin to change the css specificity. I called it tailwind-important-last.

I have checked the example in the documentation and rewrote the example to work with ES Modules. I saved the code as postcss/tailwind-important-last.js as described in the documentation.

When I add 'tailwind-important-last' to the plugins inside postcss.config.js I get following error:
[vite:css] Failed to load PostCSS config (searchPath: *****): [Error] Loading PostCSS Plugin failed: Cannot find module 'tailwind-important-last'

My postcss.config.js file looks as following:

export default {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
   'tailwind-important-last': {}
  },
}

I've tried google, github and chatgpt and was not able to find any example for a custom plugin with that setup.

Has any one some experience with that?

[ai]

You need to define relative path (with file extension) if you use custom plugin:

export default {
  plugins: {
    'postcss-import': {},
    'tailwindcss/nesting': {},
    tailwindcss: {},
    autoprefixer: {},
   './postcss/tailwind-important-last.js': {}
  },
}

I am not sure, that Vite supports loading ESM plugins right now (since Vite is using CommonJS). Maybe you will need to define plugin in CommonJS and save as ./postcss/tailwind-important-last.cjs (and use .cjs in postcss.config.js.

[pierreberchtold]

Hi @ai! Thank you so much for your precise answer. It's working perfectly.
Indeed I had to write the plugin as CommonJS and use .cjs.