@terrazzo/plugin-css 0.0.2 → 0.0.4

package/src/lib.ts

@@ -0,0 +1,106 @@
+export const FORMAT_ID = 'css';
+
+export const FILE_PREFIX = `/* -------------------------------------------
+ *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
+ * ------------------------------------------- */`;
+
+export interface CSSPluginOptions {
+  /** Where to output 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?: (name: string) => string;
+}
+
+export interface ModeSelector {
+  /** The name of the mode to match */
+  mode: string;
+  /** (optional) 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[];
+}
+
+// note: this is NOT an adequate replacement for a CSS AST; this just performs
+// basic deduplication and allows some limited parsing/reformatting before
+// flattening to a CSS string.
+export interface CSSRule {
+  selectors: string[];
+  nestedQuery?: string;
+  declarations: Record<string, string>;
+}
+
+/** Convert CSSRules into a formatted, indented CSS string */
+export function printRules(rules: CSSRule[]): string {
+  const output: string[] = [];
+  for (const rule of rules) {
+    if (!rule.selectors.length || !Object.keys(rule.declarations).length) {
+      continue;
+    }
+
+    const mqSelectors: string[] = [];
+    const joinableSelectors: string[] = [];
+    for (const s of rule.selectors) {
+      (s.startsWith('@') ? mqSelectors : joinableSelectors).push(s);
+    }
+    // @media-query selectors get pushed individually
+    for (const s of mqSelectors) {
+      output.push(_printRule({ ...rule, selectors: [s] }));
+    }
+    // all other selectors get joined as one
+    if (joinableSelectors.length) {
+      output.push(_printRule({ ...rule, selectors: joinableSelectors }));
+    }
+  }
+  return output.join('\n\n');
+}
+
+function _printRule(rule: CSSRule): string {
+  const output: string[] = [];
+  const isMediaQuery = rule.selectors.some((s) => s.startsWith('@'));
+  let indent = '';
+
+  // if both levels are media queries, preserve order
+  if (rule.nestedQuery && isMediaQuery) {
+    output.push(`${indent}${rule.selectors.join(`,\n${indent}`)} {`);
+    indent += '  ';
+    output.push(`${indent}${rule.nestedQuery} {`);
+  }
+  // otherwise if nested query exists but parens aren’t media queries, reverse order (media queries on top)
+  else if (rule.nestedQuery && !isMediaQuery) {
+    output.push(`${indent}${rule.nestedQuery} {`);
+    indent += '  ';
+    output.push(`${indent}${rule.selectors.join(`,\n${indent}`)} {`);
+  }
+  // if no media queries, just print selectors
+  else {
+    output.push(`${indent}${rule.selectors.join(`,\n${indent}`)} {`);
+  }
+  indent += '  ';
+
+  // note: this is ONLY dependent on whether the top level is a media query (ignores nestedQuery)
+  if (isMediaQuery) {
+    output.push(`${indent}:root {`);
+    indent += '  ';
+  }
+
+  for (const [k, v] of Object.entries(rule.declarations)) {
+    output.push(`${indent}${k}: ${v};`);
+  }
+
+  // base closing brackets on indent level
+  while (indent !== '') {
+    indent = indent.substring(0, indent.length - 2);
+    output.push(`${indent}}`);
+  }
+
+  return output.join('\n');
+}
+
+export interface GetRuleOptions {
+  /** Combine a selector with parent selectors (e.g. if adding a @media-query within another selector list) */
+  parentSelectors?: string[];
+}

package/src/transform.ts

@@ -0,0 +1,227 @@
+import type { TokenNormalized, TransformHookOptions } from '@terrazzo/parser';
+import {
+  transformBooleanValue,
+  transformBorderValue,
+  transformColorValue,
+  transformCubicBezierValue,
+  transformDimensionValue,
+  transformDurationValue,
+  transformFontFamilyValue,
+  transformFontWeightValue,
+  transformGradientValue,
+  transformLinkValue,
+  transformNumberValue,
+  transformShadowValue,
+  transformStringValue,
+  transformStrokeStyleValue,
+  transformTransitionValue,
+  transformTypographyValue,
+} from '@terrazzo/token-tools/css';
+import { FORMAT_ID } from './lib.js';
+
+export interface TransformValueOptions {
+  transformAlias: (id: string) => string;
+  id: string;
+  localID: string;
+  setTransform: TransformHookOptions['setTransform'];
+}
+
+export default function transformValue(
+  token: TokenNormalized,
+  { id, localID, transformAlias, setTransform }: TransformValueOptions,
+): void {
+  switch (token.$type) {
+    case 'boolean': {
+      for (const mode in token.mode) {
+        const { $value, aliasOf } = token.mode[mode]!;
+        setTransform(id, {
+          format: FORMAT_ID,
+          localID,
+          value: transformBooleanValue($value, { aliasOf, transformAlias }),
+          mode,
+        });
+      }
+      break;
+    }
+    case 'border': {
+      for (const mode in token.mode) {
+        const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
+        setTransform(id, {
+          format: FORMAT_ID,
+          localID,
+          value: transformBorderValue($value, { aliasOf, partialAliasOf, transformAlias }),
+          mode,
+        });
+      }
+      break;
+    }
+    case 'color': {
+      for (const mode in token.mode) {
+        const { $value, aliasOf } = token.mode[mode]!;
+        setTransform(id, {
+          format: FORMAT_ID,
+          localID,
+          value: transformColorValue($value, { aliasOf, transformAlias }),
+          mode,
+        });
+      }
+      break;
+    }
+    case 'cubicBezier': {
+      for (const mode in token.mode) {
+        const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
+        setTransform(id, {
+          format: FORMAT_ID,
+          localID,
+          value: transformCubicBezierValue($value, { aliasOf, partialAliasOf, transformAlias }),
+          mode,
+        });
+      }
+      break;
+    }
+    case 'dimension': {
+      for (const mode in token.mode) {
+        const { $value, aliasOf } = token.mode[mode]!;
+        setTransform(id, {
+          format: FORMAT_ID,
+          localID,
+          value: transformDimensionValue($value, { aliasOf, transformAlias }),
+          mode,
+        });
+      }
+      break;
+    }
+    case 'duration': {
+      for (const mode in token.mode) {
+        const { $value, aliasOf } = token.mode[mode]!;
+        setTransform(id, {
+          format: FORMAT_ID,
+          localID,
+          value: transformDurationValue($value, { aliasOf, transformAlias }),
+          mode,
+        });
+      }
+      break;
+    }
+    case 'fontFamily': {
+      for (const mode in token.mode) {
+        const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
+        setTransform(id, {
+          format: FORMAT_ID,
+          localID,
+          value: transformFontFamilyValue($value, { aliasOf, partialAliasOf, transformAlias }),
+          mode,
+        });
+      }
+      break;
+    }
+    case 'fontWeight': {
+      for (const mode in token.mode) {
+        const { $value, aliasOf } = token.mode[mode]!;
+        setTransform(id, {
+          format: FORMAT_ID,
+          localID,
+          value: transformFontWeightValue($value, { aliasOf, transformAlias }),
+          mode,
+        });
+      }
+      break;
+    }
+    case 'gradient': {
+      for (const mode in token.mode) {
+        const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
+        setTransform(id, {
+          format: FORMAT_ID,
+          localID,
+          value: transformGradientValue($value, { aliasOf, partialAliasOf, transformAlias }),
+          mode,
+        });
+      }
+      break;
+    }
+    case 'link': {
+      for (const mode in token.mode) {
+        const { $value, aliasOf } = token.mode[mode]!;
+        setTransform(id, {
+          format: FORMAT_ID,
+          localID,
+          value: transformLinkValue($value, { aliasOf, transformAlias }),
+          mode,
+        });
+      }
+      break;
+    }
+    case 'number': {
+      for (const mode in token.mode) {
+        const { $value, aliasOf } = token.mode[mode]!;
+        setTransform(id, {
+          format: FORMAT_ID,
+          localID,
+          value: transformNumberValue($value, { aliasOf, transformAlias }),
+          mode,
+        });
+      }
+      break;
+    }
+    case 'shadow': {
+      for (const mode in token.mode) {
+        const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
+        setTransform(id, {
+          format: FORMAT_ID,
+          localID,
+          value: transformShadowValue($value, { aliasOf, partialAliasOf, transformAlias }),
+          mode,
+        });
+      }
+      break;
+    }
+    case 'string': {
+      for (const mode in token.mode) {
+        const { $value, aliasOf } = token.mode[mode]!;
+        setTransform(id, {
+          format: FORMAT_ID,
+          localID,
+          value: transformStringValue($value, { aliasOf, transformAlias }),
+          mode,
+        });
+      }
+      break;
+    }
+    case 'strokeStyle': {
+      for (const mode in token.mode) {
+        const { $value, aliasOf } = token.mode[mode]!;
+        setTransform(id, {
+          format: FORMAT_ID,
+          localID,
+          value: transformStrokeStyleValue($value, { aliasOf, transformAlias }),
+          mode,
+        });
+      }
+      break;
+    }
+    case 'transition': {
+      for (const mode in token.mode) {
+        const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
+        setTransform(id, {
+          format: FORMAT_ID,
+          localID,
+          value: transformTransitionValue($value, { aliasOf, partialAliasOf, transformAlias }),
+          mode,
+        });
+      }
+      break;
+    }
+    case 'typography': {
+      for (const mode in token.mode) {
+        const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
+        setTransform(id, {
+          format: FORMAT_ID,
+          localID,
+          value: transformTypographyValue($value, { aliasOf, partialAliasOf, transformAlias }),
+          mode,
+        });
+      }
+      break;
+    }
+  }
+}