@terrazzo/plugin-css 0.0.3 → 0.0.5

package/README.md

@@ -1,5 +1,5 @@
-# 💠 @terrazzo/plugin-css
+# ⛋ @terrazzo/plugin-css
 
 CSS codegen plugin for @terrazzo/cli. Generate CSS using DTCG tokens.
 
-[View Documentation](https://terrazzi-docs-beta.pages.dev)
+[View Documentation](https://terrazzo.app/docs/integrations/css)

package/dist/build.d.ts

@@ -0,0 +1,8 @@
+import type { BuildHookOptions } from '@terrazzo/parser';
+import { type CSSPluginOptions } from './lib.js';
+export interface BuildFormatOptions {
+    exclude: CSSPluginOptions['exclude'];
+    getTransforms: BuildHookOptions['getTransforms'];
+    modeSelectors: CSSPluginOptions['modeSelectors'];
+}
+export default function buildFormat({ getTransforms, exclude, modeSelectors }: BuildFormatOptions): string;

package/dist/build.js

@@ -0,0 +1,94 @@
+import { isTokenMatch } from '@terrazzo/token-tools';
+import { generateShorthand } from '@terrazzo/token-tools/css';
+import { printRules, FORMAT_ID } from './lib.js';
+const P3_MQ = '@media (color-gamut: p3)';
+const REC2020_MQ = '@media (color-gamut: rec2020)';
+export default function buildFormat({ getTransforms, exclude, modeSelectors }) {
+    const rules = [];
+    // :root
+    const rootTokens = getTransforms({ format: FORMAT_ID, mode: '.' });
+    if (rootTokens.length) {
+        const rootRule = { selectors: [':root'], declarations: {} };
+        // note: "nestedQuery" was designed specifically for higher-gamut colors to
+        // apply color-gamut media queries to existing selectors (i.e. keep the same
+        // targets, and apply another nested layer of media query filtering based on
+        // hardware). Because of how CSS works they need to get built out into their
+        // own selectors that have different structures depending on whether
+        // `selectors` has a media query or not.
+        const p3Rule = { selectors: [':root'], nestedQuery: P3_MQ, declarations: {} };
+        const rec2020Rule = { selectors: [':root'], nestedQuery: REC2020_MQ, declarations: {} };
+        rules.push(rootRule, p3Rule, rec2020Rule);
+        for (const token of rootTokens) {
+            if (isTokenMatch(token.token.id, exclude ?? [])) {
+                continue;
+            }
+            const localID = token.localID ?? token.token.id;
+            // single-value token
+            if (token.type === 'SINGLE_VALUE') {
+                rootRule.declarations[localID] = token.value;
+            }
+            // multi-value token (wide gamut color)
+            else if (token.value.srgb && token.value.p3 && token.value.rec2020) {
+                rootRule.declarations[localID] = token.value.srgb;
+                if (token.value.p3 !== token.value.srgb) {
+                    p3Rule.declarations[localID] = token.value.p3;
+                    rec2020Rule.declarations[localID] = token.value.rec2020;
+                }
+            }
+            // multi-value token
+            else if (token.type === 'MULTI_VALUE') {
+                const shorthand = generateShorthand({ $type: token.token.$type, localID });
+                if (shorthand) {
+                    rootRule.declarations[token.localID ?? token.token.id] = shorthand;
+                }
+                for (const [name, value] of Object.entries(token.value)) {
+                    rootRule.declarations[name === '.' ? localID : [localID, name].join('-')] = value;
+                }
+            }
+        }
+    }
+    // modeSelectors (note: without these, modes won’t get written to CSS)
+    for (const { selectors, tokens, mode } of modeSelectors ?? []) {
+        if (!selectors.length) {
+            continue;
+        }
+        const selectorTokens = getTransforms({ format: 'css', id: tokens, mode });
+        if (!selectorTokens.length) {
+            continue;
+        }
+        const selectorRule = { selectors, declarations: {} };
+        const selectorP3Rule = { selectors, nestedQuery: P3_MQ, declarations: {} };
+        const selectorRec2020Rule = { selectors, nestedQuery: REC2020_MQ, declarations: {} };
+        rules.push(selectorRule, selectorP3Rule, selectorRec2020Rule);
+        for (const token of selectorTokens) {
+            if (token.token.aliasOf) {
+                continue;
+            }
+            const localID = token.localID ?? token.token.id;
+            // single-value token
+            if (token.type === 'SINGLE_VALUE') {
+                selectorRule.declarations[localID] = token.value;
+            }
+            // multi-value token (wide gamut color)
+            else if (token.value.srgb && token.value.p3 && token.value.rec2020) {
+                selectorRule.declarations[localID] = token.value.srgb;
+                if (token.value.p3 !== token.value.srgb) {
+                    selectorP3Rule.declarations[localID] = token.value.p3;
+                    selectorRec2020Rule.declarations[localID] = token.value.rec2020;
+                }
+            }
+            // multi-value token
+            else {
+                const shorthand = generateShorthand({ $type: token.token.$type, localID });
+                if (shorthand) {
+                    selectorRule.declarations[localID] = shorthand;
+                }
+                for (const [name, subvalue] of Object.entries(token.value)) {
+                    selectorRule.declarations[`${localID}-${name}`] = subvalue;
+                }
+            }
+        }
+    }
+    return printRules(rules);
+}
+//# sourceMappingURL=build.js.map

package/dist/build.js.map

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

package/dist/index.d.ts

@@ -1,22 +1,5 @@
 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;
+import { type CSSPluginOptions } from './lib.js';
+export * from './build.js';
+export * from './lib.js';
+export default function cssPlugin({ filename, exclude, variableName, modeSelectors, transform: customTransform, }?: CSSPluginOptions): Plugin;

package/dist/index.js

@@ -22,279 +22,45 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { isTokenMatch } from '@terrazzo/token-tools';
-import { generateShorthand, 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, } = {}) {
+import { makeCSSVar, transformCSSValue } from '@terrazzo/token-tools/css';
+import { FILE_PREFIX, FORMAT_ID } from './lib.js';
+import buildFormat from './build.js';
+import { validateCustomTransform } from '@terrazzo/token-tools';
+export * from './build.js';
+export * from './lib.js';
+export default function cssPlugin({ filename = './index.css', exclude, variableName, modeSelectors, transform: customTransform, } = {}) {
     const transformName = (id) => variableName?.(id) || makeCSSVar(id);
     const transformAlias = (id) => `var(${transformName(id)})`;
     return {
         name: '@terrazzo/plugin-css',
-        async transform({ tokens, setTransform }) {
+        async transform({ tokens, getTransforms, setTransform }) {
+            // skip work if another .css plugin has already run
+            const cssTokens = getTransforms({ format: FORMAT_ID, id: '*', mode: '*' });
+            if (cssTokens.length) {
+                return;
+            }
             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 { $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 }),
-                            });
-                        }
-                        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,
-                            });
+                for (const mode in token.mode) {
+                    if (customTransform) {
+                        const value = customTransform(token, mode);
+                        if (value !== undefined && value !== null) {
+                            validateCustomTransform(value, { $type: token.$type });
+                            setTransform(id, { format: FORMAT_ID, localID, value, mode });
+                            continue;
                         }
-                        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;
+                    const transformedValue = transformCSSValue(token, { mode, transformAlias });
+                    if (transformedValue !== undefined) {
+                        setTransform(id, { format: FORMAT_ID, localID, value: transformedValue, mode });
                     }
                 }
             }
         },
         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') {
