From 6229f0ebb9cf030a3d7fbeb890c540bb3e654797 Mon Sep 17 00:00:00 2001 From: Boris Serdiuk Date: Wed, 24 Apr 2024 11:13:54 +0200 Subject: [PATCH] chore: Explose the entire token set internally (#76) --- src/build/internal.ts | 2 +- .../internal-tokens.test.ts.snap | 30 ++++++++++++++--- .../tasks/__tests__/internal-tokens.test.ts | 14 ++------ src/build/tasks/internal-tokens.ts | 32 ++++++------------- 4 files changed, 40 insertions(+), 38 deletions(-) diff --git a/src/build/internal.ts b/src/build/internal.ts index 96fec12..f643194 100644 --- a/src/build/internal.ts +++ b/src/build/internal.ts @@ -85,7 +85,7 @@ export async function buildThemedComponentsInternal(params: BuildThemedComponent componentsOutputDir, getInlineStylesheets(primary, secondary, defaults, variablesMap, propertiesMap, neededTokens) ); - const internalTokensTask = createInternalTokenFiles(primary, defaults, propertiesMap, exposed, componentsOutputDir); + const internalTokensTask = createInternalTokenFiles(defaults, propertiesMap, componentsOutputDir); const preset: ThemePreset = { theme: primary, diff --git a/src/build/tasks/__tests__/__snapshots__/internal-tokens.test.ts.snap b/src/build/tasks/__tests__/__snapshots__/internal-tokens.test.ts.snap index f344fc7..0367e0a 100644 --- a/src/build/tasks/__tests__/__snapshots__/internal-tokens.test.ts.snap +++ b/src/build/tasks/__tests__/__snapshots__/internal-tokens.test.ts.snap @@ -1,15 +1,37 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`generateTokensDeclarationFile matches previous snapshot 1`] = ` -"export const shadow: string; +"export const fontFamilyBase: string; +export const fontFamilyBody: string; +export const black: string; +export const grey: string; +export const brown: string; +export const shadow: string; export const buttonShadow: string; export const boxShadow: string; -export const lineShadow: string;" +export const lineShadow: string; +export const small: string; +export const medium: string; +export const scaledSize: string; +export const appear: string; +export const containerShadowBase: string; +export const modalShadowContainer: string;" `; exports[`generateTokensFile matches previous snapshot 1`] = ` -"export var shadow = "var(--shadow-css, grey)"; +"export var black = "var(--black-css, black)"; +export var grey = "var(--grey-css, grey)"; +export var brown = "var(--brown-css, brown)"; +export var shadow = "var(--shadow-css, grey)"; export var buttonShadow = "var(--buttonShadow-css, grey)"; export var boxShadow = "var(--boxShadow-css, grey)"; -export var lineShadow = "var(--lineShadow-css, grey)";" +export var lineShadow = "var(--lineShadow-css, grey)"; +export var small = "var(--small-css, 1px)"; +export var medium = "var(--medium-css, 3px)"; +export var scaledSize = "var(--scaledSize-css, 3px)"; +export var appear = "var(--appear-css, 20ms)"; +export var fontFamilyBase = "var(--fontFamilyBase-css, "Helvetica Neue", Arial, sans-serif)"; +export var fontFamilyBody = "var(--fontFamilyBody-css, "Helvetica Neue", Arial, sans-serif)"; +export var containerShadowBase = "var(--containerShadowBase-css, 2px 3px orange, -1px 0 8px olive)"; +export var modalShadowContainer = "var(--modalShadowContainer-css, 2px 3px orange, -1px 0 8px olive)";" `; diff --git a/src/build/tasks/__tests__/internal-tokens.test.ts b/src/build/tasks/__tests__/internal-tokens.test.ts index 9ea0114..b3a3a40 100644 --- a/src/build/tasks/__tests__/internal-tokens.test.ts +++ b/src/build/tasks/__tests__/internal-tokens.test.ts @@ -1,24 +1,16 @@ // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: Apache-2.0 import { test, expect } from 'vitest'; -import { rootTheme, defaultsResolution, preset } from '../../../__fixtures__/common'; +import { defaultsResolution, preset } from '../../../__fixtures__/common'; import { generateTokensDeclarationFile, generateTokensFile } from '../internal-tokens'; const propertiesMap = preset.propertiesMap; -const publicTokens = preset.exposed; test('generateTokensFile matches previous snapshot', () => { - expect(generateTokensFile(rootTheme, defaultsResolution, propertiesMap, publicTokens)).toMatchSnapshot(); + expect(generateTokensFile(defaultsResolution, propertiesMap)).toMatchSnapshot(); }); test('generateTokensDeclarationFile matches previous snapshot', () => { - expect(generateTokensDeclarationFile(publicTokens)).toMatchSnapshot(); -}); - -test('throws error for missing custom properties', () => { - const func = () => { - generateTokensFile(rootTheme, defaultsResolution, {}, publicTokens); - }; - expect(func).toThrowError(new Error('Token shadow is not mapped to a CSS Custom Property')); + expect(generateTokensDeclarationFile(propertiesMap)).toMatchSnapshot(); }); diff --git a/src/build/tasks/internal-tokens.ts b/src/build/tasks/internal-tokens.ts index 5e9ac56..6d10b4c 100644 --- a/src/build/tasks/internal-tokens.ts +++ b/src/build/tasks/internal-tokens.ts @@ -2,43 +2,31 @@ // SPDX-License-Identifier: Apache-2.0 import { writeFile } from '../file'; import { join } from 'path'; -import { SpecificResolution, Theme, ThemePreset } from '../../shared/theme'; +import { SpecificResolution, ThemePreset } from '../../shared/theme'; export async function createInternalTokenFiles( - theme: Theme, resolution: SpecificResolution, propertiesMap: ThemePreset['propertiesMap'], - publicTokens: string[], outputDir: string ) { await writeFile( join(outputDir, 'internal/generated/styles/tokens.js'), - generateTokensFile(theme, resolution, propertiesMap, publicTokens) - ); - await writeFile( - join(outputDir, 'internal/generated/styles/tokens.d.ts'), - generateTokensDeclarationFile(publicTokens) + generateTokensFile(resolution, propertiesMap) ); + await writeFile(join(outputDir, 'internal/generated/styles/tokens.d.ts'), generateTokensDeclarationFile(resolution)); } export function generateTokensFile( - theme: Theme, resolution: SpecificResolution, - propertiesMap: ThemePreset['propertiesMap'], - publicTokens: string[] + propertiesMap: ThemePreset['propertiesMap'] ): string { - return publicTokens - .map((token) => { - const cssName = propertiesMap[token]; - if (!cssName) { - throw new Error(`Token ${token} is not mapped to a CSS Custom Property`); - } - const value = resolution[token]; - return `export var ${token} = "var(${cssName}, ${value})";`; - }) + return Object.entries(resolution) + .map(([token, value]) => `export var ${token} = "var(${propertiesMap[token]}, ${value})";`) .join('\n'); } -export function generateTokensDeclarationFile(publicTokens: string[]): string { - return publicTokens.map((token) => `export const ${token}: string;`).join('\n'); +export function generateTokensDeclarationFile(resolution: SpecificResolution): string { + return Object.keys(resolution) + .map((token) => `export const ${token}: string;`) + .join('\n'); }