working for borders

Author: lukasoppermann

scripts/buildTokens.ts

@@ -1,4 +1,4 @@
-import type {Config} from 'style-dictionary/types'
+import type {Config, LogConfig} from 'style-dictionary/types'
 import {PrimerStyleDictionary} from '../src/primerStyleDictionary.js'
 import {copyFromDir} from '../src/utilities/index.js'
 import {deprecatedJson, css, docJson, fallbacks, styleLint} from '../src/platforms/index.js'
@@ -12,6 +12,14 @@ import {themes} from './themes.config.js'
 import fs from 'fs'
 import {getFallbackTheme} from './utilities/getFallbackTheme.js'
 
+const log: LogConfig = {
+  warnings: 'disabled', // 'warn' | 'error' | 'disabled'
+  verbosity: 'silent', // 'default' | 'silent' | 'verbose'
+  errors: {
+    brokenReferences: 'throw', // 'throw' | 'console'
+  },
+}
+
 /**
  * getStyleDictionaryConfig
  * @param filename output file name without extension
@@ -29,13 +37,7 @@ const getStyleDictionaryConfig: StyleDictionaryConfigGenerator = (
 ): Config => ({
   source, // build the special formats
   include,
-  log: {
-    warnings: 'disabled', // 'warn' | 'error' | 'disabled'
-    verbosity: 'silent', // 'default' | 'silent' | 'verbose'
-    errors: {
-      brokenReferences: 'throw', // 'throw' | 'console'
-    },
-  },
+  log,
   platforms: Object.fromEntries(
     Object.entries({
       css: css(`css/${filename}.css`, options.prefix, options.buildPath, {
@@ -64,6 +66,7 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P
       const extendedSD = await PrimerStyleDictionary.extend({
         source: [...source, ...include], // build the special formats
         include,
+        log,
         platforms: {
           css: css(`internalCss/${filename}.css`, buildOptions.prefix, buildOptions.buildPath, {
             themed: true,

src/formats/utilities/createPropertyFormatterWithRef.ts

@@ -192,22 +192,7 @@ export default function createPropertyFormatterWithRef({
             })
             .join(' ')
         }
-        // if (token.attributes.referenceMap) {
-        //   // console.log(token)
-        //   // console.log('original is object', token.attributes || '')
-        //   value = token.attributes.referenceMap
-        //   // console.log('referenceMap', token.attributes.referenceMap)
-        //   for (const [key, val] of Object.entries(originalValue)) {
-        //     const regex = new RegExp(`\\[${key}\\]`)
-        //     value = value.replace(regex, val)
-        //   }
-        // }
       }
-      // console.log('originalValue:', originalValue, JSON.stringify(originalIsObject))
-      // if (ref.$type === 'border') {
-      //   console.log('BORDER:', ref.original)
-      // }
-      // console.log('refs: ', refs)
 
       refs.forEach(ref => {
         // value should be a string that contains the resolved reference

src/platforms/css.ts

@@ -2,6 +2,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'
+import {outputReferencesTransformedWithObject} from './utilities/outputReferencesTransformedWithObject.js'
 
 const getCssSelectors = (outputFile: string) => {
   // check for dark in the beginning of the output filename
@@ -58,9 +59,10 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
           ]),
         options: {
           showFileHeader: false,
-          outputReferences: true,
-          // outputReferences: (token, platformOptions) =>
-          //   outputReferencesFilter(token, platformOptions) && outputReferencesTransformed(token, platformOptions),
+          // outputReferences: true,
+          outputReferences: (token, platformOptions) =>
+            outputReferencesFilter(token, platformOptions) &&
+            outputReferencesTransformedWithObject(token, platformOptions),
           descriptions: false,
           queries: getCssSelectors(outputFile),
           ...options?.options,

src/platforms/utilities/outputReferencesTransformedWithObject.ts

@@ -0,0 +1,37 @@
+import type {Dictionary, TransformedToken} from 'style-dictionary/types'
+import {resolveReferences} from 'style-dictionary/utils'
+
+export function outputReferencesTransformedWithObject(
+  token: TransformedToken,
+  {dictionary, usesDtcg}: {dictionary: Dictionary; usesDtcg?: boolean},
+): boolean {
+  const originalValue = usesDtcg ? token.original.$value : token.original.value
+  const value = usesDtcg ? token.$value : token.value
+
+  // double check if this is a string, technically speaking the token could also be an object
+  // and pass the usesReferences check
+  if (typeof originalValue === 'string') {
+    // Check if the token's value is the same as if we were resolve references on the original value
+    // This checks whether the token's value has been transformed e.g. transitive transforms.
+    // If it has been, that means we should not be outputting refs because this would undo the work of those transforms.
+    return (
+      value ===
+      resolveReferences(originalValue, dictionary.unfilteredTokens ?? dictionary.tokens, {
+        usesDtcg,
+        warnImmediately: false,
+      })
+    )
+  }
+  if (typeof originalValue === 'object') {
+    const values = Object.values(originalValue).filter(val => typeof val === 'string')
+    return values.every(val =>
+      values.includes(
+        resolveReferences(val, dictionary.unfilteredTokens ?? dictionary.tokens, {
+          usesDtcg,
+          warnImmediately: false,
+        }),
+      ),
+    )
+  }
+  return false
+}