@primer/primitives 10.0.0-rc.fd912e08 → 10.0.0

package/README.md

@@ -138,10 +138,10 @@ In this case you can create the follwing structure. The `@` will be removed from
   bgColor: {
     accent: {
       '@': {
-        // values for accent (default)
+        // values for bgColor-accent (default)
       },
       muted: {
-        // values for accent-muted
+        // values for bgColor-accent-muted
       },
     },
   },

package/dist/build/PrimerStyleDictionary.d.ts

@@ -0,0 +1,8 @@
+import StyleDictionary from 'style-dictionary';
+/**
+ * @name {@link PrimerStyleDictionary}
+ * @description Returns style dictionary object with primer preset that includes parsers, formats and transformers
+ * @formats [javascript/esm](https://github.com/primer/primitives/blob/main/config/formats/javascript-esm.ts), [javascript/commonJs](https://github.com/primer/primitives/blob/main/config/formats/javascript-commonJs.ts), [typescript/export-definition](https://github.com/primer/primitives/blob/main/config/formats/typescript-export-defition.ts)
+ * @transformers [color/rgbAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-rgb-alpha.ts), [color/hexAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex-alpha.ts), [color/hex](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex6.ts), [json/deprecated](https://github.com/primer/primitives/blob/main/config/tranformers/json-deprecated.ts), [name/pathToDotNotation](https://github.com/primer/primitives/blob/main/config/tranformers/name-path-to-dot-notation.ts)
+ */
+export declare const PrimerStyleDictionary: StyleDictionary;

package/dist/build/PrimerStyleDictionary.js

@@ -0,0 +1,80 @@
+import StyleDictionary from 'style-dictionary';
+import { borderToCss, colorToRgbAlpha, colorToHex, colorToHexMix, colorToRgbaFloat, cubicBezierToCss, dimensionToRem, dimensionToPixelUnitless, durationToCss, figmaAttributes, fontFamilyToCss, fontFamilyToFigma, fontWeightToNumber, jsonDeprecated, namePathToDotNotation, namePathToCamelCase, namePathToPascalCase, namePathToKebabCase, namePathToSlashNotation, namePathToFigma, shadowToCss, typographyToCss, dimensionToRemPxArray, floatToPixel, floatToPixelUnitless, } from './transformers/index.js';
+import { javascriptCommonJs, javascriptEsm, typescriptExportDefinition, jsonNestedPrefixed, cssCustomMedia, jsonOneDimensional, jsonPostCssFallback, cssAdvanced, jsonFigma, } from './formats/index.js';
+/**
+ * @name {@link PrimerStyleDictionary}
+ * @description Returns style dictionary object with primer preset that includes parsers, formats and transformers
+ * @formats [javascript/esm](https://github.com/primer/primitives/blob/main/config/formats/javascript-esm.ts), [javascript/commonJs](https://github.com/primer/primitives/blob/main/config/formats/javascript-commonJs.ts), [typescript/export-definition](https://github.com/primer/primitives/blob/main/config/formats/typescript-export-defition.ts)
+ * @transformers [color/rgbAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-rgb-alpha.ts), [color/hexAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex-alpha.ts), [color/hex](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex6.ts), [json/deprecated](https://github.com/primer/primitives/blob/main/config/tranformers/json-deprecated.ts), [name/pathToDotNotation](https://github.com/primer/primitives/blob/main/config/tranformers/name-path-to-dot-notation.ts)
+ */
+export const PrimerStyleDictionary = new StyleDictionary();
+/**
+ * Formats
+ *
+ */
+PrimerStyleDictionary.registerFormat({
+    name: 'css/advanced',
+    format: cssAdvanced,
+});
+PrimerStyleDictionary.registerFormat({
+    name: 'css/customMedia',
+    format: cssCustomMedia,
+});
+PrimerStyleDictionary.registerFormat({
+    name: 'javascript/esm',
+    format: javascriptEsm,
+});
+PrimerStyleDictionary.registerFormat({
+    name: 'javascript/commonJs',
+    format: javascriptCommonJs,
+});
+PrimerStyleDictionary.registerFormat({
+    name: 'typescript/export-definition',
+    format: typescriptExportDefinition,
+});
+PrimerStyleDictionary.registerFormat({
+    name: 'json/nested-prefixed',
+    format: jsonNestedPrefixed,
+});
+PrimerStyleDictionary.registerFormat({
+    name: 'json/one-dimensional',
+    format: jsonOneDimensional,
+});
+PrimerStyleDictionary.registerFormat({
+    name: 'json/postCss-fallback',
+    format: jsonPostCssFallback,
+});
+PrimerStyleDictionary.registerFormat({
+    name: 'json/figma',
+    format: jsonFigma,
+});
+/**
+ * Transformers
+ *
+ */
+PrimerStyleDictionary.registerTransform(colorToRgbAlpha);
+PrimerStyleDictionary.registerTransform(colorToRgbaFloat);
+PrimerStyleDictionary.registerTransform(colorToHexMix);
+PrimerStyleDictionary.registerTransform(colorToHex);
+PrimerStyleDictionary.registerTransform(cubicBezierToCss);
+PrimerStyleDictionary.registerTransform(floatToPixel);
+PrimerStyleDictionary.registerTransform(floatToPixelUnitless);
+PrimerStyleDictionary.registerTransform(dimensionToRem);
+PrimerStyleDictionary.registerTransform(dimensionToRemPxArray);
+PrimerStyleDictionary.registerTransform(dimensionToPixelUnitless);
+PrimerStyleDictionary.registerTransform(durationToCss);
+PrimerStyleDictionary.registerTransform(figmaAttributes);
+PrimerStyleDictionary.registerTransform(jsonDeprecated);
+PrimerStyleDictionary.registerTransform(namePathToCamelCase);
+PrimerStyleDictionary.registerTransform(namePathToPascalCase);
+PrimerStyleDictionary.registerTransform(namePathToDotNotation);
+PrimerStyleDictionary.registerTransform(namePathToFigma);
+PrimerStyleDictionary.registerTransform(namePathToCamelCase);
+PrimerStyleDictionary.registerTransform(namePathToKebabCase);
+PrimerStyleDictionary.registerTransform(namePathToSlashNotation);
+PrimerStyleDictionary.registerTransform(shadowToCss);
+PrimerStyleDictionary.registerTransform(borderToCss);
+PrimerStyleDictionary.registerTransform(typographyToCss);
+PrimerStyleDictionary.registerTransform(fontWeightToNumber);
+PrimerStyleDictionary.registerTransform(fontFamilyToCss);
+PrimerStyleDictionary.registerTransform(fontFamilyToFigma);

