@graphprotocol/gds-css 0.0.1

package/src/component-registry.ts

@@ -0,0 +1,213 @@
+import { objectEntries } from 'ts-extras'
+
+import { camelToKebab, type DeepRecord } from '@graphprotocol/gds-utils'
+
+import type {
+  CSSPropColor,
+  CSSPropDefinition,
+  CSSPropLength,
+  CSSPropNumber,
+  CSSPropString,
+  CSSPropType,
+  CSSPropValue,
+} from './css-props/types.ts'
+
+export type CSSPropsConfig = Record<string, CSSPropDefinition>
+
+type CSSProp<T extends CSSPropDefinition = CSSPropDefinition> = T & {
+  readonly name: string
+  readonly kebabName: string
+  readonly initialValue: CSSPropType<T>
+}
+
+type CSSProps<P extends CSSPropsConfig> = {
+  readonly [K in keyof P]: P[K] & CSSProp<P[K]>
+}
+
+type VarsConfig = Record<string, VarCSS>
+type VarCSS = string | DeepRecord<string>
+
+export class GDSComponent<P extends CSSPropsConfig = CSSPropsConfig, A extends boolean = boolean> {
+  readonly name: string
+  readonly kebabName: string
+  readonly className: string
+  readonly containerName: string | null
+  readonly addonCompatible: A
+  readonly cssProps: CSSProps<P>
+  readonly vars: VarsConfig | undefined
+
+  constructor(
+    name: string,
+    config?: {
+      containerName?: string | null | undefined
+      addonCompatible?: A | undefined
+      cssProps?: P | undefined
+      vars?: VarsConfig | undefined
+    },
+  ) {
+    this.name = name
+    this.kebabName = camelToKebab(name)
+    this.className = `gds-${this.kebabName}`
+    this.containerName = config?.containerName !== undefined ? config.containerName : this.className
+    this.addonCompatible = (config?.addonCompatible ?? false) as A
+    this.cssProps = Object.freeze(
+      Object.fromEntries(
+        objectEntries(config?.cssProps ?? ({} as P)).map(([propName, prop]) => {
+          const initialValue =
+            prop.defaultValue ??
+            (() => {
+              switch (prop.type) {
+                case 'values':
+                  return (prop.values[0] ?? '') satisfies CSSPropValue
+                case 'string':
+                  return '' satisfies CSSPropString
+                case 'number':
+                  return 0 satisfies CSSPropNumber
+                case 'length':
+                  return '0px' satisfies CSSPropLength
+                case 'color':
+                  return 'current' satisfies CSSPropColor
+              }
+            })()
+          return [
+            propName,
+            {
+              ...prop,
+              name: propName,
+              kebabName: camelToKebab(propName),
+              initialValue,
+            },
+          ]
+        }),
+      ),
+    ) as CSSProps<P>
+    this.vars = config?.vars
+  }
+
+  getCSSPropByName<T extends keyof P & string>(name: T): CSSProps<P>[T] {
+    const prop = this.cssProps[name]
+    if (!prop) {
+      throw new Error(`Unknown CSS prop "${name}" for component "${this.name}"`)
+    }
+    return prop
+  }
+
+  findCSSPropByKebabName(kebabName: string) {
+    for (const key in this.cssProps) {
+      if (this.cssProps[key].kebabName === kebabName) {
+        return this.cssProps[key]
+      }
+    }
+    return undefined
+  }
+}
+
+/** Type to validate CSS prop definitions. */
+type ValidateCSSPropDefinition<P> = P extends {
+  type: 'values'
+  values: readonly unknown[]
+}
+  ? P['values'] extends readonly [unknown, ...unknown[]]
+    ? P extends {
+        defaultValue?: unknown
+      }
+      ? P['defaultValue'] extends P['values'][number]
+        ? P
+        : never
+      : P
+    : never
+  : P
+
+/** Type to validate all CSS props in an object. */
+type ValidateCSSPropsConfig<P extends Record<string, unknown>> = {
+  [K in keyof P]: ValidateCSSPropDefinition<P[K]>
+}
+
+/** Type to validate that vars don't conflict with cssProps names. */
+type ValidateVarsConfig<P extends CSSPropsConfig, V extends VarsConfig> = {} extends P
+  ? V
+  : {
+      [K in keyof V]: K extends keyof P
+        ? `Var "${K & string}" conflicts with cssProps. Choose a different name.`
+        : V[K]
+    }
+
+/** Helper function to create a `GDSComponent` instance with proper type inference. */
+export function createComponent<
+  const P extends CSSPropsConfig,
+  const V extends VarsConfig,
+  const A extends boolean,
+>(
+  name: string,
+  config?: ConstructorParameters<typeof GDSComponent<P>>[1] & {
+    addonCompatible?: A
+    cssProps?: ValidateCSSPropsConfig<P>
+    vars?: ValidateVarsConfig<P, V>
+  },
+): GDSComponent<P, A> {
+  return new GDSComponent(name, config)
+}
+
+/** Helper type to extract the CSS props config type from a `GDSComponent` instance. */
+export type ComponentCSSPropsConfig<C extends GDSComponent> =
+  C extends GDSComponent<infer P> ? P : never
+
+/**
+ * Helper type to extract CSS props types from components created with `createComponent`. Props
+ * without a `defaultValue` are required, while those with a `defaultValue` are optional. Explicitly
+ * includes `undefined` in the type to work with `exactOptionalPropertyTypes`.
+ */
+export type ComponentCSSProps<C extends GDSComponent> = {
+  [K in keyof ComponentCSSPropsConfig<C> as string extends K
+    ? never
+    : 'defaultValue' extends keyof ComponentCSSPropsConfig<C>[K]
+      ? never
+      : K]: CSSPropType<ComponentCSSPropsConfig<C>[K]>
+} & {
+  [K in keyof ComponentCSSPropsConfig<C> as string extends K
+    ? never
+    : 'defaultValue' extends keyof ComponentCSSPropsConfig<C>[K]
+      ? K
+      : never]?: CSSPropType<ComponentCSSPropsConfig<C>[K]> | undefined
+}
+
+/**
+ * Combined props type for GDS components. Includes CSS props and, for addon-compatible components,
+ * a hidden prop to mark them as such.
+ */
+export type GDSComponentProps<C extends GDSComponent> = ComponentCSSProps<C> &
+  (C extends GDSComponent<CSSPropsConfig, true>
+    ? { __addonCompatible?: undefined }
+    : { __addonCompatible?: never })
+
+const componentRegistry = new Map<string, GDSComponent>()
+
+/** Register multiple components at once. */
+export function registerComponents(components: GDSComponent[]) {
+  for (const component of components) {
+    componentRegistry.set(component.kebabName, component)
+  }
+}
+
+/**
+ * Get a registered component by its kebab-case name.
+ *
+ * @param kebabName - The kebab-case name of the component.
+ * @returns The component if found, `undefined` otherwise.
+ */
+export function getRegisteredComponent(kebabName: string) {
+  return componentRegistry.get(kebabName)
+}
+
+/**
+ * Get all registered components.
+ *
+ * @param includeDummy - If true, don't filter out the dummy component.
+ * @returns Array of registered components.
+ */
+export function getRegisteredComponents(includeDummy = false) {
+  const components = [...componentRegistry.values()]
+  return includeDummy
+    ? components
+    : components.filter((component) => component.kebabName !== 'dummy')
+}

