@terrazzo/plugin-css 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Drew Powers
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import type { Plugin } from '@terrazzo/parser';
+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[];
+}
+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 declare const FORMAT_ID = "css";
+export declare const FILE_PREFIX = "/* -------------------------------------------\n *  Autogenerated by \uD83D\uDCA0 Terrazzo. DO NOT EDIT!\n * ------------------------------------------- */";
+export default function cssPlugin({ filename, exclude, variableName, modeSelectors, }?: CSSPluginOptions): Plugin;

package/dist/index.js

@@ -0,0 +1,310 @@
+/**
+ * @module @cobalt-ui/plugin-css
+ * @license MIT License
+ * 
+ * Copyright (c) 2021 Drew Powers
+ * 
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ * 
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import { isTokenMatch, makeAlias } from '@terrazzo/token-tools';
+import { makeCSSVar, transformBooleanValue, transformBorderValue, transformColorValue, transformCubicBezierValue, transformDimensionValue, transformDurationValue, transformFontFamilyValue, transformFontWeightValue, transformGradientValue, transformLinkValue, transformNumberValue, transformShadowValue, transformStringValue, transformStrokeStyleValue, transformTransitionValue, transformTypographyValue, } from '@terrazzo/token-tools/css';
+export const FORMAT_ID = 'css';
+export const FILE_PREFIX = `/* -------------------------------------------
+ *  Autogenerated by 💠 Terrazzo. DO NOT EDIT!
+ * ------------------------------------------- */`;
+export default function cssPlugin({ filename = './index.css', exclude, variableName, modeSelectors, } = {}) {
+    const transformName = (id) => variableName?.(id) || makeCSSVar(id);
+    const transformAlias = (id) => `var(${transformName(id)})`;
+    return {
+        name: '@terrazzo/plugin-css',
+        async transform({ tokens, setTransform }) {
+            for (const id in tokens) {
+                if (!Object.hasOwn(tokens, id)) {
+                    continue;
+                }
+                const token = tokens[id];
+                const localID = transformName(id);
+                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 baseValue = { format: FORMAT_ID, mode };
+                            const { $value, aliasOf, partialAliasOf } = token.mode[mode];
+                            const output = transformBorderValue($value, { aliasOf, partialAliasOf, transformAlias });
+                            if (typeof output === 'string') {
+                                setTransform(id, { ...baseValue, localID, value: output });
+                            }
+                            else {
+                                const { width, color, style } = output;
+                                setTransform(id, {
+                                    ...baseValue,
+                                    localID,
+                                    value: [`var(${localID}-width)`, `var(${localID}-color)`, `var(${localID}-style)`].join(' '),
+                                });
+                                setTransform(id, { ...baseValue, localID: `${localID}-width`, value: width });
+                                setTransform(id, { ...baseValue, localID: `${localID}-color`, value: color });
+                                setTransform(id, { ...baseValue, localID: `${localID}-style`, value: style });
+                            }
+                        }
+                        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 currentMode = token.mode[mode];
+                            setTransform(id, {
+                                format: FORMAT_ID,
+                                localID,
+                                value: transformDimensionValue(currentMode.aliasOf ? makeAlias(currentMode.aliasOf) : currentMode.$value, { 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 }),
+                            });
+                        }
+                        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 baseValue = { format: FORMAT_ID, mode };
+                            const { $value, aliasOf, partialAliasOf } = token.mode[mode];
+                            const output = transformTransitionValue($value, { aliasOf, partialAliasOf, transformAlias });
+                            if (typeof output === 'string') {
+                                setTransform(id, { ...baseValue, localID, value: output });
+                            }
+                            else {
+                                const { duration, delay, timingFunction } = output;
+                                setTransform(id, {
+                                    ...baseValue,
+                                    localID,
+                                    value: [`var(${localID}-duration)`, `var(${localID}-delay)`, `var(${localID}-timingFunction)`].join(' '),
+                                });
+                                setTransform(id, { ...baseValue, localID: `${localID}-duration`, value: duration });
+                                setTransform(id, { ...baseValue, localID: `${localID}-delay`, value: delay });
+                                setTransform(id, { ...baseValue, localID: `${localID}-timingFunction`, value: timingFunction });
+                            }
+                        }
+                        break;
+                    }
+                    case 'typography': {
+                        for (const mode in token.mode) {
+                            const baseValue = { format: FORMAT_ID, mode };
+                            const { $value, aliasOf, partialAliasOf } = token.mode[mode];
+                            const output = transformTypographyValue($value, { aliasOf, partialAliasOf, transformAlias });
+                            setTransform(id, { ...baseValue, localID, value: output });
+                        }
+                        break;
+                    }
+                }
+            }
+        },
+        async build({ getTransforms, outputFile }) {
+            const output = [FILE_PREFIX, ''];
+            // :root
+            output.push(':root {');
+            const rootTokens = getTransforms({ format: 'css', mode: '.' });
+            for (const token of rootTokens) {
+                if (isTokenMatch(token.token.id, exclude ?? [])) {
+                    continue;
+                }
+                const localID = token.localID ?? token.token.id;
+                if (token.type === 'SINGLE_VALUE') {
+                    output.push(`  ${localID}: ${token.value};`);
+                }
+                else if (token.type === 'MULTI_VALUE') {
+                    for (const [name, value] of Object.entries(token.value)) {
+                        output.push(`  ${localID}-${name}: ${value};`);
+                    }
+                }
+            }
+            output.push('}');
+            for (const { selectors, tokens, mode } of modeSelectors ?? []) {
+                const selectorTokens = getTransforms({ format: 'css', select: tokens, mode });
+                if (!selectorTokens.length) {
+                    continue;
+                }
+                let indent = '  ';
+                for (const selector of selectors) {
+                    output.push('', `${selector} {`);
+                    if (selector.startsWith('@')) {
+                        output.push('  :root {');
+                        indent = '    ';
+                    }
+                    for (const token of selectorTokens) {
+                        if (token.token.aliasOf) {
+                            continue;
+                        }
+                        if (token.type === 'SINGLE_VALUE') {
+                            output.push(`${indent}${token.localID ?? token.token.id}: ${token.value};`);
+                        }
+                        else {
+                            for (const [name, subvalue] of Object.entries(token.value)) {
+                                output.push(`${indent}${token.localID ?? token.token.id}-${name}: ${subvalue};`);
+                            }
+                        }
+                    }
+                    if (selector.startsWith('@')) {
+                        output.push('  }');
+                    }
+                    output.push('}');
+                }
+            }
+            outputFile(filename, output.join('\n'));
+        },
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@terrazzo/plugin-css",
+  "description": "Generate CSS from your design tokens schema (requires @terrazzo/cli)",
+  "version": "0.0.0",
+  "author": {
+    "name": "Drew Powers",
+    "email": "drew@pow.rs"
+  },
+  "keywords": [
+    "design tokens",
+    "design tokens community group",
+    "design tokens format module",
+    "design system",
+    "dtcg",
+    "w3c design tokens",
+    "css"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "peerDependencies": {
+    "@terrazzo/cli": "*"
+  },
+  "dependencies": {
+    "@types/culori": "^2.1.0",
+    "@types/mime": "^3.0.4",
+    "culori": "^3.3.0",
+    "mime": "^3.0.0",
+    "svgo": "^3.2.0",
+    "@terrazzo/parser": "^0.0.0",
+    "@terrazzo/token-tools": "^0.0.0"
+  },
+  "devDependencies": {
+    "yaml": "^2.4.1",
+    "@terrazzo/cli": "^0.0.0"
+  },
+  "scripts": {
+    "build": "pnpm run build:clean && pnpm run build:ts && pnpm run build:license",
+    "build:clean": "del dist",
+    "build:ts": "tsc -p tsconfig.build.json",
+    "build:license": "node ../../scripts/inject-license.js @terrazzo/plugin-css dist/index.js",
+    "dev": "tsc -p tsconfig.build.json -w",
+    "lint": "biome check .",
+    "test": "pnpm run \"/^test:.*/\"",
+    "test:js": "vitest run",
+    "test:ts": "tsc --noEmit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,340 @@
+import type { Plugin } from '@terrazzo/parser';
+import { isTokenMatch, makeAlias } from '@terrazzo/token-tools';
+import {
+  makeCSSVar,
+  transformBooleanValue,
+  transformBorderValue,
+  transformColorValue,
+  transformCubicBezierValue,
+  transformDimensionValue,
+  transformDurationValue,
+  transformFontFamilyValue,
+  transformFontWeightValue,
+  transformGradientValue,
+  transformLinkValue,
+  transformNumberValue,
+  transformShadowValue,
+  transformStringValue,
+  transformStrokeStyleValue,
+  transformTransitionValue,
+  transformTypographyValue,
+} from '@terrazzo/token-tools/css';
+
+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[];
+}
+
+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 const FORMAT_ID = 'css';
+
+export const FILE_PREFIX = `/* -------------------------------------------
+ *  Autogenerated by 💠 Terrazzo. DO NOT EDIT!
+ * ------------------------------------------- */`;
+
+export default function cssPlugin({
+  filename = './index.css',
+  exclude,
+  variableName,
+  modeSelectors,
+}: CSSPluginOptions = {}): Plugin {
+  const transformName = (id: string) => variableName?.(id) || makeCSSVar(id);
+  const transformAlias = (id: string) => `var(${transformName(id)})`;
+
+  return {
+    name: '@terrazzo/plugin-css',
+    async transform({ tokens, setTransform }) {
+      for (const id in tokens) {
+        if (!Object.hasOwn(tokens, id)) {
+          continue;
+        }
+        const token = tokens[id]!;
+        const localID = transformName(id);
+
+        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 baseValue = { format: FORMAT_ID, mode };
+              const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
+              const output = transformBorderValue($value, { aliasOf, partialAliasOf, transformAlias });
+              if (typeof output === 'string') {
+                setTransform(id, { ...baseValue, localID, value: output });
+              } else {
+                const { width, color, style } = output;
+                setTransform(id, {
+                  ...baseValue,
+                  localID,
+                  value: [`var(${localID}-width)`, `var(${localID}-color)`, `var(${localID}-style)`].join(' '),
+                });
+                setTransform(id, { ...baseValue, localID: `${localID}-width`, value: width });
+                setTransform(id, { ...baseValue, localID: `${localID}-color`, value: color });
+                setTransform(id, { ...baseValue, localID: `${localID}-style`, value: style });
+              }
+            }
+            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 currentMode = token.mode[mode]!;
+              setTransform(id, {
+                format: FORMAT_ID,
+                localID,
+                value: transformDimensionValue(
+                  currentMode.aliasOf ? makeAlias(currentMode.aliasOf) : currentMode.$value,
+                  { 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 }),
+              });
+            }
+            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 baseValue = { format: FORMAT_ID, mode };
+              const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
+              const output = transformTransitionValue($value, { aliasOf, partialAliasOf, transformAlias });
+              if (typeof output === 'string') {
+                setTransform(id, { ...baseValue, localID, value: output });
+              } else {
+                const { duration, delay, timingFunction } = output;
+                setTransform(id, {
+                  ...baseValue,
+                  localID,
+                  value: [`var(${localID}-duration)`, `var(${localID}-delay)`, `var(${localID}-timingFunction)`].join(
+                    ' ',
+                  ),
+                });
+                setTransform(id, { ...baseValue, localID: `${localID}-duration`, value: duration });
+                setTransform(id, { ...baseValue, localID: `${localID}-delay`, value: delay });
+                setTransform(id, { ...baseValue, localID: `${localID}-timingFunction`, value: timingFunction });
+              }
+            }
+            break;
+          }
+          case 'typography': {
+            for (const mode in token.mode) {
+              const baseValue = { format: FORMAT_ID, mode };
+              const { $value, aliasOf, partialAliasOf } = token.mode[mode]!;
+              const output = transformTypographyValue($value, { aliasOf, partialAliasOf, transformAlias });
+              setTransform(id, { ...baseValue, localID, value: output });
+            }
+            break;
+          }
+        }
+      }
+    },
+    async build({ getTransforms, outputFile }) {
+      const output: string[] = [FILE_PREFIX, ''];
+
+      // :root
+      output.push(':root {');
+      const rootTokens = getTransforms({ format: 'css', mode: '.' });
+      for (const token of rootTokens) {
+        if (isTokenMatch(token.token.id, exclude ?? [])) {
+          continue;
+        }
+        const localID = token.localID ?? token.token.id;
+        if (token.type === 'SINGLE_VALUE') {
+          output.push(`  ${localID}: ${token.value};`);
+        } else if (token.type === 'MULTI_VALUE') {
+          for (const [name, value] of Object.entries(token.value)) {
+            output.push(`  ${localID}-${name}: ${value};`);
+          }
+        }
+      }
+      output.push('}');
+
+      for (const { selectors, tokens, mode } of modeSelectors ?? []) {
+        const selectorTokens = getTransforms({ format: 'css', select: tokens, mode });
+        if (!selectorTokens.length) {
+          continue;
+        }
+
+        let indent = '  ';
+        for (const selector of selectors) {
+          output.push('', `${selector} {`);
+          if (selector.startsWith('@')) {
+            output.push('  :root {');
+            indent = '    ';
+          }
+          for (const token of selectorTokens) {
+            if (token.token.aliasOf) {
+              continue;
+            }
+
+            if (token.type === 'SINGLE_VALUE') {
+              output.push(`${indent}${token.localID ?? token.token.id}: ${token.value};`);
+            } else {
+              for (const [name, subvalue] of Object.entries(token.value)) {
+                output.push(`${indent}${token.localID ?? token.token.id}-${name}: ${subvalue};`);
+              }
+            }
+          }
+          if (selector.startsWith('@')) {
+            output.push('  }');
+          }
+          output.push('}');
+        }
+      }
+
+      outputFile(filename, output.join('\n'));
+    },
+  };
+}