package/dist/build/filters/index.d.ts

@@ -0,0 +1,14 @@
+export { isBorder } from './isBorder.js';
+export { isColor } from './isColor.js';
+export { isColorWithAlpha } from './isColorWithAlpha.js';
+export { isColorWithMix } from './isColorWithMix.js';
+export { isDimension } from './isDimension.js';
+export { isDeprecated } from './isDeprecated.js';
+export { isDuration } from './isDuration.js';
+export { isFromFile } from './isFromFile.js';
+export { isFontFamily } from './isFontFamily.js';
+export { isFontWeight } from './isFontWeight.js';
+export { isNumber } from './isNumber.js';
+export { isShadow } from './isShadow.js';
+export { isSource } from './isSource.js';
+export { isTypography } from './isTypography.js';

package/dist/build/filters/index.js

@@ -0,0 +1,14 @@
+export { isBorder } from './isBorder.js';
+export { isColor } from './isColor.js';
+export { isColorWithAlpha } from './isColorWithAlpha.js';
+export { isColorWithMix } from './isColorWithMix.js';
+export { isDimension } from './isDimension.js';
+export { isDeprecated } from './isDeprecated.js';
+export { isDuration } from './isDuration.js';
+export { isFromFile } from './isFromFile.js';
+export { isFontFamily } from './isFontFamily.js';
+export { isFontWeight } from './isFontWeight.js';
+export { isNumber } from './isNumber.js';
+export { isShadow } from './isShadow.js';
+export { isSource } from './isSource.js';
+export { isTypography } from './isTypography.js';

package/dist/build/filters/isBorder.d.ts