package/src/css-props/getCSSPropRawValue.ts

@@ -0,0 +1,52 @@
+import cssesc from 'cssesc'
+
+import { twToRem } from '../utils/index.ts'
+import type {
+  CSSPropColor,
+  CSSPropDefinition,
+  CSSPropLength,
+  CSSPropType,
+  CSSPropValue,
+} from './types.ts'
+
+/** Converts a CSS prop value to its raw string representation for CSS custom properties. */
+export function getCSSPropRawValue<P extends CSSPropDefinition>(
+  prop: P,
+  value: CSSPropType<P>,
+): string {
+  switch (prop.type) {
+    case 'values': {
+      const valuesValue = value as CSSPropValue
+      // Prefix the value with `gds-` because cssnano (which Next.js uses) incorrectly minifies `--gds-prop-variant: white` to `--gds-prop-variant: #fff`
+      return `gds-${valuesValue}`
+    }
+    case 'string': {
+      return `'${cssesc(String(value))}'`
+    }
+    case 'number': {
+      return String(value)
+    }
+    case 'length': {
+      const lengthValue = value as CSSPropLength
+      if (typeof lengthValue === 'number') {
+        return `${twToRem(lengthValue)}rem`
+      } else {
+        return lengthValue
+      }
+    }
+    case 'color': {
+      const colorValue = value as CSSPropColor
+      const [color, opacity] = colorValue.split('/')
+      const colorVariable =
+        color === 'current'
+          ? 'currentcolor'
+          : color === 'transparent'
+            ? 'transparent'
+            : `var(--color-${color})`
+      if (opacity && opacity !== '100') {
+        return `color-mix(in oklab, ${colorVariable} ${opacity}%, transparent)`
+      }
+      return colorVariable
+    }
+  }
+}

