Fallbacks for postCss

.changeset/selfish-shoes-ring.md

@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+Add fallback json

scripts/buildTokens.ts

@@ -1,7 +1,17 @@
 import type StyleDictionary from 'style-dictionary'
 import {PrimerStyleDictionary} from '~/src/PrimerStyleDictionary'
 import {copyFromDir} from '~/src/utilities'
-import {typeDefinitions, deprecatedJson, css, docJson, scss, javascript, typescript, json} from '~/src/platforms'
+import {
+  typeDefinitions,
+  deprecatedJson,
+  css,
+  docJson,
+  scss,
+  javascript,
+  typescript,
+  json,
+  fallbacks,
+} from '~/src/platforms'
 import type {ConfigGeneratorOptions, StyleDictionaryConfigGenerator} from '~/src/types/StyleDictionaryConfigGenerator'
 import type {TokenBuildInput} from '~/src/types/TokenBuildInput'
 import glob from 'fast-glob'
@@ -30,6 +40,7 @@ const getStyleDictionaryConfig: StyleDictionaryConfigGenerator = (
     ts: typescript(`ts/${filename}.ts`, options.prefix, options.buildPath),
     json: json(`json/${filename}.json`, options.prefix, options.buildPath),
     docJson: docJson(`docs/${filename}.json`, options.prefix, options.buildPath),
+    fallbacks: fallbacks(`fallbacks/${filename}.json`, options.prefix, options.buildPath),
     ...platforms,
   },
 })
@@ -41,7 +52,14 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void =>
   for (const {filename, source, include} of themes) {
     // build functional scales
     PrimerStyleDictionary.extend(
-      getStyleDictionaryConfig(`functional/themes/${filename}`, source, include, {...buildOptions, themed: true}),
+      getStyleDictionaryConfig(
+        `functional/themes/${filename}`,
+        source,
+        include,
+        {...buildOptions, themed: true},
+        // disable fallbacks for themes
+        {fallbacks: undefined},
+      ),
     ).buildAllPlatforms()
   }
 

src/PrimerStyleDictionary.ts

@@ -25,6 +25,7 @@ import {
   cssThemed,
   cssCustomMedia,
   jsonOneDimensional,
+  jsonPostCssFallback,
   cssWrapMediaQuery,
   cssVariables,
 } from './formats'
@@ -89,6 +90,11 @@ StyleDictionary.registerFormat({
   formatter: jsonOneDimensional,
 })
 
+StyleDictionary.registerFormat({
+  name: 'json/postCss-fallback',
+  formatter: jsonPostCssFallback,
+})
+
 /**
  * Transformers
  *

src/formats/index.ts

@@ -6,5 +6,6 @@ export {javascriptCommonJs} from './javascriptCommonJs'
 export {javascriptEsm} from './javascriptEsm'
 export {jsonNestedPrefixed} from './jsonNestedPrefixed'
 export {jsonOneDimensional} from './jsonOneDimensional'
+export {jsonPostCssFallback} from './jsonPostCssFallback'
 export {scssMixinCssVariables} from './scssMixinCssVariables'
 export {typescriptExportDefinition} from './typescriptExportDefinition'

src/formats/jsonPostCssFallback.ts

@@ -0,0 +1,16 @@
+import type StyleDictionary from 'style-dictionary'
+import {format} from 'prettier'
+
+/**
+ * @description Takes a style dictionary token dictionary and converts it to a one dimensional json object.
+ * @param StyleDictionary.FormatterArguments
+ * @param options.nameSeparator - separator to use for nested token name
+ * @returns formatted json `string`
+ */
+export const jsonPostCssFallback: StyleDictionary.Formatter = ({dictionary, file: _file}) => {
+  const tokens = Object.fromEntries(dictionary.allTokens.map(token => [`--${token.name}`, token.value]))
+  // add file header and convert output
+  const output = JSON.stringify(tokens, null, 2)
+  // return prettified
+  return format(output, {parser: 'json', printWidth: 500})
+}

src/platforms/fallbacks.ts

@@ -0,0 +1,34 @@
+import type StyleDictionary from 'style-dictionary'
+import type {PlatformInitializer} from '~/src/types/PlatformInitializer'
+import {isSource} from '~/src/filters'
+
+export const fallbacks: PlatformInitializer = (outputFile, prefix, buildPath): StyleDictionary.Platform => ({
+  prefix,
+  buildPath,
+  transforms: [
+    'name/pathToKebabCase',
+    'color/hex',
+    'color/hexMix',
+    'color/hexAlpha',
+    'dimension/rem',
+    'shadow/css',
+    'border/css',
+    'typography/css',
+    'fontFamily/css',
+    'fontWeight/number',
+  ],
+  options: {
+    basePxFontSize: 16,
+  },
+  files: [
+    {
+      destination: outputFile,
+      format: `json/postCss-fallback`,
+      filter: isSource,
+      options: {
+        outputReferences: false,
+        outputVerbose: true,
+      },
+    },
+  ],
+})

src/platforms/index.ts

@@ -1,6 +1,7 @@
 export {css} from './css'
 export {deprecatedJson} from './deprecatedJson'
 export {docJson} from './docJson'
+export {fallbacks} from './fallbacks'
 export {javascript} from './javascript'
 export {json} from './json'
 export {scss} from './scss'

src/types/StyleDictionaryConfigGenerator.d.ts

@@ -11,5 +11,5 @@ export type StyleDictionaryConfigGenerator = (
   source: string[],
   include: string[],
   options: ConfigGeneratorOptions,
-  platforms?: Record<string, StyleDictionary.Platform>,
+  platforms?: Record<string, StyleDictionary.Platform | undefined>,
 ) => StyleDictionary.Config