@@ -0,0 +1,7 @@
+import type { TransformedToken } from 'style-dictionary/types';
+/**
+ * @description Checks if token is of $type `border`
+ * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export declare const isBorder: (token: TransformedToken) => boolean;

package/dist/build/filters/isBorder.js

@@ -0,0 +1,8 @@
+/**
+ * @description Checks if token is of $type `border`
+ * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export const isBorder = (token) => {
+    return token.$type === 'border';
+};

package/dist/build/filters/isColor.d.ts

@@ -0,0 +1,7 @@
+import type { TransformedToken } from 'style-dictionary/types';
+/**
+ * @description Checks if token is of $type `color`
+ * @param token [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export declare const isColor: (token: TransformedToken) => boolean;

package/dist/build/filters/isColor.js

@@ -0,0 +1,13 @@
+/**
+ * @description Checks if token is of $type `color`
+ * @param token [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export const isColor = (token) => {
+    var _a;
+    const typeValue = (_a = token.$type) !== null && _a !== void 0 ? _a : token.type;
+    // if (token.path.join('-') === 'control-transparent-bgColor-selected') {
+    //   console.log(typeValue === 'color', token)
+    // }
+    return typeValue === 'color';
+};

package/dist/build/filters/isColorWithAlpha.d.ts

@@ -0,0 +1,7 @@
+import type { TransformedToken } from 'style-dictionary/types';
+/**
+ * @description Checks if token is color with an alpha value
+ * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export declare const isColorWithAlpha: (token: TransformedToken) => boolean;

package/dist/build/filters/isColorWithAlpha.js

@@ -0,0 +1,9 @@
+import { isColor } from './isColor.js';
+/**
+ * @description Checks if token is color with an alpha value
+ * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export const isColorWithAlpha = (token) => {
+    return isColor(token) && token.alpha !== undefined && typeof token.alpha === 'number';
+};

package/dist/build/filters/isColorWithMix.d.ts

@@ -0,0 +1,7 @@
+import type { TransformedToken } from 'style-dictionary/types';
+/**
+ * @description Checks if token is color and has a mix property
+ * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export declare const isColorWithMix: (token: TransformedToken) => boolean;

package/dist/build/filters/isColorWithMix.js

@@ -0,0 +1,24 @@
+import { isColor } from './isColor.js';
+const throwError = (token) => {
+    throw new Error(`Invalid mix property on token: ${token.name}. "mix.color": ${token.mix.color}, "mix.weight": ${typeof token.mix.weight === 'string' ? `"${token.mix.weight}" (string)` : token.mix.weight} must be a number between 0 and 1. In file: "${token.filePath}".`);
+};
+/**
+ * @description Checks if token is color and has a mix property
+ * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export const isColorWithMix = (token) => {
+    // no color or no mix property
+    if (!isColor(token) || token.mix === undefined || token.mix === null) {
+        return false;
+    }
+    // invalid mix property
+    if (typeof token.mix.color !== 'string' ||
+        typeof token.mix.weight !== 'number' ||
+        token.mix.weight < 0 ||
+        token.mix.weight > 1) {
+        throwError(token);
+    }
+    // valid mix property
+    return true;
+};

package/dist/build/filters/isCubicBezier.d.ts

@@ -0,0 +1,7 @@
+import type { TransformedToken } from 'style-dictionary/types';
+/**
+ * @description Checks if token is of $type `cubicBezier`
+ * @param token [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export declare const isCubicBezier: (token: TransformedToken) => boolean;

package/dist/build/filters/isCubicBezier.js

@@ -0,0 +1,10 @@
+/**
+ * @description Checks if token is of $type `cubicBezier`
+ * @param token [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export const isCubicBezier = (token) => {
+    var _a;
+    const typeValue = (_a = token.$type) !== null && _a !== void 0 ? _a : token.type;
+    return typeValue === 'cubicBezier';
+};

package/dist/build/filters/isDeprecated.d.ts

@@ -0,0 +1,7 @@
+import type { TransformedToken } from 'style-dictionary/types';
+/**
+ * @description Checks if token has a valid `deprecated` property
+ * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export declare const isDeprecated: (token: TransformedToken) => boolean;

package/dist/build/filters/isDeprecated.js

@@ -0,0 +1,8 @@
+/**
+ * @description Checks if token has a valid `deprecated` property
+ * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export const isDeprecated = (token) => {
+    return token.$deprecated === true || typeof token.$deprecated === 'string';
+};

package/dist/build/filters/isDimension.d.ts

@@ -0,0 +1,7 @@
+import type { TransformedToken } from 'style-dictionary/types';
+/**
+ * @description Checks if token is of $type `dimension`
+ * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export declare const isDimension: (token: TransformedToken) => boolean;

package/dist/build/filters/isDimension.js

@@ -0,0 +1,8 @@
+/**
+ * @description Checks if token is of $type `dimension`
+ * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export const isDimension = (token) => {
+    return token.$type === 'dimension';
+};

package/dist/build/filters/isDuration.d.ts

@@ -0,0 +1,7 @@
+import type { TransformedToken } from 'style-dictionary/types';
+/**
+ * @description Checks if token is of $type `duration`
+ * @param token [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export declare const isDuration: (token: TransformedToken) => boolean;

package/dist/build/filters/isDuration.js

@@ -0,0 +1,8 @@
+/**
+ * @description Checks if token is of $type `duration`
+ * @param token [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export const isDuration = (token) => {
+    return token.$type === 'duration';
+};

package/dist/build/filters/isFontFamily.d.ts

@@ -0,0 +1,7 @@
+import type { TransformedToken } from 'style-dictionary/types';
+/**
+ * @description Checks if token is of $type `isFontFamily`
+ * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export declare const isFontFamily: (token: TransformedToken) => boolean;

package/dist/build/filters/isFontFamily.js

@@ -0,0 +1,8 @@
+/**
+ * @description Checks if token is of $type `isFontFamily`
+ * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export const isFontFamily = (token) => {
+    return token.$type === 'fontFamily';
+};

package/dist/build/filters/isFontWeight.d.ts

@@ -0,0 +1,7 @@
+import type { TransformedToken } from 'style-dictionary/types';
+/**
+ * @description Checks if token is of $type `fontWeight`
+ * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export declare const isFontWeight: (token: TransformedToken) => boolean;

package/dist/build/filters/isFontWeight.js

@@ -0,0 +1,8 @@
+/**
+ * @description Checks if token is of $type `fontWeight`
+ * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export const isFontWeight = (token) => {
+    return token.$type === 'fontWeight';
+};

package/dist/build/filters/isFromFile.d.ts

@@ -0,0 +1,8 @@
+import type { TransformedToken } from 'style-dictionary/types';
+/**
+ * @description Checks if token comes from a specific file
+ * @param token [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @param files - array of file paths
+ * @returns boolean
+ */
+export declare const isFromFile: (token: TransformedToken, files: string[]) => boolean;

