From 5d891082e6f769b20779208e4881279b2ca41548 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Mon, 16 Dec 2024 13:21:47 +0100 Subject: [PATCH] fallback (#1130) --- scripts/buildFigma.ts | 5 ++++- scripts/buildTokens.ts | 9 ++++---- scripts/diffThemes.ts | 23 ++++++++++++++------ scripts/utilities/getFallbackTheme.ts | 8 +++++++ scripts/utilities/validateTokenWithSchema.ts | 13 ++++++++++- scripts/validateTokenJson.ts | 9 ++++++-- 6 files changed, 52 insertions(+), 15 deletions(-) create mode 100644 scripts/utilities/getFallbackTheme.ts diff --git a/scripts/buildFigma.ts b/scripts/buildFigma.ts index 1e2d37b40..6ad80b5bc 100644 --- a/scripts/buildFigma.ts +++ b/scripts/buildFigma.ts @@ -3,6 +3,7 @@ import {PrimerStyleDictionary} from '../src/primerStyleDictionary.js' import {themes} from './themes.config.js' import {figma} from '../src/platforms/index.js' import type {ConfigGeneratorOptions} from '../src/types/styleDictionaryConfigGenerator.js' +import {getFallbackTheme} from './utilities/getFallbackTheme.js' const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise => { /** ----------------------------------- @@ -225,7 +226,9 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise = source, include, platforms: { - figma: figma(`figma/shadows/${name}.json`, buildOptions.prefix, buildOptions.buildPath, {theme}), + figma: figma(`figma/shadows/${name}.json`, buildOptions.prefix, buildOptions.buildPath, { + theme: [theme, getFallbackTheme(theme)], + }), }, }) diff --git a/scripts/buildTokens.ts b/scripts/buildTokens.ts index 8bb7da315..145b46c1b 100644 --- a/scripts/buildTokens.ts +++ b/scripts/buildTokens.ts @@ -10,6 +10,7 @@ import type {TokenBuildInput} from '../src/types/tokenBuildInput.js' import glob from 'fast-glob' import {themes} from './themes.config.js' import fs from 'fs' +import {getFallbackTheme} from './utilities/getFallbackTheme.js' /** * getStyleDictionaryConfig @@ -39,10 +40,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, @@ -66,7 +67,7 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P platforms: { css: css(`internalCss/${filename}.css`, buildOptions.prefix, buildOptions.buildPath, { themed: true, - theme, + theme: [theme, getFallbackTheme(theme)], }), }, }) @@ -88,7 +89,7 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P `functional/themes/${filename}`, source, include, - {...buildOptions, themed: true, theme}, + {...buildOptions, themed: true, theme: [theme, getFallbackTheme(theme)]}, // disable fallbacks for themes {fallbacks: undefined}, ), diff --git a/scripts/diffThemes.ts b/scripts/diffThemes.ts index aa5179674..1f1293a57 100644 --- a/scripts/diffThemes.ts +++ b/scripts/diffThemes.ts @@ -1,5 +1,4 @@ import {PrimerStyleDictionary} from '../src/primerStyleDictionary.js' -import {flattenTokens} from 'style-dictionary/utils' import {themes as themesConfigArray} from './themes.config.js' import type {Dictionary} from 'style-dictionary/types' @@ -7,26 +6,36 @@ const tokenNameArray = ({dictionary}: {dictionary: Dictionary}) => dictionary.allTokens.map(({name}: {name: string}) => name) const themesArray = await Promise.all( - themesConfigArray.map(async ({filename, source, include}): Promise<[string, string[]]> => { + themesConfigArray.map(async ({filename, source, include, theme}): Promise<[string, string[]]> => { const sd = await PrimerStyleDictionary.extend({ source, include, + log: { + warnings: 'disabled', // 'warn' | 'error' | 'disabled' + verbosity: 'verbose', // 'default' | 'silent' | 'verbose' + errors: { + brokenReferences: 'throw', // 'throw' | 'console' + }, + }, platforms: { json: { + preprocessors: ['themeOverrides'], transforms: ['name/pathToDotNotation'], + options: { + themeOverrides: { + theme, + }, + }, }, }, }) - const tokens = await sd.exportPlatform('json') + const dictionary = await sd.getPlatformTokens('json') return [ filename, tokenNameArray({ - dictionary: { - tokens, - allTokens: await flattenTokens(tokens), - }, + dictionary, }), ] }), diff --git a/scripts/utilities/getFallbackTheme.ts b/scripts/utilities/getFallbackTheme.ts new file mode 100644 index 000000000..c93340c2d --- /dev/null +++ b/scripts/utilities/getFallbackTheme.ts @@ -0,0 +1,8 @@ +export const getFallbackTheme = ( + theme?: string | [string | undefined, string | undefined], +): 'light' | 'dark' | undefined => { + if (Array.isArray(theme)) { + theme = theme[1] || theme[0] + } + return theme ? (theme.startsWith('light') ? 'light' : 'dark') : undefined +} diff --git a/scripts/utilities/validateTokenWithSchema.ts b/scripts/utilities/validateTokenWithSchema.ts index 141b27823..2d60ba135 100644 --- a/scripts/utilities/validateTokenWithSchema.ts +++ b/scripts/utilities/validateTokenWithSchema.ts @@ -6,6 +6,17 @@ export type validationErrors = { errorsByPath: Record } +const unpackErrorDetails = details => { + const errorObjectByCode = { + //eslint-disable-next-line camelcase + invalid_union: 'unionErrors', + } + return { + ...details, + errors: details[errorObjectByCode[details.code]] || [], + } +} + export const validateTokenWithSchema = ( fileName: string, tokens: unknown, @@ -23,7 +34,7 @@ export const validateTokenWithSchema = ( if (!acc[item.path.join('.')]) acc[item.path.join('.')] = [] // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - acc[item.path.join('.')].push(item) + acc[item.path.join('.')].push(unpackErrorDetails(item)) return acc }, {}), } diff --git a/scripts/validateTokenJson.ts b/scripts/validateTokenJson.ts index e45be2728..3d488f90d 100644 --- a/scripts/validateTokenJson.ts +++ b/scripts/validateTokenJson.ts @@ -71,8 +71,13 @@ if (getFlag('--silent') === null) { // eslint-disable-next-line no-console console.log( fail.errorsByPath[path] - .map(({message}) => - message.replace(/\*\*(.*?)\*\*/g, '- \u001b[31;1m\u001b[1m$1\u001b[0m').replace(/\n(?!-)/g, '\n ↳ '), + .map( + ({message, code, errors}) => + `${message.replace(/\*\*(.*?)\*\*/g, '- \u001b[31;1m\u001b[1m$1\u001b[0m').replace(/\n(?!-)/g, '\n ↳ ')}, code: ${code}, errors:\n ${errors + .map(error => { + return `- ${error.issues[0].code}: ${error.issues[0].message}` + }) + .join('\n')}`, ) .join('\n'), '\n',