Grouping Variant CSS to remove prefixing Pseudo selectors for each class

[likhith-deriv]

I have the following set of CSS classes

focus-visible:outline-offset-2 focus-visible:outline-solid-blue-700 disabled:pointer-events-none 
flex items-center justify-center group h-1600 w-1600 rounded-200 hover:bg-opacity-black-100 
active:bg-opacity-black-200 data-[state=selected]:bg-solid-slate-1400 data-[state=selected]:hover:bg-solid-slate-1400

If you notice, there are some classes with the same pseudo selector like focus-visible:outline-offset-2 focus-visible:outline-solid-blue-700 and attribute selector like data-[state=selected]:bg-solid-slate-1400 data-[state=selected]:hover:bg-solid-slate-1400.

It will make the code more cleaner and readable if we could group the CSS classes based on variants like focus-visible:(outline-offset-2 outline-solid-blue-700).

I came across this blog which suggests two ways

• Using Windi CSS which provides the same ability as Tailwind and the variant grouping out of the box
• Configure tailwind to parse the CSS and Roll up to build the changes that browser can understand

I tried making the changes, but couldn't seem to make it work while verifying in storybook. Can you please help check what went wrong?

parser.utils.mjs

export const parseVariants = (code) => {
  const variantGroupsRegex = /([a-z\-0-9:\[\=\]]+:)\((.*?)\)/g
  const variantGroupMatches = [...code.matchAll(variantGroupsRegex)]

  variantGroupMatches.forEach(([matchStr, variants, classes]) => {
    const parsedClasses = classes
      .split(' ')
      .map((cls) => variants + cls)
      .join(' ')

    code = code.replace(matchStr, parsedClasses)
  })
  return code
}

export function twVariantGroups() {
  return {
    name: 'tw-variant-groups',
    transform(code) {
      const classNameRegex = /className\s*:\s*\"(.*?)\"/gm
      const classNameMatches = [...code.matchAll(classNameRegex)].filter(
        (match) => match?.length,
      )

      classNameMatches.forEach(([matchStr, className]) => {
        const parsedClasses = parseVariants(className) // Use `className` to generate the expanded classes
        code = code.replace(matchStr, `className: "${parsedClasses}"`)
      })
      return code
    },
  }
}

tailwind.config.js

import { parseVariants } from './parser.utils.mjs'
import quillTailwindConfig from './quill-tailwind/tailwind.config'

/** @type {import('tailwindcss').Config} */
export default {
  content: {
    files: ['./src/**/*.{js,jsx,ts,tsx}'],
    transform: parseVariants,
  },
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
  presets: [quillTailwindConfig],
}

rollup.config.js

plugins: [
      findUnused(),
      peerDepsExternal(),
      resolve(),
      commonjs(),
      twVariantGroups(),
      typescript({
        tsconfig: './tsconfig.production.json',
      })

[mohsen-deriv]

I will try to follow your step and see how it goes man, will catch up with you soon.
thanks, this is amazing 🎉