-                    const shorthand = generateShorthand({ $type: token.token.$type, localID });
-                    if (shorthand) {
-                        output.push(`  ${token.localID ?? token.token.id}: ${shorthand};`);
-                    }
-                    for (const [name, value] of Object.entries(token.value)) {
-                        output.push(`  ${name === '.' ? localID : [localID, name].join('-')}: ${value};`);
-                    }
-                }
-            }
-            output.push('}');
-            for (const { selectors, tokens, mode } of modeSelectors ?? []) {
-                const selectorTokens = getTransforms({ format: 'css', id: 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;
-                        }
-                        const localID = token.localID ?? token.token.id;
-                        if (token.type === 'SINGLE_VALUE') {
-                            output.push(`${indent}${localID}: ${token.value};`);
-                        }
-                        else {
-                            const shorthand = generateShorthand({ $type: token.token.$type, localID });
-                            if (shorthand) {
-                                output.push(`${indent}${localID}: ${shorthand};`);
-                            }
-                            for (const [name, subvalue] of Object.entries(token.value)) {
-                                output.push(`${indent}${localID}-${name}: ${subvalue};`);
-                            }
-                        }
-                    }
-                    if (selector.startsWith('@')) {
-                        output.push('  }');
-                    }
-                    output.push('}');
-                }
-            }
+            output.push(buildFormat({ exclude, getTransforms, modeSelectors }), '\n');
             outputFile(filename, output.join('\n'));
         },
     };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,SAAS,EAAyB,MAAM,UAAU,CAAC;AACzE,OAAO,WAAW,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AAEzB,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAChC,QAAQ,GAAG,aAAa,EACxB,OAAO,EACP,YAAY,EACZ,aAAa,EACb,SAAS,EAAE,eAAe,MACN,EAAE;IACtB,MAAM,aAAa,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,YAAY,EAAE,CAAC,EAAE,CAAC,IAAI,UAAU,CAAC,EAAE,CAAC,CAAC;IAC3E,MAAM,cAAc,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,OAAO,aAAa,CAAC,EAAE,CAAC,GAAG,CAAC;IAEnE,OAAO;QACL,IAAI,EAAE,sBAAsB;QAC5B,KAAK,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE;YACrD,mDAAmD;YACnD,MAAM,SAAS,GAAG,aAAa,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;YAC3E,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC;gBACrB,OAAO;YACT,CAAC;YAED,KAAK,MAAM,EAAE,IAAI,MAAM,EAAE,CAAC;gBACxB,MAAM,KAAK,GAAG,MAAM,CAAC,EAAE,CAAE,CAAC;gBAC1B,MAAM,OAAO,GAAG,aAAa,CAAC,EAAE,CAAC,CAAC;gBAClC,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;oBAC9B,IAAI,eAAe,EAAE,CAAC;wBACpB,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;wBAC3C,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;4BAC1C,uBAAuB,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC;4BACvD,YAAY,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;4BAC9D,SAAS;wBACX,CAAC;oBACH,CAAC;oBAED,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAC;oBAC5E,IAAI,gBAAgB,KAAK,SAAS,EAAE,CAAC;wBACnC,YAAY,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,CAAC;oBAClF,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;QACD,KAAK,CAAC,KAAK,CAAC,EAAE,aAAa,EAAE,UAAU,EAAE;YACvC,MAAM,MAAM,GAAa,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;YAC3C,MAAM,CAAC,IAAI,CACT,WAAW,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC,EACtD,IAAI,CACL,CAAC;YACF,UAAU,CAAC,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC1C,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/lib.d.ts

