{"version":3,"file":"main.umd.cjs","sources":["../src/lib/makeCssVars.ts","../src/lib/mergeCssVars.ts"],"sourcesContent":["/**\n * Extracts the name of a single css varriable from a string\n */\nexport type VarKey<T extends string> =\n  T extends `${string}--${infer K1}:${string};${string}`\n    ? K1\n    : never;\n\n/**\n * Recursively extracts and joins the names of the css varriables from a string\n */\nexport type CssVars<T extends string> =\n  T extends `${string}--${string}:${string};${infer R}`\n    ? VarKey<T> | CssVars<R>\n    : VarKey<T>;\n\n/**\n * The css variables context created from a string containig the raw variable\n * definitions.\n */\nexport interface CssVarContext<T extends string> {\n  /**\n   * Creates a css `var(..)` function based of the `varname` parameter.\n   *\n   * @example\n   * ```ts\n   * cssvar(\"primary-color\"); // var(--primary-color)\n   * ```\n   *\n   * @param varname the css variable name\n   * @returns a css var(..) function of a var\n   */\n  cssvar: <K extends CssVars<T>>(varname: K) => `var(--${K})`;\n  /**\n   * The css variables as a raw definition string.\n   */\n  definitions: T;\n  /**\n   * Cretes a css variable definition of the `varname` and `value` passed. The\n   * resulting string can be used to overwrite or reassign a value to a css\n   * variable already present in the `definitions` object. This is useful for\n   * theming and defining media query specific values.\n   *\n   * @example\n   * ```ts\n   * const GlobalStyle = css`\n   *   :root {\n   *     ${definitions}\n   *\n   *     \\@media screen and (min-width: 480px) {\n   *       ${overwrite(\"gap\", \"1%\")};\n   *       ${overwrite(\"nav-width\", 200)};\n   *     }\n   *   }\n   * `;\n   * ```\n   *\n   * @param varname the css variable name\n   * @param value the new value to assign to the css variable\n   * @returns a raw string of the css variable definition of the overwrite\n   */\n  overwrite: <K extends CssVars<T>, V extends string | number>(varname: K, value: V) => `--${K}: ${V};`;\n}\n\n/**\n * Creates a `CssVarContext` object with the passed css variable definitions.\n * This context contains the `cssvar(..)` function used to reference the css\n * variables from the context, the `overwrite(..)` function used to reassign\n * the value of css variables in the context, and the `definitions` value which\n * is the raw css variable definitions of the context.\n *\n * **Note:** The css variable must start with `--` for the type system to work.\n *\n * @example\n * ```ts\n * const { cssvar, definitions, overwrite } = makeCssVars(`\n *   --gap: 5%;\n *   --nav-width: 500;\n * `);\n *\n * const GlobalStyle = css`\n *   :root {\n *     ${definitions}\n *\n *     \\@media screen and (min-width: 480px) {\n *       ${overwrite(\"gap\", \"1%\")};\n *       ${overwrite(\"nav-width\", 200)};\n *     }\n *   }\n *\n *   nav > .container {\n *     padding: ${cssvar(\"gap\")};\n *     width: ${cssvar(\"nav-width\")}px;\n *   }\n * `;\n * ```\n *\n * @param definitions a raw string including the css variable definitions\n * @returns a `CssVarContext` object for the defined css varibles\n *\n * @see {@link CssVarContext.cssvar cssvar(..)}\n * @see {@link CssVarContext.definitions definitions}\n * @see {@link CssVarContext.overwrite overwrite(..)}\n */\nexport function makeCssVars<T extends string>(definitions: T): CssVarContext<T> {\n  return {\n    cssvar: varname => `var(--${varname})`,\n    definitions,\n    overwrite: (varname, value) => `--${varname}: ${value};`,\n  };\n}\n","import { type CssVarContext, makeCssVars } from \"./makeCssVars\";\n\nimport type { NonEmptyArray } from \"../helpers/common\";\n\n/**\n * Recursively merge all CssVarContext on an array into a single CssVarContext.\n */\nexport type MergeVars<T extends NonEmptyArray<CssVarContext<string>>> =\n  T extends [infer H, ...infer R]\n    ? H extends CssVarContext<infer T2>\n      ? R extends NonEmptyArray<CssVarContext<string>>\n        ? MergeVars<R> extends CssVarContext<infer T3>\n          ? CssVarContext<`${T2}${T3}`>\n          : never\n        : H\n      : never\n    : never;\n\n/**\n * Merges two or more `CssVarContext` object into a single context. Usefull to\n * make the css variable definitions modular and use the all together from a\n * single place.\n *\n * @example\n * ```ts\n * export const baseCssVars = makeCssVars(`\n *   --primary-color: red;\n *   --secondary-color: blue;\n * `);\n *\n * export const navCssVars = makeCssVars(`\n *   --gap: 5%;\n *   --nav-width: 500;\n * `);\n *\n * export const mainCssVars = mergeCssVars(baseCssVars, navCssVars);\n * ```\n *\n * @param cssVars the `CssVarContext` objects to merge\n * @returns a merged `CssVarContext` object\n */\nexport function mergeCssVars<T extends NonEmptyArray<CssVarContext<string>>>(...cssVars: T): MergeVars<T> {\n  const allDefinitions = cssVars.reduce<string>((acc, cssVar) => {\n    const separator = cssVar.definitions.startsWith(\"\\n\")\n      ? \"\"\n      : \"\\n\";\n\n    return `${acc}${separator}${cssVar.definitions}`;\n  }, \"\");\n\n  return makeCssVars(allDefinitions) as MergeVars<T>;\n}\n"],"names":["makeCssVars","definitions","varname","value","mergeCssVars","cssVars","allDefinitions","acc","cssVar","separator"],"mappings":"iOAwGO,SAASA,EAA8BC,EAAkC,CACvE,MAAA,CACL,OAAmBC,GAAA,SAASA,CAAO,IACnC,YAAAD,EACA,UAAW,CAACC,EAASC,IAAU,KAAKD,CAAO,KAAKC,CAAK,GAAA,CAEzD,CCrEO,SAASC,KAAgEC,EAA0B,CACxG,MAAMC,EAAiBD,EAAQ,OAAe,CAACE,EAAKC,IAAW,CAC7D,MAAMC,EAAYD,EAAO,YAAY,WAAW;AAAA,CAAI,EAChD,GACA;AAAA,EAEJ,MAAO,GAAGD,CAAG,GAAGE,CAAS,GAAGD,EAAO,WAAW,IAC7C,EAAE,EAEL,OAAOR,EAAYM,CAAc,CACnC"}