package/dist/build/filters/isFromFile.js

@@ -0,0 +1,10 @@
+/**
+ * @description Checks if token comes from a specific file
+ * @param token [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @param files - array of file paths
+ * @returns boolean
+ */
+export const isFromFile = (token, files) => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    return (files === null || files === void 0 ? void 0 : files.includes(token.filePath)) === true;
+};

package/dist/build/filters/isNumber.d.ts

@@ -0,0 +1,7 @@
+import type { TransformedToken } from 'style-dictionary/types';
+/**
+ * @description Checks if token type is a number
+ * @param token [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export declare const isNumber: (token: TransformedToken) => boolean;

package/dist/build/filters/isNumber.js

@@ -0,0 +1,8 @@
+/**
+ * @description Checks if token type is a number
+ * @param token [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export const isNumber = (token) => {
+    return token.$type === 'number';
+};

package/dist/build/filters/isShadow.d.ts

@@ -0,0 +1,7 @@
+import type { TransformedToken } from 'style-dictionary/types';
+/**
+ * @description Checks if token is of $type `shadow`
+ * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export declare const isShadow: (token: TransformedToken) => boolean;

package/dist/build/filters/isShadow.js

@@ -0,0 +1,8 @@
+/**
+ * @description Checks if token is of $type `shadow`
+ * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export const isShadow = (token) => {
+    return token.$type === 'shadow';
+};

package/dist/build/filters/isSource.d.ts

@@ -0,0 +1,7 @@
+import type { TransformedToken } from 'style-dictionary/types';
+/**
+ * @description Checks if token is source token
+ * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export declare const isSource: (token: TransformedToken) => boolean;

package/dist/build/filters/isSource.js

@@ -0,0 +1,8 @@
+/**
+ * @description Checks if token is source token
+ * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export const isSource = (token) => {
+    return token.isSource === true;
+};

package/dist/build/filters/isTypography.d.ts

@@ -0,0 +1,7 @@
+import type { TransformedToken } from 'style-dictionary/types';
+/**
+ * @description Checks if token is of $type `typography`
+ * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export declare const isTypography: (token: TransformedToken) => boolean;

package/dist/build/filters/isTypography.js

@@ -0,0 +1,8 @@
+/**
+ * @description Checks if token is of $type `typography`
+ * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export const isTypography = (token) => {
+    return token.$type === 'typography';
+};

package/dist/build/formats/cssAdvanced.d.ts

@@ -0,0 +1,2 @@
+import type { FormatFn } from 'style-dictionary/types';
+export declare const cssAdvanced: FormatFn;

package/dist/build/formats/cssAdvanced.js

@@ -0,0 +1,86 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { format } from 'prettier';
+import { fileHeader, formattedVariables } from 'style-dictionary/utils';
+const wrapWithSelector = (css, selector) => {
+    // return without selector
+    if (selector === false || selector.trim().length === 0)
+        return css;
+    // return with selector
+    return `${selector} { ${css} }`;
+};
+export const cssAdvanced = (_a) => __awaiter(void 0, [_a], void 0, function* ({ dictionary: originalDictionary, options = {
+    queries: [],
+}, file, }) {
+    var _b, _c, _d, _e;
+    // get options
+    const { outputReferences, usesDtcg, formatting } = options;
+    // selector
+    const selector = ((_b = file.options) === null || _b === void 0 ? void 0 : _b.selector) !== undefined ? file.options.selector : ':root';
+    // query extension property
+    const queryExtProp = ((_c = file.options) === null || _c === void 0 ? void 0 : _c.queryExtensionProperty) || 'mediaQuery';
+    // get queries from file options
+    const queries = ((_d = file.options) === null || _d === void 0 ? void 0 : _d.queries) || [
+        {
+            query: undefined,
+            matcher: () => true,
+        },
+    ];
+    // set formatting
+    const mergedFormatting = Object.assign({ commentStyle: 'long' }, formatting);
+    // clone dictionary
+    const dictionary = Object.assign({}, originalDictionary);
+    // get queries from tokens
+    for (const designToken of dictionary.allTokens) {
+        const query = (_e = designToken.$extensions) === null || _e === void 0 ? void 0 : _e[queryExtProp];
+        // early abort if query does not exist on token
+        if (!query)
+            continue;
+        // if query exists already from other token
+        const currentQueryIndex = queries.findIndex((q) => q.query === query);
+        // if query exists
+        if (currentQueryIndex > -1) {
+            queries[currentQueryIndex] = Object.assign(Object.assign({}, queries[currentQueryIndex]), { matcher: (token) => queries[currentQueryIndex].matcher(token) ||
+                    token.$extensions[queryExtProp] === queries[currentQueryIndex].query });
+        }
+        // if query does not exist
+        else {
+            queries.push({
+                query,
+                matcher: (token) => { var _a; return ((_a = token.$extensions) === null || _a === void 0 ? void 0 : _a[queryExtProp]) === query; },
+            });
+        }
+    }
+    // add file header
+    const output = [yield fileHeader({ file })];
+    // add single theme css
+    for (const query of queries) {
+        const { query: queryString, matcher } = query;
+        // filter tokens to only include the ones that pass the matcher
+        const filteredDictionary = Object.assign(Object.assign({}, dictionary), { allTokens: dictionary.allTokens.filter(matcher || (() => true)) });
+        // early abort if no matches
+        if (!filteredDictionary.allTokens.length)
+            continue;
+        // add tokens into root
+        const css = formattedVariables({
+            format: 'css',
+            dictionary: filteredDictionary,
+            outputReferences,
+            formatting: mergedFormatting,
+            usesDtcg,
+        });
+        // wrap css
+        const cssWithSelector = wrapWithSelector(css, query.selector !== undefined ? query.selector : selector);
+        // add css with or without query
+        output.push(queryString ? `${queryString} { ${cssWithSelector} }` : cssWithSelector);
+    }
+    // return prettified
+    return yield format(output.join('\n'), { parser: 'css', printWidth: 500 });
+});

package/dist/build/formats/cssCustomMedia.d.ts

@@ -0,0 +1,7 @@
+import type { FormatFn } from 'style-dictionary/types';
+/**
+ * @description Converts `StyleDictionary.dictionary.tokens` to css with @custom-media
+ * @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
+ * @returns formatted `string`
+ */
+export declare const cssCustomMedia: FormatFn;