@@ -0,0 +1,34 @@
+import type { TokenNormalized, TokenTransformed } from '@terrazzo/parser';
+export declare const FORMAT_ID = "css";
+export declare const FILE_PREFIX = "/* -------------------------------------------\n *  Autogenerated by \u26CB Terrazzo. DO NOT EDIT!\n * ------------------------------------------- */";
+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;
+    /** Override certain token values */
+    transform?: (token: TokenNormalized, mode: string) => TokenTransformed['value'];
+}
+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 CSSRule {
+    selectors: string[];
+    nestedQuery?: string;
+    declarations: Record<string, string>;
+}
+/** Convert CSSRules into a formatted, indented CSS string */
+export declare function printRules(rules: CSSRule[]): string;
+export interface GetRuleOptions {
+    /** Combine a selector with parent selectors (e.g. if adding a @media-query within another selector list) */
+    parentSelectors?: string[];
+}

package/dist/lib.js

@@ -0,0 +1,64 @@
+export const FORMAT_ID = 'css';
+export const FILE_PREFIX = `/* -------------------------------------------
+ *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
+ * ------------------------------------------- */`;
+/** Convert CSSRules into a formatted, indented CSS string */
+export function printRules(rules) {
+    const output = [];
+    for (const rule of rules) {
+        if (!rule.selectors.length || !Object.keys(rule.declarations).length) {
+            continue;
+        }
+        const mqSelectors = [];
+        const joinableSelectors = [];
+        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) {
+    const output = [];
+    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');
+}
+//# sourceMappingURL=lib.js.map

package/dist/lib.js.map

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@terrazzo/plugin-css",
   "description": "Generate CSS from your design tokens schema (requires @terrazzo/cli)",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "author": {
     "name": "Drew Powers",
     "email": "drew@pow.rs"
@@ -26,13 +26,13 @@
     "@types/mime": "^3.0.4",
     "culori": "^3.3.0",
     "mime": "^3.0.0",
-    "svgo": "^3.2.0",
-    "@terrazzo/parser": "^0.0.5",
-    "@terrazzo/token-tools": "^0.0.1"
+    "svgo": "^3.3.2",
+    "@terrazzo/parser": "^0.0.7",
+    "@terrazzo/token-tools": "^0.0.3"
   },
   "devDependencies": {
-    "yaml": "^2.4.1",
-    "@terrazzo/cli": "^0.0.5"
+    "yaml": "^2.4.3",
+    "@terrazzo/cli": "^0.0.7"
   },
   "scripts": {
     "build": "pnpm run build:clean && pnpm run build:ts && pnpm run build:license",

package/src/build.ts

@@ -0,0 +1,108 @@
+import type { BuildHookOptions } from '@terrazzo/parser';
+import { isTokenMatch } from '@terrazzo/token-tools';
+import { generateShorthand } from '@terrazzo/token-tools/css';
+import { type CSSPluginOptions, type CSSRule, printRules, FORMAT_ID } from './lib.js';
+
+const P3_MQ = '@media (color-gamut: p3)';
+const REC2020_MQ = '@media (color-gamut: rec2020)';
+
+export interface BuildFormatOptions {
+  exclude: CSSPluginOptions['exclude'];
+  getTransforms: BuildHookOptions['getTransforms'];
+  modeSelectors: CSSPluginOptions['modeSelectors'];
+}
+
+export default function buildFormat({ getTransforms, exclude, modeSelectors }: BuildFormatOptions): string {
+  const rules: CSSRule[] = [];
+
+  // :root
+  const rootTokens = getTransforms({ format: FORMAT_ID, mode: '.' });
+  if (rootTokens.length) {
+    const rootRule: CSSRule = { selectors: [':root'], declarations: {} };
+    // note: "nestedQuery" was designed specifically for higher-gamut colors to
+    // apply color-gamut media queries to existing selectors (i.e. keep the same
+    // targets, and apply another nested layer of media query filtering based on
+    // hardware). Because of how CSS works they need to get built out into their
+    // own selectors that have different structures depending on whether
+    // `selectors` has a media query or not.
+    const p3Rule: CSSRule = { selectors: [':root'], nestedQuery: P3_MQ, declarations: {} };
+    const rec2020Rule: CSSRule = { selectors: [':root'], nestedQuery: REC2020_MQ, declarations: {} };
+    rules.push(rootRule, p3Rule, rec2020Rule);
+
+    for (const token of rootTokens) {
+      if (isTokenMatch(token.token.id, exclude ?? [])) {
+        continue;
+      }
+      const localID = token.localID ?? token.token.id;
+      // single-value token
+      if (token.type === 'SINGLE_VALUE') {
+        rootRule.declarations[localID] = token.value;
+      }
+      // multi-value token (wide gamut color)
+      else if (token.value.srgb && token.value.p3 && token.value.rec2020) {
+        rootRule.declarations[localID] = token.value.srgb!;
+        if (token.value.p3 !== token.value.srgb) {
+          p3Rule.declarations[localID] = token.value.p3!;
+          rec2020Rule.declarations[localID] = token.value.rec2020!;
+        }
+      }
+      // multi-value token
+      else if (token.type === 'MULTI_VALUE') {
+        const shorthand = generateShorthand({ $type: token.token.$type, localID });
+        if (shorthand) {
+          rootRule.declarations[token.localID ?? token.token.id] = shorthand;
+        }
+        for (const [name, value] of Object.entries(token.value)) {
+          rootRule.declarations[name === '.' ? localID : [localID, name].join('-')] = value;
+        }
+      }
+    }
+  }
+
+  // modeSelectors (note: without these, modes won’t get written to CSS)
+  for (const { selectors, tokens, mode } of modeSelectors ?? []) {
+    if (!selectors.length) {
+      continue;
+    }
+    const selectorTokens = getTransforms({ format: 'css', id: tokens, mode });
+    if (!selectorTokens.length) {
+      continue;
+    }
+
+    const selectorRule: CSSRule = { selectors, declarations: {} };
+    const selectorP3Rule: CSSRule = { selectors, nestedQuery: P3_MQ, declarations: {} };
+    const selectorRec2020Rule: CSSRule = { selectors, nestedQuery: REC2020_MQ, declarations: {} };
+    rules.push(selectorRule, selectorP3Rule, selectorRec2020Rule);
+
+    for (const token of selectorTokens) {
+      if (token.token.aliasOf) {
+        continue;
+      }
+      const localID = token.localID ?? token.token.id;
+      // single-value token
+      if (token.type === 'SINGLE_VALUE') {
+        selectorRule.declarations[localID] = token.value;
+      }
+      // multi-value token (wide gamut color)
+      else if (token.value.srgb && token.value.p3 && token.value.rec2020) {
+        selectorRule.declarations[localID] = token.value.srgb!;
+        if (token.value.p3 !== token.value.srgb) {
+          selectorP3Rule.declarations[localID] = token.value.p3!;
+          selectorRec2020Rule.declarations[localID] = token.value.rec2020!;
+        }
+      }
+      // multi-value token
+      else {
+        const shorthand = generateShorthand({ $type: token.token.$type, localID });
+        if (shorthand) {
+          selectorRule.declarations[localID] = shorthand;
+        }
+        for (const [name, subvalue] of Object.entries(token.value)) {
+          selectorRule.declarations[`${localID}-${name}`] = subvalue;
+        }
+      }
+    }
+  }
+
+  return printRules(rules);
+}

package/src/index.ts

@@ -1,328 +1,57 @@
 import type { Plugin } from '@terrazzo/parser';
-import { isTokenMatch } from '@terrazzo/token-tools';
-import {
-  generateShorthand,
-  makeCSSVar,
-  transformBooleanValue,
-  transformBorderValue,
-  transformColorValue,
-  transformCubicBezierValue,
-  transformDimensionValue,
-  transformDurationValue,
-  transformFontFamilyValue,
-  transformFontWeightValue,
-  transformGradientValue,
-  transformLinkValue,
-  transformNumberValue,
-  transformShadowValue,
-  transformStringValue,
-  transformStrokeStyleValue,
-  transformTransitionValue,
-  transformTypographyValue,
-} from '@terrazzo/token-tools/css';
+import { makeCSSVar, transformCSSValue } from '@terrazzo/token-tools/css';
+import { FILE_PREFIX, FORMAT_ID, type CSSPluginOptions } from './lib.js';
+import buildFormat from './build.js';
+import { validateCustomTransform } from '@terrazzo/token-tools';
 
-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 * from './build.js';
+export * from './lib.js';
 
 export default function cssPlugin({
   filename = './index.css',
   exclude,
   variableName,
   modeSelectors,
+  transform: customTransform,
 }: 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 }) {
+    async transform({ tokens, getTransforms, setTransform }) {
+      // skip work if another .css plugin has already run
+      const cssTokens = getTransforms({ format: FORMAT_ID, id: '*', mode: '*' });
+      if (cssTokens.length) {
+        return;
+      }
+
       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 { $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 }),
-              });
-            }
-            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,
-              });
+        for (const mode in token.mode) {
+          if (customTransform) {
+            const value = customTransform(token, mode);
+            if (value !== undefined && value !== null) {
+              validateCustomTransform(value, { $type: token.$type });
+              setTransform(id, { format: FORMAT_ID, localID, value, mode });
+              continue;
             }
-            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;
+
+          const transformedValue = transformCSSValue(token, { mode, transformAlias });
+          if (transformedValue !== undefined) {
+            setTransform(id, { format: FORMAT_ID, localID, value: transformedValue, mode });
           }
         }
       }
     },
     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') {
