windicss/windicss

handleColor(theme('colors')) does not include user defined colors with opacity

dospunk opened this issue · 0 comments

Since the plugins page says that theme gets the user theme, I would expect it to include all colors defined in the windi config's theme.extend.colors but it doesn't seem to include colors that can take an opacity value.

Given the following config file, custom-color-primary doesn't work but custom-color-gray-500 does and custom-color-primary-dark does.

import { defineConfig } from 'vite-plugin-windicss'
import plugin from 'windicss/plugin'

export default defineConfig({
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: ({ opacityValue }) => {
          return `hsla(0, 100%, 50%, ${opacityValue ?? 1})`
        },
        'primary-dark': 'hsl(0, 100%, 25%)',
        'primary-light': 'hsl(0, 100%, 75%)',
      },
    },
  },
  plugins: [
    plugin(({ addDynamic, theme }) => {
      addDynamic(
        'custom-color',
        ({ Utility, Style }) => {
          const prop = Utility.handler.handleColor(theme('colors')).value
          if (!prop) return
          return Style.generate(Utility.class, {
            '--color': prop,
          })
        },
        { layer: 'components', completions: ['custom-color-{color}'] }
      )
    }),
  ],
})