keyPathToCssProperty() — tailwindcss Function Reference

Source Code

packages/tailwindcss/src/compat/apply-config-to-theme.ts lines 177–240

export function keyPathToCssProperty(path: string[]) {
  // In some special cases the `DEFAULT` key did not map to a "default" utility
  // e.g. `ringColor.DEFAULT` wasn't *just* used for `ring`. It was used for
  // all ring utilities as the color when one wasn't specified.
  //
  // We place these specialty values under the `--default-*` namespace to signal
  // that they are defaults used by (potentially) multiple utilities.
  let specialDefault = SPECIAL_DEFAULT_KEYS[path[0]]
  if (specialDefault && path[1] === 'DEFAULT') return `default-${specialDefault}`

  // The legacy container component config should not be included in the Theme
  if (path[0] === 'container') return null

  for (let part of path) {
    if (!IS_VALID_KEY.test(part)) return null
  }

  // Map old v3 namespaces to new theme namespaces
  let ns = OLD_TO_NEW_NAMESPACE[path[0]]
  if (ns) {
    path = path.slice()
    path[0] = ns
  }

  return (
    path
      // [1] should move into the nested object tuple. To create the CSS variable
      // name for this, we replace it with an empty string that will result in two
      // subsequent dashes when joined.
      //
      // E.g.:
      // - `fontSize.xs.1.lineHeight` -> `font-size-xs--line-height`
      // - `spacing.1` -> `--spacing-1`
      .map((path, idx, all) => (path === '1' && idx !== all.length - 1 ? '' : path))

      // Resolve the key path to a CSS variable segment
      .map((part, idx) => {
        part = part.replaceAll('.', '_')

        let shouldConvert =
          // The first "namespace" part should be converted to kebab-case
          // This converts things like backgroundColor to `background-color`
          idx === 0 ||
          // Any tuple nested key should be converted to kebab-case
          // These are identified with a leading `-`
          // e.g. `fontSize.xs.1.lineHeight` -> `font-size-xs--line-height`
          part.startsWith('-') ||
          // `lineHeight` is a bit of a special case in which it does not
          // always begin with a leading `-` even when as a nested tuple key
          part === 'lineHeight'

        if (shouldConvert) {
          part = part.replace(/([a-z])([A-Z])/g, (_, a, b) => `${a}-${b.toLowerCase()}`)
        }

        return part
      })

      // Remove the `DEFAULT` key at the end of a path
      // We're reading from CSS anyway so it'll be a string
      .filter((part, index) => part !== 'DEFAULT' || index !== path.length - 1)
      .join('-')
  )
}