@terrazzo/plugin-css/dist/index.d.ts

Convert DTCG design tokens JSON into CSS variables for use in any web application or native app with webview.

import { BuildHookOptions, Plugin, TokenNormalized, TokenTransformed } from "@terrazzo/parser";

//#region src/lib.d.ts
type UtilityCSSGroup = 'bg' | 'border' | 'font' | 'layout' | 'shadow' | 'text';
type UtilityCSSPrefix = 'bg' | 'border' | 'font' | 'gap' | 'm' | 'p' | 'shadow' | 'text';
declare const FORMAT_ID = "css";
declare const FILE_PREFIX = "/* -------------------------------------------\n *  Autogenerated by \u26CB Terrazzo. DO NOT EDIT!\n * ------------------------------------------- */";
interface CSSPluginOptions {
  /**
   * Where to output CSS
   * @default "index.css"
   */
  filename?: string;
  /** Glob patterns to exclude tokens from output */
  exclude?: string[];
  /** Define mode selectors as media queries or CSS classes */
  modeSelectors?: ModeSelector[];
  /** Control the final CSS variable name */
  variableName?: (token: TokenNormalized) => string;
  /** Override certain token values */
  transform?: (token: TokenNormalized, mode: string) => TokenTransformed['value'];
  /** Generate utility CSS from groups */
  utility?: Record<UtilityCSSGroup, string[]>;
  /**
   * Output colors as hex-6/hex-8 instead of color() function
   * @default false
   */
  legacyHex?: boolean;
  /**
   * Skip generating any `.css` files (useful if you are consuming values in your own plugin and don’t need any `.css` files written to disk).
   * @default false
   */
  skipBuild?: boolean;
  /**
   * Set the base selector, like ":root" or ":host".
   * @default ":root"
   */
  baseSelector?: string;
}
interface ModeSelector {
  /** The name of the mode to match */
  mode: string;
  /** Provide token IDs to match. Globs are allowed (e.g: `["color.*", "shadow.dark"]`) */
  tokens?: string[];
  /** Provide CSS selectors to generate. (e.g.: `["@media (prefers-color-scheme: dark)", "[data-color-theme='dark']"]` ) */
  selectors: string[];
}
interface CSSRuleDeclaration {
  value: string;
  description?: string;
}
interface CSSRule {
  selectors: string[];
  nestedQuery?: string;
  declarations: Record<string, CSSRuleDeclaration>;
}
/** Convert CSSRules into a formatted, indented CSS string */
declare function printRules(rules: CSSRule[]): string;
interface GetRuleOptions {
  /** Combine a selector with parent selectors (e.g. if adding a @media-query within another selector list) */
  parentSelectors?: string[];
}
//# sourceMappingURL=lib.d.ts.map
//#endregion
//#region src/build/index.d.ts
interface BuildFormatOptions {
  exclude: CSSPluginOptions['exclude'];
  getTransforms: BuildHookOptions['getTransforms'];
  modeSelectors: CSSPluginOptions['modeSelectors'];
  utility: CSSPluginOptions['utility'];
  baseSelector: string;
}
//#endregion
//#region src/index.d.ts
declare function cssPlugin(options?: CSSPluginOptions): Plugin;
//# sourceMappingURL=index.d.ts.map

//#endregion
export { BuildFormatOptions, CSSPluginOptions, CSSRule, CSSRuleDeclaration, FILE_PREFIX, FORMAT_ID, GetRuleOptions, ModeSelector, UtilityCSSGroup, UtilityCSSPrefix, cssPlugin as default, printRules };
//# sourceMappingURL=index.d.ts.map