@primer/primitives 0.0.0-20250120093846 → 0.0.0-20250120143739

package/dist/build/formats/cssAdvanced.js

@@ -8,7 +8,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { format } from 'prettier';
-import { fileHeader, formattedVariables, sortByName } from 'style-dictionary/utils';
+import { fileHeader, sortByName } from 'style-dictionary/utils';
+import getFormattedVariables from './utilities/getFormattedVariables.js';
 const wrapWithSelector = (css, selector) => {
     // return without selector
     if (selector === false || selector.trim().length === 0)
@@ -69,9 +70,10 @@ export const cssAdvanced = (_a) => __awaiter(void 0, [_a], void 0, function* ({
         if (!filteredDictionary.allTokens.length)
             continue;
         // add tokens into root
-        const css = formattedVariables({
+        const css = getFormattedVariables({
             format: 'css',
             dictionary: filteredDictionary,
+            // @ts-ignore
             outputReferences,
             formatting: mergedFormatting,
             usesDtcg,

package/dist/build/formats/utilities/getFormattedVariables.d.ts

@@ -0,0 +1,12 @@
+import type { Dictionary } from 'style-dictionary/types';
+export default function getFormattedVariables({ format, dictionary, outputReferences, outputReferenceFallbacks, formatting, themeable, usesDtcg, }: {
+    format: string;
+    dictionary: Dictionary;
+    outputReferences?: boolean;
+    outputReferenceFallbacks?: boolean;
+    formatting?: {
+        lineSeparator?: string;
+    };
+    themeable?: boolean;
+    usesDtcg?: boolean;
+}): string;

package/dist/build/formats/utilities/getFormattedVariables.js

@@ -0,0 +1,35 @@
+import { createPropertyFormatter, sortByReference } from 'style-dictionary/utils';
+const defaultFormatting = {
+    lineSeparator: '\n',
+};
+export default function getFormattedVariables({ format, dictionary, outputReferences = false, outputReferenceFallbacks, formatting = {}, themeable = false, usesDtcg = false, }) {
+    // typecast, we know that by know the tokens have been transformed
+    let allTokens = dictionary.allTokens;
+    const tokens = dictionary.tokens;
+    const { lineSeparator } = Object.assign({}, defaultFormatting, formatting);
+    // Some languages are imperative, meaning a variable has to be defined
+    // before it is used. If `outputReferences` is true, check if the token
+    // has a reference, and if it does send it to the end of the array.
+    // We also need to account for nested references, a -> b -> c. They
+    // need to be defined in reverse order: c, b, a so that the reference always
+    // comes after the definition
+    if (outputReferences) {
+        // note: using the spread operator here so we get a new array rather than
+        // mutating the original
+        allTokens = [...allTokens].sort(sortByReference(tokens, { unfilteredTokens: dictionary.unfilteredTokens, usesDtcg }));
+    }
+    return allTokens
+        .map(createPropertyFormatter({
+        outputReferences,
+        outputReferenceFallbacks,
+        dictionary,
+        format,
+        formatting,
+        themeable,
+        usesDtcg,
+    }))
+        .filter(function (strVal) {
+        return !!strVal;
+    })
+        .join(lineSeparator);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "0.0.0-20250120093846",
+  "version": "0.0.0-20250120143739",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "type": "module",
   "files": [