make border only use references for included tokens

Author: lukasoppermann

scripts/buildTokens.ts

@@ -42,10 +42,10 @@ const getStyleDictionaryConfig: StyleDictionaryConfigGenerator = (
     Object.entries({
       css: css(`css/${filename}.css`, options.prefix, options.buildPath, {
         themed: options.themed,
-        theme: options.theme,
+        theme: [options.theme, getFallbackTheme(options.theme)],
       }),
       docJson: docJson(`docs/${filename}.json`, options.prefix, options.buildPath, {
-        theme: options.theme,
+        theme: [options.theme, getFallbackTheme(options.theme)],
       }),
       styleLint: styleLint(`styleLint/${filename}.json`, options.prefix, options.buildPath, {
         theme: options.theme,
@@ -60,26 +60,26 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P
   /** -----------------------------------
    * Internal Colors
    * ----------------------------------- */
-  try {
-    for (const {filename, source, include, theme} of themes) {
-      // build functional scales
-      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,
-            theme: [theme, getFallbackTheme(theme)],
-          }),
-        },
-      })
-      await extendedSD.buildAllPlatforms()
-    }
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.error('🛑 Error trying to build internal css colors for code output:', e)
-  }
+  // try {
+  //   for (const {filename, source, include, theme} of themes) {
+  //     // build functional scales
+  //     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,
+  //           theme: [theme, getFallbackTheme(theme)],
+  //         }),
+  //       },
+  //     })
+  //     await extendedSD.buildAllPlatforms()
+  //   }
+  // } catch (e) {
+  //   // eslint-disable-next-line no-console
+  //   console.error('🛑 Error trying to build internal css colors for code output:', e)
+  // }
 
   /** -----------------------------------
    * Colors, shadows & borders

src/formats/utilities/createPropertyFormatterWithRef.ts

@@ -194,7 +194,10 @@ export default function createPropertyFormatterWithRef({
           const transformedValues = value.split(' ')
           value = ['width', 'style', 'color']
             .map((prop, index) => {
-              if (originalValue[prop].startsWith('{')) {
+              if (
+                originalValue[prop].startsWith('{') &&
+                refs.find(ref => ref.path.join('.') === originalValue[prop].replace(/[{}]/g, ''))?.isSource === true
+              ) {
                 return originalValue[prop]
               }
               return transformedValues[index]
@@ -223,14 +226,11 @@ export default function createPropertyFormatterWithRef({
           }
           // TODO: add test
           // technically speaking a reference can be made to a number or boolean token, in this case we stringify it first
-          value = `${value}`.replace(
-            (value as string).match(/{/) ? new RegExp(`{${ref.path.join('\\.')}(\\.\\$?value)?}`, 'g') : refVal,
-            replaceFunc,
-          )
+          const regex = new RegExp(`{${ref.path.join('\\.')}(\\.\\$?value)?}`, 'g')
+          value = `${value}`.replace(regex, replaceFunc)
         }
       })
     }
-
     toRetToken += value
 
     const themeableToken = typeof token.themeable === 'boolean' ? token.themeable : themeable
@@ -239,12 +239,10 @@ export default function createPropertyFormatterWithRef({
     }
 
     toRetToken += suffix
-
     const comment = token.$description ?? token.comment
     if (comment && commentStyle !== 'none') {
       toRetToken = addComment(toRetToken, comment, mergedOptions as FormattingOptions)
     }
-    // console.log('toRetToken', toRetToken)
     return toRetToken
   }
 }

src/platforms/css.ts

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

src/platforms/utilities/outputReferencesFilterObject.ts

@@ -0,0 +1,36 @@
+// const FILTER_WARNINGS = GroupMessages.GROUP.FilteredOutputReferences
+
+import type {Dictionary, TransformedToken} from 'style-dictionary/types'
+import {getReferences} from 'style-dictionary/utils'
+
+/**
+ * @typedef {import('../../../types/DesignToken.d.ts').TransformedToken} TransformedToken
+ * @typedef {import('../../../types/DesignToken.d.ts').Dictionary} Dictionary
+ *
+ * @param {TransformedToken} token
+ * @param {{ dictionary: Dictionary, usesDtcg?: boolean }} dictionary
+ * @returns
+ */
+export function outputReferencesFilterObject(
+  token: TransformedToken,
+  {dictionary, usesDtcg}: {dictionary: Dictionary; usesDtcg?: boolean},
+): boolean {
+  const originalValue = usesDtcg ? token.original.$value : token.original.value
+  // get refs, pass unfilteredTokens to ensure we find the refs even if they are filtered out
+  const refs = getReferences(originalValue, dictionary.tokens, {
+    unfilteredTokens: dictionary.unfilteredTokens,
+    usesDtcg,
+    warnImmediately: false,
+  })
+
+  return refs.some(ref => {
+    // check whether every ref can be found in the filtered set of tokens
+    const foundToken = dictionary.allTokens.find(thisToken => thisToken.name === ref.name)
+    if (!foundToken) {
+      // remove the warning about this ref being filtered out, since we now prevent it from outputting it as a ref
+      // GroupMessages.remove(FILTER_WARNINGS, ref.path.join('.'))
+    }
+
+    return !!foundToken
+  })
+}

src/platforms/utilities/outputReferencesTransformedWithObject.ts

@@ -23,14 +23,15 @@ export function outputReferencesTransformedWithObject(
     )
   }
   if (typeof originalValue === 'object') {
-    const values = Object.values(originalValue).filter(val => typeof val === 'string')
-    return values.every(val => {
-      const resolvedValue = resolveReferences(val, dictionary.unfilteredTokens ?? dictionary.tokens, {
+    const originalValues = Object.values(originalValue).filter(val => typeof val === 'string')
+
+    return originalValues.some(origVal => {
+      const resolvedValue = resolveReferences(origVal, dictionary.unfilteredTokens ?? dictionary.tokens, {
         usesDtcg,
         warnImmediately: false,
       })
 
-      return typeof resolvedValue === 'string' ? values.includes(resolvedValue) : true
+      return typeof resolvedValue === 'string' ? value.split(' ').includes(resolvedValue) : false
     })
   }
   return false