package/dist/build/formats/cssCustomMedia.js

@@ -0,0 +1,26 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { format } from 'prettier';
+import { fileHeader } from 'style-dictionary/utils';
+/**
+ * @description Converts `StyleDictionary.dictionary.tokens` to css with @custom-media
+ * @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
+ * @returns formatted `string`
+ */
+export const cssCustomMedia = (_a) => __awaiter(void 0, [_a], void 0, function* ({ dictionary, options: _options, file }) {
+    // add file header
+    const output = [yield fileHeader({ file })];
+    // add single theme css
+    dictionary.allTokens.map(({ name, $value }) => {
+        output.push(`@custom-media --${name} ${$value};`);
+    });
+    // return prettified
+    return format(output.join('\n'), { parser: 'css', printWidth: 500 });
+});

package/dist/build/formats/index.d.ts

@@ -0,0 +1,9 @@
+export { cssCustomMedia } from './cssCustomMedia.js';
+export { cssAdvanced } from './cssAdvanced.js';
+export { jsonFigma } from './jsonFigma.js';
+export { javascriptCommonJs } from './javascriptCommonJs.js';
+export { javascriptEsm } from './javascriptEsm.js';
+export { jsonNestedPrefixed } from './jsonNestedPrefixed.js';
+export { jsonOneDimensional } from './jsonOneDimensional.js';
+export { jsonPostCssFallback } from './jsonPostCssFallback.js';
+export { typescriptExportDefinition } from './typescriptExportDefinition.js';

