Allow to keep some tokens in output as references (#1100)

* initial test

* update style dictionary

.changeset/khaki-kiwis-explain.md

@@ -0,0 +1,5 @@
+---
+'@primer/primitives': minor
+---
+
+Changing the way we use references in css output, to keep all references to tokens that are present in the final output

package.json

@@ -70,7 +70,7 @@
     "json5": "^2.2.1",
     "markdown-table-ts": "^1.0.3",
     "prettier": "^3.3.3",
-    "style-dictionary": "^4.1.3",
+    "style-dictionary": "^4.3.0",
     "tsx": "^4.19.0",
     "typescript": "5.6",
     "typescript-eslint": "^8.16.0",

src/platforms/css.ts

@@ -1,6 +1,7 @@
 import {isFromFile, isSource} from '../filters/index.js'
 import type {PlatformInitializer} from '../types/platformInitializer.js'
 import type {PlatformConfig, TransformedToken} from 'style-dictionary/types'
+import {outputReferencesTransformed, outputReferencesFilter} from 'style-dictionary/utils'
 
 const getCssSelectors = (outputFile: string) => {
   // check for dark in the beginning of the output filename
@@ -57,7 +58,8 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
           ]),
         options: {
           showFileHeader: false,
-          outputReferences: false,
+          outputReferences: (token, platformOptions) =>
+            outputReferencesFilter(token, platformOptions) && outputReferencesTransformed(token, platformOptions),
           descriptions: false,
           queries: getCssSelectors(outputFile),
           ...options?.options,
@@ -76,6 +78,8 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
           ]),
         options: {
           showFileHeader: false,
+          outputReferences: (token, platformOptions) =>
+            outputReferencesFilter(token, platformOptions) && outputReferencesTransformed(token, platformOptions),
           descriptions: false,
           ...options?.options,
         },
@@ -86,6 +90,8 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
         filter: token => isSource(token) && options?.themed !== true && token.$type === 'custom-viewportRange',
         options: {
           showFileHeader: false,
+          outputReferences: (token, platformOptions) =>
+            outputReferencesFilter(token, platformOptions) && outputReferencesTransformed(token, platformOptions),
         },
       },
       {
@@ -99,6 +105,8 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
           ]),
         options: {
           descriptions: false,
+          outputReferences: (token, platformOptions) =>
+            outputReferencesFilter(token, platformOptions) && outputReferencesTransformed(token, platformOptions),
           showFileHeader: false,
           queries: [
             {