package/src/css-props/index.ts

@@ -0,0 +1,4 @@
+export * from './types.ts'
+export { getCSSPropRawValue } from './getCSSPropRawValue.ts'
+export { parseCSSPropValue } from './parseCSSPropValue.ts'
+export { registerCSSProps } from './registerCSSProps.ts'

package/src/css-props/parseCSSPropValue.ts

@@ -0,0 +1,81 @@
+import { parseNumber } from '@graphprotocol/gds-utils'
+
+import { cssUnescape, pxToTw } from '../utils/index.ts'
+import type {
+  CSSPropColor,
+  CSSPropDefinition,
+  CSSPropLength,
+  CSSPropNumber,
+  CSSPropString,
+  CSSPropType,
+  CSSPropValue,
+} from './types.ts'
+
+/**
+ * Parses a raw CSS prop value back to its typed representation. This is the inverse of
+ * `getCSSPropRawValue`.
+ */
+export function parseCSSPropValue<P extends CSSPropDefinition>(
+  prop: P,
+  rawValue: string,
+): CSSPropType<P> {
+  switch (prop.type) {
+    case 'values': {
+      // Remove the `gds-` prefix added by `getCSSPropRawValue`
+      const value = rawValue.replace(/^(gds-)?/, '')
+      // Check if it looks like a boolean
+      if (value === 'true') return true satisfies CSSPropValue as CSSPropType<P>
+      if (value === 'false') return false satisfies CSSPropValue as CSSPropType<P>
+      // Check if it looks like a number
+      const numberValue = parseNumber(value)
+      if (numberValue !== null) {
+        return numberValue satisfies CSSPropValue as CSSPropType<P>
+      }
+      // Otherwise it's a string
+      return value satisfies CSSPropValue as CSSPropType<P>
+    }
+    case 'string': {
+      return cssUnescape(rawValue.slice(1, -1)) satisfies CSSPropString as CSSPropType<P>
+    }
+    case 'number': {
+      const numberValue = parseNumber(rawValue)
+      return (numberValue ?? 0) satisfies CSSPropNumber as CSSPropType<P>
+    }
+    case 'length': {
+      // Check if it's in pixels and convert to Tailwind units
+      if (/^\d+(?:\.\d+)?px$/.test(rawValue)) {
+        const numberValue = parseNumber(rawValue.slice(0, -2)) // Remove 'px'
+        return pxToTw(numberValue ?? 0) satisfies CSSPropLength as CSSPropType<P>
+      }
+      // Otherwise keep as-is (e.g., "1rem", "100%")
+      return rawValue as CSSPropLength as CSSPropType<P>
+    }
+    case 'color': {
+      if (rawValue === 'currentcolor') {
+        return 'current' satisfies CSSPropColor as CSSPropType<P>
+      }
+      if (rawValue === 'transparent') {
+        return 'transparent' satisfies CSSPropColor as CSSPropType<P>
+      }
+      // Check for `color-mix()` (color with opacity)
+      const colorMixMatch = rawValue.match(/^color-mix\(in oklab, (.+) (\d+)%, transparent\)$/)
+      if (colorMixMatch) {
+        const [, colorVar, opacity] = colorMixMatch
+        if (colorVar && opacity) {
+          const varMatch = colorVar.match(/^var\(--color-(.+)\)$/)
+          if (varMatch && varMatch[1]) {
+            const color = varMatch[1]
+            return `${color}/${opacity}` as CSSPropColor as CSSPropType<P>
+          }
+        }
+      }
+      // Check for simple color variable
+      const varMatch = rawValue.match(/^var\(--color-(.+)\)$/)
+      if (varMatch && varMatch[1]) {
+        return varMatch[1] as CSSPropColor as CSSPropType<P>
+      }
+      // Fallback - shouldn't normally happen
+      return rawValue as CSSPropType<P>
+    }
+  }
+}

package/src/css-props/registerCSSProps.ts