package/dist/build/formats/index.js

@@ -0,0 +1,9 @@
+export { cssCustomMedia } from './cssCustomMedia.js';
+export { cssAdvanced } from './cssAdvanced.js';
+export { jsonFigma } from './jsonFigma.js';
+export { javascriptCommonJs } from './javascriptCommonJs.js';
+export { javascriptEsm } from './javascriptEsm.js';
+export { jsonNestedPrefixed } from './jsonNestedPrefixed.js';
+export { jsonOneDimensional } from './jsonOneDimensional.js';
+export { jsonPostCssFallback } from './jsonPostCssFallback.js';
+export { typescriptExportDefinition } from './typescriptExportDefinition.js';

package/dist/build/formats/javascriptCommonJs.d.ts

@@ -0,0 +1,7 @@
+import type { FormatFn } from 'style-dictionary/types';
+/**
+ * @description Converts `StyleDictionary.dictionary.tokens` to javascript commonJS module
+ * @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
+ * @returns formatted `string`
+ */
+export declare const javascriptCommonJs: FormatFn;

package/dist/build/formats/javascriptCommonJs.js

@@ -0,0 +1,26 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { format } from 'prettier';
+import { jsonToNestedValue } from './utilities/jsonToNestedValue.js';
+import { prefixTokens } from './utilities/prefixTokens.js';
+import { fileHeader } from 'style-dictionary/utils';
+/**
+ * @description Converts `StyleDictionary.dictionary.tokens` to javascript commonJS module
+ * @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
+ * @returns formatted `string`
+ */
+export const javascriptCommonJs = (_a) => __awaiter(void 0, [_a], void 0, function* ({ dictionary, file, platform }) {
+    // add prefix if defined
+    const tokens = prefixTokens(dictionary.tokens, platform);
+    // add file header and convert output
+    const output = `${yield fileHeader({ file })}module.exports = ${JSON.stringify(jsonToNestedValue(tokens), null, 2)}\n`;
+    // return prettified
+    return format(output, { parser: 'typescript', printWidth: 500 });
+});