mui / pigment-css

Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
MIT License
820 stars 39 forks source link

CSSObject<Props> Requires css-defined keys #283

Open FourwingsY opened 1 month ago

FourwingsY commented 1 month ago

Steps to reproduce

add this kinds of things throws type error.

  variants: [
    {
      props: { focused: true },
      style: {
        '--label-color': theme.colors.primary70,
        '--border-color': theme.colors.primary70,
      },
    },
  ]

Current behavior

'--label-color': string is inferred as CSSOthersObject which is { [selector: string]: CSSObject<Props>; }

Warning saids, theme.colors.primary70 is not an CSSObject<Props>

While, if I put some valid css keys with it,

  variants: [
    {
      props: { focused: true },
      style: {
        textIndent: 0,  // <<<
        '--label-color': theme.colors.primary70,
        '--border-color': theme.colors.primary70,
      },
    },
  ]

Type error disappears.

Expected behavior

'--label-color': string should be accepted as a valid key and value without other css properties.

Context

No response

Your environment

in VSCode

Search keywords: css, style, CSSObject, key