-          const shorthand = generateShorthand({ $type: token.token.$type, localID });
-          if (shorthand) {
-            output.push(`  ${token.localID ?? token.token.id}: ${shorthand};`);
-          }
-          for (const [name, value] of Object.entries(token.value)) {
-            output.push(`  ${name === '.' ? localID : [localID, name].join('-')}: ${value};`);
-          }
-        }
-      }
-      output.push('}');
-
-      for (const { selectors, tokens, mode } of modeSelectors ?? []) {
-        const selectorTokens = getTransforms({ format: 'css', id: 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;
-            }
-            const localID = token.localID ?? token.token.id;
-            if (token.type === 'SINGLE_VALUE') {
-              output.push(`${indent}${localID}: ${token.value};`);
-            } else {
-              const shorthand = generateShorthand({ $type: token.token.$type, localID });
-              if (shorthand) {
-                output.push(`${indent}${localID}: ${shorthand};`);
-              }
-              for (const [name, subvalue] of Object.entries(token.value)) {
-                output.push(`${indent}${localID}-${name}: ${subvalue};`);
-              }
-            }
-          }
-          if (selector.startsWith('@')) {
-            output.push('  }');
-          }
-          output.push('}');
-        }
-      }
-
+      output.push(
+        buildFormat({ exclude, getTransforms, modeSelectors }),
+        '\n', // EOF newline
+      );
       outputFile(filename, output.join('\n'));
     },
   };

package/src/lib.ts

@@ -0,0 +1,110 @@
+import type { TokenNormalized, TokenTransformed } from '@terrazzo/parser';
+
+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;
+  /** Override certain token values */
+  transform?: (token: TokenNormalized, mode: string) => TokenTransformed['value'];
+}
+
+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[];
+}