plugin-functions.ts — tailwindcss Source File

Source Code

import type { DesignSystem } from '../design-system'
import { ThemeOptions, type Theme, type ThemeKey } from '../theme'
import { withAlpha } from '../utilities'
import { DefaultMap } from '../utils/default-map'
import { unescape } from '../utils/escape'
import { toKeyPath } from '../utils/to-key-path'
import { keyPathToCssProperty } from './apply-config-to-theme'
import { deepMerge } from './config/deep-merge'
import type { UserConfig } from './config/types'

export function createThemeFn(
  designSystem: DesignSystem,
  configTheme: () => UserConfig['theme'],
  resolveValue: (value: any) => any,
) {
  return function theme(path: string, defaultValue?: unknown) {
    // Extract an eventual modifier from the path. e.g.:
    // - "colors.red.500 / 50%" -> "50%"
    // - "foo/bar/baz/50%"      -> "50%"
    let lastSlash = path.lastIndexOf('/')
    let modifier: string | null = null
    if (lastSlash !== -1) {
      modifier = path.slice(lastSlash + 1).trim()
      path = path.slice(0, lastSlash).trim()
    }

    let resolvedValue = (() => {
      let keypath = toKeyPath(path)
      let [cssValue, options] = readFromCss(designSystem.theme, keypath)

      let configValue = resolveValue(get(configTheme() ?? {}, keypath) ?? null)

      if (typeof configValue === 'string') {
        configValue = configValue.replace('<alpha-value>', '1')
      }

      // Resolved to a primitive value.
      if (typeof cssValue !== 'object') {
        if (typeof options !== 'object' && options & ThemeOptions.DEFAULT) {
          return configValue ?? cssValue
        }

        return cssValue
      }

      if (configValue !== null && typeof configValue === 'object' && !Array.isArray(configValue)) {
        let configValueCopy: Record<string, unknown> & { __CSS_VALUES__?: Record<string, number> } =
          // We want to make sure that we don't mutate the original config
          // value. Ideally we use `structuredClone` here, but it's not possible
          // because it can contain functions.
          deepMerge({}, [configValue], (_, b) => b)

        // There is no `cssValue`, which means we can back-fill it with values
        // from the `configValue`.
        if (cssValue === null && Object.hasOwn(configValue, '__CSS_VALUES__')) {
          let localCssValue: Record<string, unknown> = {}
          for (let key in configValue.__CSS_VALUES__) {
            localCssValue[key] = configValue[key]
            delete configValueCopy[key]
          }
// ... (198 more lines)