@@ -0,0 +1,274 @@
+import cssesc from 'cssesc'
+
+import { parseNumber } from '@graphprotocol/gds-utils'
+
+import {
+  getRegisteredComponent,
+  getRegisteredComponents,
+  type GDSComponent,
+} from '../component-registry.ts'
+import type { PluginAPI } from '../types.ts'
+import { getCSSPropRawValue } from './getCSSPropRawValue.ts'
+import type { CSSPropColor } from './types.ts'
+
+/**
+ * Registers CSS Props functionality in the Tailwind plugin. This includes custom properties,
+ * utilities, and variants for prop-based styling.
+ */
+export function registerCSSProps(api: PluginAPI) {
+  const componentsByCSSProp = getRegisteredComponents(true).reduce((outerMap, component) => {
+    for (const cssProp of Object.values(component.cssProps)) {
+      const innerMap =
+        outerMap.get(cssProp.kebabName) ??
+        outerMap.set(cssProp.kebabName, new Map<string, GDSComponent>()).get(cssProp.kebabName)!
+      innerMap.set(component.kebabName, component)
+    }
+    return outerMap
+  }, new Map<string, Map<string, GDSComponent>>())
+
+  const cssPropKebabNames = [...componentsByCSSProp.keys()]
+
+  /** Register a couple non-inherited custom properties for each prop name. */
+  for (const cssPropKebabName of cssPropKebabNames) {
+    api.addBase({
+      [`@property --gds-default-${cssPropKebabName}`]: {
+        syntax: "'*'",
+        inherits: 'false',
+      },
+      [`@property --gds-passed-${cssPropKebabName}`]: {
+        syntax: "'*'",
+        inherits: 'false',
+      },
+      [`@property --gds-prop-${cssPropKebabName}`]: {
+        syntax: "'*'",
+        inherits: 'false',
+      },
+    })
+  }
+
+  /** Register a custom property for each component-prop pair to restrict the allowed values. */
+  for (const component of getRegisteredComponents()) {
+    for (const cssProp of Object.values(component.cssProps)) {
+      const syntax = (() => {
+        switch (cssProp.type) {
+          case 'values':
+            return `'${cssProp.values.map((value) => getCSSPropRawValue(cssProp, value)).join(' | ')}'`
+          case 'string':
+            return "'<string>'"
+          case 'number':
+            return "'<number>'"
+          case 'length':
+            return "'<length-percentage>'"
+          case 'color':
+            return "'<color>'"
+          default:
+            return "'*'"
+        }
+      })()
+      api.addBase({
+        [`@property --gds-${component.kebabName}-${cssProp.kebabName}`]: {
+          syntax,
+          /**
+           * We only need this property to inherit if the type is not `values`, because `values` CSS
+           * props are accessed via style queries.
+           */
+          inherits: cssProp.type === 'values' ? 'false' : 'true',
+          'initial-value': (() => {
+            if (
+              cssProp.type === 'length' &&
+              typeof cssProp.initialValue === 'string' &&
+              /(cap|ch|em|ex|ic|lh)$/.test(cssProp.initialValue)
+            ) {
+              // `initial-value` cannot be font-size-relative
+              return '100%'
+            }
+            return getCSSPropRawValue(cssProp, cssProp.initialValue)
+          })(),
+        },
+      })
+    }
+
+    /**
+     * Base styles for each component, including defining the default value of each CSS prop and
+     * applying the value passed via the React prop, if any. See `getCSSPropsAttributes` for details
+     * on how each prop type is handled.
+     */
+    api.addBase({
+      '@layer components': {
+        [`.${component.className}`]: {
+          '--tw-sort': 'container-type',
+          ...(component.containerName ? { 'container-name': component.containerName } : {}),
+          ...Object.values(component.cssProps).reduce(
+            (rules, cssProp) => {
+              return {
+                ...rules,
+                [`--gds-passed-or-default-${cssProp.kebabName}`]: `var(--gds-passed-${cssProp.kebabName}, var(--gds-default-${cssProp.kebabName}, ${getCSSPropRawValue(cssProp, cssProp.initialValue)}))`,
+                [`--gds-${component.kebabName}-${cssProp.kebabName}`]: `var(--gds-prop-${cssProp.kebabName}, var(--gds-passed-or-default-${cssProp.kebabName}))`,
+              }
+            },
+            {} as Record<string, string>,
+          ),
+        },
+      },
+    })
+  }
+
+  function parseBareValueNumber(bareValue: string, increment = 0.25) {
+    const number = parseNumber(bareValue, { strict: true })
+    if (number === null || number < 0 || !Number.isInteger(number * (1 / increment))) return null
+    return number
+  }
+
+  type BareValueFunction =
+    NonNullable<Parameters<typeof api.matchUtilities>[1]> extends {
+      values?: { __BARE_VALUE__?: infer B }
+    }
+      ? B
+      : never
+
+  /** Register `prop-{prop}-{value}` and `default-{prop}-{value}` utilities. */
+  for (const [cssPropKebabName, components] of componentsByCSSProp) {
+    const cssProps = [...components.values()].flatMap((component) => {
+      const cssProp = component.findCSSPropByKebabName(cssPropKebabName)
+      return cssProp ? [cssProp] : []
+    })
+    const cssPropTypes = cssProps.map((cssProp) => cssProp.type)
+    const matchUtilitiesType = ['any']
+    const matchUtilitiesValues: Record<string, string> = {
+      inherit: 'inherit',
+    }
+    cssProps.forEach((cssProp) => {
+      ;[...(cssProp.values ?? []), ...(cssProp.suggestedValues ?? [])].forEach((value) => {
+        matchUtilitiesValues[String(value)] = getCSSPropRawValue(cssProp, value)
+      })
+    })
+    if (cssPropTypes.includes('number') && !cssPropTypes.includes('length')) {
+      const bareValueFunction: BareValueFunction = (value) => {
+        const numberValue = parseBareValueNumber(value.value)
+        if (numberValue === null) return undefined
+        return String(numberValue)
+      }
+      matchUtilitiesValues['__BARE_VALUE__'] = bareValueFunction as unknown as string
+    }
+    if (cssPropTypes.includes('length')) {
+      for (const [spacingKey, spacingValue] of Object.entries(
+        api.theme('spacing') as Record<string, string>,
+      )) {
+        matchUtilitiesValues[spacingKey] =
+          parseNumber(spacingKey, { strict: true }) !== null
+            ? `--spacing(${spacingKey})`
+            : spacingValue
+      }
+      const bareValueFunction: BareValueFunction = (value) => {
+        const numberValue = parseBareValueNumber(value.value)
+        if (numberValue === null) return undefined
+        return `--spacing(${numberValue})`
+      }
+      matchUtilitiesValues['__BARE_VALUE__'] = bareValueFunction as unknown as string
+    }
+    if (cssPropTypes.includes('color')) {
+      matchUtilitiesType.push('color') // Allows using opacity modifiers
+      for (const colorKey in api.theme('colors') as Record<string, string>) {
+        matchUtilitiesValues[colorKey] = getCSSPropRawValue(
+          { type: 'color', defaultValue: 'current' },
+          colorKey as CSSPropColor,
+        )
+      }
+    }
+    api.matchUtilities(
+      Object.fromEntries(
+        (['prop', 'default'] as const).map((utilityType) => [
+          `${utilityType}-${cssPropKebabName}`,
+          (value) => ({
+            [`--gds-${utilityType}-${cssPropKebabName}`]: value,
+          }),
+        ]),
+      ),
+      {
+        type: matchUtilitiesType,
+        values: matchUtilitiesValues,
+      },
+    )
+  }
+
+  /**
+   * Register `@prop-{prop}-{value}/{component}` and `@prop-not-{prop}-{value}/{component}` variants
+   * for props of type `values`, for components to use internally.
+   */
+  for (const variant of ['@prop-not', '@prop'] as const) {
+    api.matchVariant(
+      variant,
+      (cssPropKebabNameAndValue, { modifier: componentKebabName }) => {
+        /**
+         * If the modifier is explicitly `dummy`, consider the variant invalid by returning an empty
+         * selector list (no CSS will be generated for it).
+         */
+        if (componentKebabName === 'dummy') return []
+        /**
+         * Default a missing modifier to `dummy` instead of considering the variant invalid so that
+         * it's suggested by Tailwind IntelliSense.
+         */
+        const component = getRegisteredComponent(componentKebabName ?? 'dummy')
+        /**
+         * If no component is found (i.e. the modifier is not a valid component name), consider the
+         * variant invalid.
+         */
+        if (!component) return []
+        try {
+          const { cssPropKebabName, value } = JSON.parse(cssPropKebabNameAndValue)
+          if (
+            typeof cssPropKebabName !== 'string' ||
+            (typeof value !== 'string' && typeof value !== 'number' && typeof value !== 'boolean')
+          )
+            return []
+          const cssProp = component.findCSSPropByKebabName(cssPropKebabName)
+          /**
+           * Only consider the variant valid if the prop exists on the component and is of type
+           * `values`, and the value is valid for it (unless the component is `dummy`, which is used
+           * to list all variants in IntelliSense regardless of the component).
+           */
+          if (
+            (!cssProp || cssProp.type !== 'values' || !cssProp.values.includes(value)) &&
+            component.kebabName !== 'dummy'
+          ) {
+            return []
+          }
+          const rawValue = cssProp ? getCSSPropRawValue(cssProp, value) : String(value)
+          return [
+            /** Style query selector for modern browsers. */
+            `@container ${component.containerName} ${variant === '@prop-not' ? 'not' : ''} style(--gds-${component.kebabName}-${cssPropKebabName}: ${rawValue})`,
+            /**
+             * Fallback selector for browsers without style query support, which unfortunately
+             * cannot be queried, but happens to be the same browsers that don't support view
+             * transitions (except for Firefox which introduced support for view transitions in
+             * version 144 but not style queries). Note that we don't want the polyfill rules to be
+             * applied when style queries are supported to prevent bugs on the first render, where
+             * polyfill attributes are present even when the polyfill is not needed (see
+             * `useCSSPropsPolyfill` for an explanation why).
+             */
+            `@supports (not (view-transition-name: none)) or (-moz-orient: inline) { &:where(.${component.className}${variant === '@prop-not' ? ':not' : ':is'}([data-gds-prop-polyfill-${cssPropKebabName}=${cssesc(rawValue, { isIdentifier: true })}]) *) }`,
+          ]
+        } catch {
+          /**
+           * If the value is invalid JSON (e.g. `@prop-[some-arbitrary-string]`), consider the
+           * variant invalid.
+           */
+          return []
+        }
+      },
+      {
+        values: Object.fromEntries(
+          [...componentsByCSSProp.entries()].flatMap(([cssPropKebabName, components]) => {
+            const cssPropValues = [...components.values()].flatMap(
+              (component) => component.findCSSPropByKebabName(cssPropKebabName)?.values ?? [],
+            )
+            return cssPropValues.map((value) => [
+              `${cssPropKebabName}-${value}`,
+              JSON.stringify({ cssPropKebabName, value }),
+            ])
+          }),
+        ),
+      },
+    )
+  }
+}

