This is a very simple PostCSS plugin which lets you pass custom PostCSS listeners (for example Once() or Root()) via the plugin's options.

In Nuxt there's no way to implement custom PostCSS plugins within your Nuxt project; Nuxt expects all plugins to be in your modulesDir (usually node_modules). This means that your plugin has to be published to npm in order to use it in Nuxt.

This plugin lets you implement custom PostCSS plugins in Nuxt by passing listener functions via this plugin's options.

Install the plugin:

npm install postcss-nuxt-custom-listeners

Add to your nuxt.config.ts:

export default defineNuxtConfig({
  postcss: {
    plugins: {
      'postcss-nuxt-custom-listeners': {
        listeners: {
          // Your listeners here
        }
      }
    }
  }
})

The listeners option expects an object containing your listener functions. For example:

import type { Root } from 'postcss';

...

listeners: {
  Once(root: Root) {
    console.log(root)
  }
}

To keep things neat you can define your listener functions elsewhere and import them, for example:

// myPostCSSPlugin.ts
import type { Root } from 'postcss';

export const myPostCSSPlugin = {
  Once(root: Root) {
    console.log(root)
  }
}

// nuxt.config.ts
import { myPostCSSPlugin } from 'myPostCSSPlugin';

export default defineNuxtConfig({
  postcss: {
    plugins: {
      'postcss-nuxt-custom-listeners': {
        listeners: myPostCSSPlugin
      }
    }
  }
})