Is it possible to dynamically modify tailwind plugins for vanilla css vs css modules?

[william-will-angi]

I have a tailwind plugin working in vanilla css. It is a variant theme-1 that prepends the class name .theme-1 to the class names it prepends.

So theme-1:w-full is translated to the stylesheet definition:

.theme-1 .w-full {
  width: 100%;
}

However, I want to make sure that the string theme-1 stays constant across both vanilla css & css modules. For css modules, this means the class name must be wrapped in :global().

What I have right now:

module.exports = {
  plugins: [
    plugin(function ({ addVariant, postcss, e }) {
      addVariant('theme-1', ({ container, separator, modifySelectors }) => {
        modifySelectors(({ className }) => {
          return `.theme-1 .${e(`theme-1${separator}${className}`)}`;
        });
      });
    }),
  ],
};

I'm looking to do something like the following:

module.exports = {
  plugins: [
    plugin(function ({ addVariant, postcss, e }) {
      addVariant('theme-1', ({ container, separator, modifySelectors }) => {
        modifySelectors(({ className }) => {
          const prefix = container.source.input.file.endsWith('module.css') ? ':global(.theme-1)' : 'theme-1'
          return `${prefix} .${e(`theme-1${separator}${className}`)}`;
        });
      });
    }),
  ],
};

Unfortunately container.source.input.file does not exist in this context

[wongjn]

You could try testing for the file name in the PostCSS configuration, by exporting a function in postcss.config.js:

const plugin = require('tailwindcss/plugin');

// `file` is an example member here – it might be different depending on
// the build system that runs PostCSS for you.
module.exports = ({ file }) => ({
  plugins: {
    'tailwindcss': {
      preset: [require('./tailwind.config')],
      plugins: [
        plugin(function ({ addVariant, postcss, e }) {
          addVariant('theme-1', ({ container, separator, modifySelectors }) => {
            modifySelectors(({ className }) => {
              const prefix = file.endsWith('module.css') ? ':global(.theme-1)' : 'theme-1';
              return `${prefix} .${e(`theme-1${separator}${className}`)}`;
            });
          });
        }),
      ],
    },
  },
});

We