UNPKG

@poupe/tailwindcss

Version:

TailwindCSS v4 plugin for Poupe UI framework with theme customization support

1 lines 7.68 kB
{"version":3,"file":"theme.mjs","sources":["../src/theme/css.ts"],"sourcesContent":["import {\n type CSSRules,\n formatCSSRulesArray,\n interleavedRules,\n keys,\n renameRules,\n} from '@poupe/css';\n\nimport {\n defaultPersistentColors,\n} from './config';\n\nimport {\n makeShadowRules,\n} from './shadows';\n\nimport {\n makeThemeBases,\n makeThemeComponents,\n} from './theme';\n\nimport {\n type Theme,\n type ThemeColorConfig,\n Hct,\n} from './types';\n\nimport {\n type DarkModeStrategy,\n makeThemeVariants,\n} from './variants';\n\n/**\n * Converts a CSS selector name to a utility format.\n *\n * @param name - The original selector name to be transformed\n * @returns A string representing the selector in the utility format\n *\n * @example\n * ```\n * // Input: '.button'\n * // Output: '@utility button'\n * // Input: 'hover'\n * // Output: '@utility hover'\n * ```\n */\nconst utilityName = (name: string) => `@utility ${name.startsWith('.') ? name.slice(1) : name}`;\n\n/**\n * Converts a variant name to a custom variant format.\n *\n * @param name - The original variant name to be transformed\n * @returns A string representing the variant in the custom variant format\n *\n * @example\n * ```\n * // Input: 'hover'\n * // Output: '@custom-variant hover'\n * ```\n */\nconst variantName = (name: string) => `@custom-variant ${name}`;\n\n/**\n * Processes component CSS rules by converting them to utility format.\n *\n * @param components - An array of component CSS rule objects to be processed\n * @returns An array of CSS rule objects converted to utility format\n *\n * @example\n * ```\n * // Input: [{ '.button': { color: 'blue' } }]\n * // Output: [{ '@utility button': { color: 'blue' } }]\n * ```\n */\nconst prepareComponents = (components: Record<string, CSSRules>[]): CSSRules[] => components.map(group => renameRules(group, utilityName));\n\n/**\n * Transforms an array of variant CSS rules by converting their selectors to custom variant format.\n *\n * @param variants - An array of CSS rule objects representing variants\n * @returns An array of CSS rule objects with selectors renamed to custom variant format\n *\n * @example\n * ```\n * // Input: [{ '.hover': { color: 'blue' } }]\n * // Output: [{ '@custom-variant hover': { color: 'blue' } }]\n * ```\n */\nconst prepareVariants = (variants: CSSRules[]): CSSRules[] => variants.map(group => renameRules(group, variantName));\n\n/**\n * Formats a theme configuration into a series of CSS rules and utilities.\n *\n * @param theme - The theme configuration object to be processed\n * @param darkMode - Strategy for handling dark mode, defaults to 'class'\n * @param indent - Indentation string for formatting, defaults to two spaces\n * @param stringify - Optional function to convert Hct color values to string format. defaults to `rgb()`\n * @returns An array of formatted CSS rule strings\n */\nexport function formatTheme(\n theme: Theme,\n darkMode: DarkModeStrategy = 'class',\n indent: string = ' ',\n stringify?: (value: Hct) => string,\n): string[] {\n const { extendColors = false } = theme.options;\n const bases = makeThemeBases(theme, darkMode, stringify);\n const variants = makeThemeVariants(theme, darkMode);\n\n const rules: CSSRules[] = [\n // variants\n ...prepareVariants(variants),\n // bases\n ...(bases.length > 0 ? [{ '@layer base': bases }] : []),\n // theme\n {\n '@theme': interleavedRules([\n // colors\n ...themeColors(theme.colors, extendColors),\n // shadows\n ...makeShadowRules(theme),\n ]),\n },\n // components\n ...prepareComponents(makeThemeComponents(theme)),\n ];\n\n return formatCSSRulesArray(interleavedRules(rules), {\n indent,\n });\n}\n\n/**\n * Generates CSS custom property rules for theme colors.\n *\n * @param colors - Record of theme color configurations\n * @param extendColors - Whether to extend existing colors or reset them, defaults to false\n * @param persistentColors - Record of persistent colors that should be preserved if not overridden\n * @returns An array of CSS rule objects for the theme colors\n */\nexport function themeColors(\n colors: Record<string, ThemeColorConfig>,\n extendColors: boolean = false,\n persistentColors: Record<string, string> = defaultPersistentColors,\n): CSSRules[] {\n const rules: CSSRules[] = [];\n\n if (!extendColors) {\n // reset\n rules.push({ '--color-*': 'initial' });\n\n // persistent colors not customized\n const colorRules: CSSRules = {};\n for (const key of [...keys(persistentColors)].sort((a, b) => a.localeCompare(b))) {\n if (!(key in colors)) {\n colorRules[`--color-${key}`] = persistentColors[key];\n }\n }\n rules.push(colorRules);\n }\n\n // theme colors\n const themeColors: CSSRules = {};\n for (const key of [...keys(colors)].sort((a, b) => a.localeCompare(b))) {\n const c = colors[key];\n themeColors[`--color-${key}`] = `var(${c.value})`;\n if (c.shades) {\n // shades\n for (const shade of [...keys(c.shades)].sort((a: number, b: number) => a - b)) {\n themeColors[`--color-${key}-${shade}`] = `var(${c.shades[shade]})`;\n }\n }\n }\n rules.push(themeColors);\n return rules;\n}\n"],"names":["themeColors"],"mappings":"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"}