Update Types to allow an array of CSSRuleObjects

[moshie]

When generating tailwind css to js using prejss it combines sections in an array which tailwind's types are not happy with.

"@supports (color: oklch(0% 0 0))": [
      {
        ".btn": {
          "backgroundColor": "var(--btn-color, var(--zui-primary-button))",
          "borderColor": "var(--btn-color, var(--zui-primary-button))"
        }
      },
      {
        ".btn-primary": {
          "-BtnColor": "var(--primary-button)"
        }
      }
    ],

I propose we update the type to allow for CSSRuleObjects[]

related to: #14054

[moshie]

Thoughts?

[RobinMalfait]

Hey!

While this works, I would recommend to use 2 sibling rules instead of the array syntax. We allow the array syntax at "runtime" for backwards compatibility reasons, but the proper way to do this is to use normal objects:

addComponents({
  '@supports (color: oklch(0% 0 0))': {
    '.btn': {
      backgroundColor: 'var(--btn-color, var(--zui-primary-button))',
      borderColor: 'var(--btn-color, var(--zui-primary-button))',
    },
    '.btn-primary': {
      '--btn-color': 'var(--primary-button)',
    },
  },
})

Example: https://play.tailwindcss.com/SYZAmHUI8p?file=config

Going to close this for now because there are better solutions, but I appreciate the PR!

Thanks!