From 7a0c1b7d7831716c96713183823d394f757b70ef Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Sun, 14 May 2023 21:43:25 +0200 Subject: [PATCH 1/3] fallbacks for postCss --- scripts/buildTokens.ts | 13 +++++++++++- src/PrimerStyleDictionary.ts | 6 ++++++ src/formats/index.ts | 1 + src/formats/jsonPostCssFallback.ts | 16 ++++++++++++++ src/platforms/fallbacks.ts | 34 ++++++++++++++++++++++++++++++ src/platforms/index.ts | 1 + 6 files changed, 70 insertions(+), 1 deletion(-) create mode 100644 src/formats/jsonPostCssFallback.ts create mode 100644 src/platforms/fallbacks.ts diff --git a/scripts/buildTokens.ts b/scripts/buildTokens.ts index f76402f46..5626d2f8f 100644 --- a/scripts/buildTokens.ts +++ b/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, }, }) diff --git a/src/PrimerStyleDictionary.ts b/src/PrimerStyleDictionary.ts index 9ad6c2b46..f560de750 100644 --- a/src/PrimerStyleDictionary.ts +++ b/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 * diff --git a/src/formats/index.ts b/src/formats/index.ts index 6e2067d42..f75f1e559 100644 --- a/src/formats/index.ts +++ b/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' diff --git a/src/formats/jsonPostCssFallback.ts b/src/formats/jsonPostCssFallback.ts new file mode 100644 index 000000000..57613d261 --- /dev/null +++ b/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}) +} diff --git a/src/platforms/fallbacks.ts b/src/platforms/fallbacks.ts new file mode 100644 index 000000000..6feaef918 --- /dev/null +++ b/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, + }, + }, + ], +}) diff --git a/src/platforms/index.ts b/src/platforms/index.ts index 580ade813..644ba4afa 100644 --- a/src/platforms/index.ts +++ b/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' From ebaade4f2a009e31878d91aa6e49ccc79240c2df Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Mon, 15 May 2023 07:51:26 +0200 Subject: [PATCH 2/3] added changeset --- .changeset/selfish-shoes-ring.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/selfish-shoes-ring.md diff --git a/.changeset/selfish-shoes-ring.md b/.changeset/selfish-shoes-ring.md new file mode 100644 index 000000000..750fc4c27 --- /dev/null +++ b/.changeset/selfish-shoes-ring.md @@ -0,0 +1,5 @@ +--- +'@primer/primitives': patch +--- + +Add fallback json From be483eecb176035adfa560926e9fa480711218c3 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Tue, 16 May 2023 21:23:05 +0200 Subject: [PATCH 3/3] rm fallbacks for themes --- scripts/buildTokens.ts | 9 ++++++++- src/types/StyleDictionaryConfigGenerator.d.ts | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/scripts/buildTokens.ts b/scripts/buildTokens.ts index 5626d2f8f..935507c0a 100644 --- a/scripts/buildTokens.ts +++ b/scripts/buildTokens.ts @@ -52,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() } diff --git a/src/types/StyleDictionaryConfigGenerator.d.ts b/src/types/StyleDictionaryConfigGenerator.d.ts index cf306a0ac..934e2d6d6 100644 --- a/src/types/StyleDictionaryConfigGenerator.d.ts +++ b/src/types/StyleDictionaryConfigGenerator.d.ts @@ -11,5 +11,5 @@ export type StyleDictionaryConfigGenerator = ( source: string[], include: string[], options: ConfigGeneratorOptions, - platforms?: Record, + platforms?: Record, ) => StyleDictionary.Config