package/src/css-props/types.ts

@@ -0,0 +1,35 @@
+import type { GDSColor } from '../design-tokens.generated.ts'
+
+type CSSUnit = 'px' | 'em' | 'rem' | 'lh' | 'rlh' | '%' | 'vw' | 'vh' | 'vmin' | 'vmax'
+type CSSLength = number | `${number}${CSSUnit}`
+
+export type CSSPropValue = string | number | boolean
+export type CSSPropString = string
+export type CSSPropNumber = number
+export type CSSPropLength = CSSLength
+export type CSSPropColor = GDSColor | `${GDSColor}/${number}`
+
+type Type = 'values' | 'string' | 'number' | 'length' | 'color'
+type TypeToValue<T extends Type, V extends CSSPropValue = CSSPropValue> = T extends 'values'
+  ? V
+  : T extends 'string'
+    ? CSSPropString
+    : T extends 'number'
+      ? CSSPropNumber
+      : T extends 'length'
+        ? CSSPropLength
+        : CSSPropColor
+
+export type CSSPropDefinition<
+  T extends Type = Type,
+  V extends CSSPropValue[] = CSSPropValue[],
+  D extends TypeToValue<T, V[number]> = TypeToValue<T, V[number]>,
+> = T extends 'values'
+  ? { type: T; values: V; suggestedValues?: never; defaultValue?: D & TypeToValue<T, V[number]> }
+  : T extends 'number'
+    ? { type: T; values?: never; suggestedValues?: number[]; defaultValue?: D & TypeToValue<T> }
+    : { type: T; values?: never; suggestedValues?: never; defaultValue?: D & TypeToValue<T> }
+
+export type CSSPropType<P extends CSSPropDefinition> = P['values'] extends CSSPropValue[]
+  ? TypeToValue<P['type'], P['values'][number]>
+  : TypeToValue<P['type']>

package/src/css-states/index.ts

@@ -0,0 +1,2 @@
+export { cssStates, cssStateVariables, type CSSState, type CSSStateValue } from './states.ts'
+export { registerCSSStates } from './registerCSSStates.ts'