working for borders

Author: lukasoppermann

eslint.config.mjs

@@ -70,6 +70,7 @@ export default tseslint.config([
     },
     // rules which apply to JS, TS, etc.
     rules: {
+      'eslint-comments/no-use': 'off',
       'i18n-text/no-en': 0,
       'importPlugin/no-nodejs-modules': 'off',
       'importPlugin/extensions': [
@@ -111,7 +112,7 @@ export default tseslint.config([
   {
     files: ['**/*.{js,jsx}'],
     rules: {
-      'eslint-comments/no-use': 0,
+      'eslint-comments/no-use': 'off',
       'import/no-namespace': 0,
       'no-shadow': 0,
       'import/no-commonjs': 0,
@@ -138,6 +139,7 @@ export default tseslint.config([
     },
     files: ['**/*.{ts,tsx}'],
     rules: {
+      'eslint-comments/no-use': 'off',
       'no-shadow': 'off',
       '@typescript-eslint/no-shadow': 'error',
       '@typescript-eslint/no-explicit-any': 2,

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/cssAdvanced.ts

@@ -78,7 +78,6 @@ export const cssAdvanced: FormatFn = async ({
     const css = getFormattedVariables({
       format: 'css',
       dictionary: filteredDictionary,
-      // @ts-ignore
       outputReferences,
       formatting: mergedFormatting,
       usesDtcg,

src/formats/utilities/createPropertyFormatterWithRef.ts

@@ -1,3 +1,5 @@
+/* eslint-disable eslintComments/no-use */
+/* eslint-disable camelcase */
 /*
  * Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.
  *
@@ -10,6 +12,7 @@
  * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
  * and limitations under the License.
  */
+import type {Dictionary, FormattingOptions, OutputReferences, TransformedToken} from 'style-dictionary/types'
 import {getReferences, usesReferences} from 'style-dictionary/utils'
 
 /**
@@ -39,7 +42,7 @@ const defaultFormatting = {
  * @param {Formatting} options
  * @returns {string}
  */
-export function addComment(to_ret_token, comment, options) {
+export function addComment(to_ret_token: string, comment: string, options: FormattingOptions) {
   const {commentStyle, indentation} = options
   let {commentPosition} = options
 
@@ -124,9 +127,17 @@ export default function createPropertyFormatterWithRef({
   formatting = {},
   themeable = false,
   usesDtcg = false,
+}: {
+  outputReferences?: OutputReferences
+  outputReferenceFallbacks?: boolean
+  dictionary: Dictionary
+  format?: string
+  formatting?: FormattingOptions
+  themeable?: boolean
+  usesDtcg?: boolean
 }) {
   /** @type {Formatting} */
-  const formatDefaults = {}
+  const formatDefaults: FormattingOptions = {}
   switch (format) {
     case 'css':
       formatDefaults.prefix = '--'
@@ -141,7 +152,7 @@ export default function createPropertyFormatterWithRef({
   }
   const {prefix, commentStyle, indentation, separator, suffix} = mergedOptions
   const {tokens, unfilteredTokens} = dictionary
-  return function (token) {
+  return function (token: TransformedToken) {
     let to_ret_token = `${indentation}${prefix}${token.name}${separator} `
     let value = usesDtcg ? token.$value : token.value
     const originalValue = usesDtcg ? token.original.$value : token.original.value
@@ -192,31 +203,16 @@ 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)
-
+      /* eslint-disable-next-line github/array-foreach */
       refs.forEach(ref => {
         // value should be a string that contains the resolved reference
         // because Style Dictionary resolved this in the resolution step.
         // Here we are undoing that by replacing the value with
         // the reference's name
         if (Object.hasOwn(ref, `${usesDtcg ? '$' : ''}value`) && Object.hasOwn(ref, 'name')) {
           const refVal = usesDtcg ? ref.$value : ref.value
-          const replaceFunc = function () {
+          const replaceFunc = () => {
             if (format === 'css') {
               if (outputReferenceFallbacks) {
                 return `var(${prefix}${ref.name}, ${refVal})`
@@ -248,7 +244,7 @@ export default function createPropertyFormatterWithRef({
 
     const comment = token.$description ?? token.comment
     if (comment && commentStyle !== 'none') {
-      to_ret_token = addComment(to_ret_token, comment, mergedOptions)
+      to_ret_token = addComment(to_ret_token, comment, mergedOptions as FormattingOptions)
     }
     // console.log('to_ret_token', to_ret_token)
     return to_ret_token

src/formats/utilities/getFormattedVariables.ts

@@ -10,7 +10,7 @@
  * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
  * and limitations under the License.
  */
-import type {Dictionary} from 'style-dictionary/types'
+import type {Dictionary, OutputReferences} from 'style-dictionary/types'
 import {sortByReference} from 'style-dictionary/utils'
 import createPropertyFormatterWithRef from './createPropertyFormatterWithRef.js'
 
@@ -29,7 +29,7 @@ export default function getFormattedVariables({
 }: {
   format: string
   dictionary: Dictionary
-  outputReferences?: boolean
+  outputReferences?: OutputReferences
   outputReferenceFallbacks?: boolean
   formatting?: {
     lineSeparator?: string

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
+}