diff --git a/scripts/buildTokens.ts b/scripts/buildTokens.ts index 5f0a62993..e278a5fcc 100644 --- a/scripts/buildTokens.ts +++ b/scripts/buildTokens.ts @@ -29,8 +29,8 @@ const getStyleDictionaryConfig: StyleDictionaryConfigGenerator = ( source, // build the special formats include, log: { - warnings: 'disabled', // 'warn' | 'error' | 'disabled' - verbosity: 'silent', // 'default' | 'silent' | 'verbose' + warnings: 'warn', // 'warn' | 'error' | 'disabled' + verbosity: 'verbose', // 'default' | 'silent' | 'verbose' errors: { brokenReferences: 'throw', // 'throw' | 'console' }, @@ -268,6 +268,6 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P * Run build script * ----------------------------------- */ // build to dist -buildDesignTokens({ +await buildDesignTokens({ buildPath: 'dist/', }) diff --git a/scripts/diffTokenProps.ts b/scripts/diffTokenProps.ts index 305658392..caae734a5 100644 --- a/scripts/diffTokenProps.ts +++ b/scripts/diffTokenProps.ts @@ -1,6 +1,6 @@ -import {parse as json5Parse} from 'json5' +import JSON5 from 'json5' import fs from 'fs' -import {flattenObject} from './utilities/flattenObject' +import {flattenObject} from './utilities/flattenObject.js' type DiffItem = { mainThemeName: string @@ -20,7 +20,7 @@ const diffProps = (diffArray: DiffItem[], propsToCheck = ['mix', 'alpha']) => { // add files from mainFiles for (const filePath of mainFiles) { const file = fs.readFileSync(filePath, 'utf8') - mainTheme = {...mainTheme, ...flattenObject(json5Parse(file), undefined, undefined, isToken)} + mainTheme = {...mainTheme, ...flattenObject(JSON5.parse(file), undefined, undefined, isToken)} } // add files from mainThemeDir for (const filePath of fs.readdirSync(mainThemeDir)) { @@ -29,7 +29,7 @@ const diffProps = (diffArray: DiffItem[], propsToCheck = ['mix', 'alpha']) => { } const file = fs.readFileSync(`${mainThemeDir}/${filePath}`, 'utf8') - mainTheme = {...mainTheme, ...flattenObject(json5Parse(file), undefined, undefined, isToken)} + mainTheme = {...mainTheme, ...flattenObject(JSON5.parse(file), undefined, undefined, isToken)} } for (const filePath of fs.readdirSync(overridesDir)) { @@ -38,7 +38,7 @@ const diffProps = (diffArray: DiffItem[], propsToCheck = ['mix', 'alpha']) => { } const fileDiff = [] const file = fs.readFileSync(`${overridesDir}/${filePath}`, 'utf8') - const tokens = flattenObject(json5Parse(file), undefined, undefined, isToken) + const tokens = flattenObject(JSON5.parse(file), undefined, undefined, isToken) for (const [name, value] of Object.entries(tokens)) { if (!mainTheme.hasOwnProperty(name)) { diff --git a/src/PrimerStyleDictionary.ts b/src/PrimerStyleDictionary.ts index b3fb35581..0a096f17b 100644 --- a/src/PrimerStyleDictionary.ts +++ b/src/PrimerStyleDictionary.ts @@ -1,5 +1,4 @@ import StyleDictionary from 'style-dictionary' -import {w3cJsonParser} from './parsers/index.js' import { borderToCss, colorToRgbAlpha, @@ -39,56 +38,58 @@ import { } from './formats/index.js' /** - * Parsers - * + * @name {@link PrimerStyleDictionary} + * @description Returns style dictionary object with primer preset that includes parsers, formats and transformers + * @formats [javascript/esm](https://github.com/primer/primitives/blob/main/config/formats/javascript-esm.ts), [javascript/commonJs](https://github.com/primer/primitives/blob/main/config/formats/javascript-commonJs.ts), [typescript/export-definition](https://github.com/primer/primitives/blob/main/config/formats/typescript-export-defition.ts) + * @transformers [color/rgbAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-rgb-alpha.ts), [color/hexAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex-alpha.ts), [color/hex](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex6.ts), [json/deprecated](https://github.com/primer/primitives/blob/main/config/tranformers/json-deprecated.ts), [name/pathToDotNotation](https://github.com/primer/primitives/blob/main/config/tranformers/name-path-to-dot-notation.ts) */ -StyleDictionary.registerParser(w3cJsonParser) +export const PrimerStyleDictionary: StyleDictionary = new StyleDictionary() /** * Formats * */ -StyleDictionary.registerFormat({ +PrimerStyleDictionary.registerFormat({ name: 'css/advanced', format: cssAdvanced, }) -StyleDictionary.registerFormat({ +PrimerStyleDictionary.registerFormat({ name: 'css/customMedia', format: cssCustomMedia, }) -StyleDictionary.registerFormat({ +PrimerStyleDictionary.registerFormat({ name: 'javascript/esm', format: javascriptEsm, }) -StyleDictionary.registerFormat({ +PrimerStyleDictionary.registerFormat({ name: 'javascript/commonJs', format: javascriptCommonJs, }) -StyleDictionary.registerFormat({ +PrimerStyleDictionary.registerFormat({ name: 'typescript/export-definition', format: typescriptExportDefinition, }) -StyleDictionary.registerFormat({ +PrimerStyleDictionary.registerFormat({ name: 'json/nested-prefixed', format: jsonNestedPrefixed, }) -StyleDictionary.registerFormat({ +PrimerStyleDictionary.registerFormat({ name: 'json/one-dimensional', format: jsonOneDimensional, }) -StyleDictionary.registerFormat({ +PrimerStyleDictionary.registerFormat({ name: 'json/postCss-fallback', format: jsonPostCssFallback, }) -StyleDictionary.registerFormat({ +PrimerStyleDictionary.registerFormat({ name: 'json/figma', format: jsonFigma, }) @@ -97,111 +98,101 @@ StyleDictionary.registerFormat({ * Transformers * */ -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...colorToRgbAlpha, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...colorToRgbaFloat, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...colorToHexMix, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...colorToHex, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...floatToPixel, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...floatToPixelUnitless, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...dimensionToRem, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...dimensionToRemPxArray, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...dimensionToPixelUnitless, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...durationToCss, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...figmaAttributes, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...jsonDeprecated, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...namePathToCamelCase, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...namePathToPascalCase, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...namePathToDotNotation, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...namePathToFigma, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...namePathToCamelCase, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...namePathToKebabCase, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...namePathToSlashNotation, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...shadowToCss, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...borderToCss, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...typographyToCss, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...fontWeightToNumber, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...fontFamilyToCss, }) -StyleDictionary.registerTransform({ +PrimerStyleDictionary.registerTransform({ ...fontFamilyToFigma, }) - -/** - * @name {@link PrimerStyleDictionary} - * @description Returns style dictionary object with primer preset that includes parsers, formats and transformers - * @parsers [w3cJsonParser](https://github.com/primer/primitives/blob/main/config//parsers/w3c-json-parser.ts) - * @formats [javascript/esm](https://github.com/primer/primitives/blob/main/config/formats/javascript-esm.ts), [javascript/commonJs](https://github.com/primer/primitives/blob/main/config/formats/javascript-commonJs.ts), [typescript/export-definition](https://github.com/primer/primitives/blob/main/config/formats/typescript-export-defition.ts) - * @transformers [color/rgbAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-rgb-alpha.ts), [color/hexAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex-alpha.ts), [color/hex](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex6.ts), [json/deprecated](https://github.com/primer/primitives/blob/main/config/tranformers/json-deprecated.ts), [name/pathToDotNotation](https://github.com/primer/primitives/blob/main/config/tranformers/name-path-to-dot-notation.ts) - */ - -export const PrimerStyleDictionary: StyleDictionary = new StyleDictionary() diff --git a/src/filters/isColor.ts b/src/filters/isColor.ts index 681e577b6..f32e7ee90 100644 --- a/src/filters/isColor.ts +++ b/src/filters/isColor.ts @@ -6,5 +6,9 @@ import type {TransformedToken} from 'style-dictionary/types' * @returns boolean */ export const isColor = (token: TransformedToken): boolean => { - return token.$type === 'color' + const typeValue = token.$type ?? token.type + // if (token.path.join('-') === 'control-transparent-bgColor-selected') { + // console.log(typeValue === 'color', token) + // } + return typeValue === 'color' } diff --git a/src/formats/jsonOneDimensional.ts b/src/formats/jsonOneDimensional.ts index 99db73d93..2e2f91874 100644 --- a/src/formats/jsonOneDimensional.ts +++ b/src/formats/jsonOneDimensional.ts @@ -9,10 +9,27 @@ import type {FormatFn, FormatFnArguments} from 'style-dictionary/types' */ export const jsonOneDimensional: FormatFn = ({dictionary, file: _file, options}: FormatFnArguments) => { // option to allow verbose output (object) or just the value - const {outputVerbose} = options + const {outputVerbose, propertyConversion} = options const tokens = jsonToFlat(dictionary.allTokens, outputVerbose) - // add file header and convert output - const output = JSON.stringify(tokens, null, 2) + if (propertyConversion === undefined) { + // + const output = JSON.stringify(tokens, null, 2) + // return prettified + return format(output, {parser: 'json', printWidth: 500}) + } + // replace property names + const convertedTokens = Object.fromEntries( + Object.entries(tokens).map(([name, token]) => { + for (const [from, to] of Object.entries(propertyConversion as Record)) { + if (from in token) { + token[to] = token[from] + delete token[from] + } + } + return [name, token] + }), + ) + const output = JSON.stringify(convertedTokens, null, 2) // return prettified return format(output, {parser: 'json', printWidth: 500}) } diff --git a/src/platforms/docJson.ts b/src/platforms/docJson.ts index 70abf8ff9..bc763114b 100644 --- a/src/platforms/docJson.ts +++ b/src/platforms/docJson.ts @@ -18,6 +18,11 @@ export const docJson: PlatformInitializer = (outputFile, prefix, buildPath): Pla ], options: { basePxFontSize: 16, + propertyConversion: { + $value: 'value', + $type: 'type', + $description: 'description', + }, }, files: [ { diff --git a/src/tokens/functional/color/light/primitives-light.json5 b/src/tokens/functional/color/light/primitives-light.json5 index 2fc0e9f16..4ed7b0c12 100644 --- a/src/tokens/functional/color/light/primitives-light.json5 +++ b/src/tokens/functional/color/light/primitives-light.json5 @@ -118,7 +118,7 @@ group: 'semantic', scopes: ['fgColor'], }, - } + }, }, accent: { $value: '{base.color.blue.5}', @@ -806,7 +806,7 @@ scopes: ['borderColor'], }, }, - alpha: 0.1 + alpha: 0.1, }, transparent: { $value: '{base.color.transparent}', diff --git a/src/transformers/borderToCss.test.ts b/src/transformers/borderToCss.test.ts index 0da346bb5..a15042b8a 100644 --- a/src/transformers/borderToCss.test.ts +++ b/src/transformers/borderToCss.test.ts @@ -4,7 +4,7 @@ import {borderToCss} from './borderToCss.js' describe('Transformer: borderToCss', () => { it('transforms `border` token to css border string', () => { const input = getMockToken({ - value: { + $value: { color: '#000000', style: 'solid', width: '1px', @@ -20,7 +20,7 @@ describe('Transformer: borderToCss', () => { expect(() => borderToCss.transform( getMockToken({ - value: { + $value: { color: '#000000', style: 'solid', }, @@ -34,7 +34,7 @@ describe('Transformer: borderToCss', () => { expect(() => borderToCss.transform( getMockToken({ - value: { + $value: { color: '#000000', width: '1px', }, @@ -48,7 +48,7 @@ describe('Transformer: borderToCss', () => { expect(() => borderToCss.transform( getMockToken({ - value: { + $value: { style: 'solid', width: '1px', }, diff --git a/src/transformers/borderToCss.ts b/src/transformers/borderToCss.ts index 42090615b..3236c4762 100644 --- a/src/transformers/borderToCss.ts +++ b/src/transformers/borderToCss.ts @@ -1,4 +1,4 @@ -import type {Config, PlatformConfig, Transform, TransformedToken} from 'style-dictionary/types' +import type {Transform, TransformedToken} from 'style-dictionary/types' import {isBorder} from '../filters/isBorder.js' import type {BorderTokenValue} from '../types/BorderTokenValue.js' @@ -21,12 +21,11 @@ const checkForBorderTokenProperties = (border: Record): border */ export const borderToCss: Transform = { name: 'border/css', - type: `value`, + type: 'value', transitive: true, filter: isBorder, - transform: (token: TransformedToken, config: PlatformConfig, options: Config) => { - const valueProp = options.usesDtcg ? '$value' : 'value' - const value = token[valueProp] + transform: (token: TransformedToken) => { + const value = token.$value ?? token.value // if value === string it was probably already transformed if (typeof value === 'string') { return value diff --git a/src/transformers/colorToHex.test.ts b/src/transformers/colorToHex.test.ts index 051d90665..1b1edaabc 100644 --- a/src/transformers/colorToHex.test.ts +++ b/src/transformers/colorToHex.test.ts @@ -3,40 +3,44 @@ import {colorToHex} from './colorToHex.js' describe('Transform: colorToHex', () => { it('transforms `hex3`, `hex6`, and `hex8` tokens to hex value', () => { - const input = [getMockToken({value: '#123'}), getMockToken({value: '#343434'}), getMockToken({value: '#34343466'})] + const input = [ + getMockToken({$value: '#123'}), + getMockToken({$value: '#343434'}), + getMockToken({$value: '#34343466'}), + ] const expectedOutput = ['#112233', '#343434', '#34343466'] expect(input.map(item => colorToHex.transform(item, {}, {}))).toStrictEqual(expectedOutput) }) it('transforms `rgb` and `rgba` to hex value', () => { - const input = [getMockToken({value: 'rgb(100,200,255)'}), getMockToken({value: 'rgba(100,200,255, .4)'})] + const input = [getMockToken({$value: 'rgb(100,200,255)'}), getMockToken({$value: 'rgba(100,200,255, .4)'})] const expectedOutput = ['#64c8ff', '#64c8ff66'] expect(input.map(item => colorToHex.transform(item, {}, {}))).toStrictEqual(expectedOutput) }) it('transforms hex3, hex6 `color` tokens with alpha value', () => { - const input = [getMockToken({value: '#123', alpha: 0.2}), getMockToken({value: '#343434', alpha: 0.4})] + const input = [getMockToken({$value: '#123', alpha: 0.2}), getMockToken({$value: '#343434', alpha: 0.4})] const expectedOutput = ['#11223333', '#34343466'] expect(input.map(item => colorToHex.transform(item, {}, {}))).toStrictEqual(expectedOutput) }) it('transforms hex8 `color` tokens with alpha value, ignoring the initial alpha from the hex8', () => { - const input = getMockToken({value: '#34343466', alpha: 0.6}) + const input = getMockToken({$value: '#34343466', alpha: 0.6}) expect(colorToHex.transform(input, {}, {})).toStrictEqual('#34343499') }) it('transforms rgb `color` tokens with alpha value', () => { - const input = getMockToken({value: 'rgb(100,200,255)', alpha: 0.6}) + const input = getMockToken({$value: 'rgb(100,200,255)', alpha: 0.6}) expect(colorToHex.transform(input, {}, {})).toStrictEqual('#64c8ff99') }) it('transforms rgba `color` tokens with alpha value, ignoring the initial alpha from the hex8', () => { - const input = getMockToken({value: 'rgba(100,200,255, 0.2)', alpha: 0.6}) + const input = getMockToken({$value: 'rgba(100,200,255, 0.2)', alpha: 0.6}) expect(colorToHex.transform(input, {}, {})).toStrictEqual('#64c8ff99') }) it('transforms rgba `color` tokens with alpha null, ignoring alpha', () => { - const input = getMockToken({value: 'rgba(100,200,255, 0.5)', alpha: null}) + const input = getMockToken({$value: 'rgba(100,200,255, 0.5)', alpha: null}) expect(colorToHex.transform(input, {}, {})).toStrictEqual('#64c8ff80') }) }) diff --git a/src/transformers/colorToHex.ts b/src/transformers/colorToHex.ts index b987d0d36..99042d39c 100644 --- a/src/transformers/colorToHex.ts +++ b/src/transformers/colorToHex.ts @@ -1,7 +1,7 @@ import {toHex} from 'color2k' import {isColor} from '../filters/index.js' import {getTokenValue} from './utilities/getTokenValue.js' -import type {Transform, TransformedToken, PlatformConfig, Config} from 'style-dictionary/types' +import type {Transform, TransformedToken} from 'style-dictionary/types' import {alpha} from './utilities/alpha.js' /** * @description converts color tokens value to `hex6` or `hex8` @@ -11,14 +11,14 @@ import {alpha} from './utilities/alpha.js' */ export const colorToHex: Transform = { name: 'color/hex', - type: `value`, + type: 'value', transitive: true, filter: isColor, - transform: (token: TransformedToken, config: PlatformConfig, options: Config) => { + transform: (token: TransformedToken) => { const alphaValue = token.alpha ?? token.$extensions?.alpha if (alphaValue === null || alphaValue === undefined) { - return toHex(getTokenValue(token, undefined, options)) + return toHex(getTokenValue(token)) } - return toHex(alpha(getTokenValue(token, undefined, options), alphaValue, token)) + return toHex(alpha(getTokenValue(token), alphaValue, token)) }, } diff --git a/src/transformers/colorToHexMix.test.ts b/src/transformers/colorToHexMix.test.ts index cf132f3dc..d990e6bc1 100644 --- a/src/transformers/colorToHexMix.test.ts +++ b/src/transformers/colorToHexMix.test.ts @@ -5,14 +5,14 @@ describe('Transformer: colorToHexMix', () => { it('transforms hex3, hex6 `color` tokens with mix', () => { const input = [ getMockToken({ - value: '#567', + $value: '#567', mix: { color: '#000', weight: 0.5, }, }), getMockToken({ - value: '#556677', + $value: '#556677', mix: { color: '#000', weight: 0.5, @@ -26,7 +26,7 @@ describe('Transformer: colorToHexMix', () => { it('transforms color with mix but ignores alpha property of token', () => { const input = [ getMockToken({ - value: '#556677', + $value: '#556677', alpha: 0.4, mix: { color: '#000', @@ -41,14 +41,14 @@ describe('Transformer: colorToHexMix', () => { it('transforms color with mix and merges alpha from hex8', () => { const input = [ getMockToken({ - value: '#55667755', + $value: '#55667755', mix: { color: '#000', weight: 0.2, }, }), getMockToken({ - value: '#55667755', + $value: '#55667755', mix: { color: '#00000022', weight: 0.2, @@ -62,16 +62,16 @@ describe('Transformer: colorToHexMix', () => { it('ignore mix if undefined or weight or color is undefined', () => { const input = [ getMockToken({ - value: '#556677', + $value: '#556677', }), getMockToken({ - value: '#556677', + $value: '#556677', mix: { weight: 0.2, }, }), getMockToken({ - value: '#556677', + $value: '#556677', mix: { color: '#000000', }, diff --git a/src/transformers/colorToHexMix.ts b/src/transformers/colorToHexMix.ts index 879a464af..ff63a3656 100644 --- a/src/transformers/colorToHexMix.ts +++ b/src/transformers/colorToHexMix.ts @@ -2,7 +2,7 @@ import {toHex} from 'color2k' import {isColorWithMix} from '../filters/index.js' import {getTokenValue} from './utilities/getTokenValue.js' import mix from './utilities/mix.js' -import type {Config, PlatformConfig, Transform, TransformedToken} from 'style-dictionary/types' +import type {Transform, TransformedToken} from 'style-dictionary/types' /** * @description replaces tokens value with `hex8` color using the tokens `alpha` property to specify the value used for alpha * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts) @@ -11,16 +11,10 @@ import type {Config, PlatformConfig, Transform, TransformedToken} from 'style-di */ export const colorToHexMix: Transform = { name: 'color/hexMix', - type: `value`, + type: 'value', transitive: true, filter: isColorWithMix, - transform: (token: TransformedToken, config: PlatformConfig, options: Config) => { - return toHex( - mix( - getTokenValue(token, undefined, options), - token.mix?.color || getTokenValue(token, undefined, options), - token.mix?.weight || 0, - ), - ) + transform: (token: TransformedToken) => { + return toHex(mix(getTokenValue(token), token.mix?.color || getTokenValue(token), token.mix?.weight || 0)) }, } diff --git a/src/transformers/colorToRgbAlpha.test.ts b/src/transformers/colorToRgbAlpha.test.ts index 2a9e87135..f286178e3 100644 --- a/src/transformers/colorToRgbAlpha.test.ts +++ b/src/transformers/colorToRgbAlpha.test.ts @@ -3,30 +3,30 @@ import {colorToRgbAlpha} from './colorToRgbAlpha.js' describe('Transformer: colorToRgbAlpha', () => { it('transforms hex3, hex6 `color` tokens with alpha value', () => { - const input = [getMockToken({value: '#123', alpha: 0.2}), getMockToken({value: '#343434', alpha: 0.4})] + const input = [getMockToken({$value: '#123', alpha: 0.2}), getMockToken({$value: '#343434', alpha: 0.4})] const expectedOutput = ['rgba(17, 34, 51, 0.2)', 'rgba(52, 52, 52, 0.4)'] expect(input.map(item => colorToRgbAlpha.transform(item, {}, {}))).toStrictEqual(expectedOutput) }) it('transforms hex8 `color` tokens with alpha value, ignoring the initial alpha from the hex8', () => { - const input = getMockToken({value: '#34343466', alpha: 0.6}) + const input = getMockToken({$value: '#34343466', alpha: 0.6}) const expectedOutput = 'rgba(52, 52, 52, 0.6)' expect(colorToRgbAlpha.transform(input, {}, {})).toStrictEqual(expectedOutput) }) it('transforms rgb `color` tokens with alpha value', () => { - const input = getMockToken({value: 'rgb(100,200,255)', alpha: 0.6}) + const input = getMockToken({$value: 'rgb(100,200,255)', alpha: 0.6}) const expectedOutput = 'rgba(100, 200, 255, 0.6)' expect(colorToRgbAlpha.transform(input, {}, {})).toStrictEqual(expectedOutput) }) it('transforms rgba `color` tokens with alpha value, ignoring the initial alpha from the hex8', () => { - const input = getMockToken({value: 'rgba(100,200,255, 0.2)', alpha: 0.6}) + const input = getMockToken({$value: 'rgba(100,200,255, 0.2)', alpha: 0.6}) const expectedOutput = 'rgba(100, 200, 255, 0.6)' expect(colorToRgbAlpha.transform(input, {}, {})).toStrictEqual(expectedOutput) }) it('transforms rgba `color` tokens with alpha null, ignoring alpha', () => { - const input = getMockToken({value: 'rgba(100,200,255, 0.5)', alpha: null}) + const input = getMockToken({$value: 'rgba(100,200,255, 0.5)', alpha: null}) const expectedOutput = 'rgba(100,200,255, 0.5)' expect(colorToRgbAlpha.transform(input, {}, {})).toStrictEqual(expectedOutput) }) diff --git a/src/transformers/colorToRgbAlpha.ts b/src/transformers/colorToRgbAlpha.ts index 2ca3d2a31..896f07904 100644 --- a/src/transformers/colorToRgbAlpha.ts +++ b/src/transformers/colorToRgbAlpha.ts @@ -10,7 +10,7 @@ import type {PlatformConfig, Transform, TransformedToken} from 'style-dictionary */ export const colorToRgbAlpha: Transform = { name: 'color/rgbAlpha', - type: `value`, + type: 'value', transitive: true, filter: isColorWithAlpha, transform: (token: TransformedToken, config: PlatformConfig) => { diff --git a/src/transformers/colorToRgbaFloat.test.ts b/src/transformers/colorToRgbaFloat.test.ts index 6f4947891..62fe5b73c 100644 --- a/src/transformers/colorToRgbaFloat.test.ts +++ b/src/transformers/colorToRgbaFloat.test.ts @@ -4,7 +4,11 @@ import {rgbaFloatToHex} from './utilities/rgbaFloatToHex.js' describe('Transformer: colorToRgbaFloat', () => { it('transforms `hex3`, `hex6`, and `hex8` tokens to rgb float value', () => { - const input = [getMockToken({value: '#123'}), getMockToken({value: '#343434'}), getMockToken({value: '#34343466'})] + const input = [ + getMockToken({$value: '#123'}), + getMockToken({$value: '#343434'}), + getMockToken({$value: '#34343466'}), + ] const expectedOutput = [ { r: 0.06666666666666667, @@ -29,7 +33,7 @@ describe('Transformer: colorToRgbaFloat', () => { }) it('transforms `rgb` and `rgba` to rgb float value', () => { - const input = [getMockToken({value: 'rgb(100,200,255)'}), getMockToken({value: 'rgba(100,200,255, .4)'})] + const input = [getMockToken({$value: 'rgb(100,200,255)'}), getMockToken({$value: 'rgba(100,200,255, .4)'})] const expectedOutput = [ { r: 0.39215686274509803, @@ -50,10 +54,10 @@ describe('Transformer: colorToRgbaFloat', () => { it('transforms `color` tokens including alpha value', () => { expect( [ - getMockToken({value: '#343434', alpha: 0.4}), - getMockToken({value: '#34343466', alpha: 0.9}), - getMockToken({value: 'rgb(100,200,255)', alpha: 0.4}), - getMockToken({value: 'rgba(100,200,255,0.8)', alpha: 0.4}), + getMockToken({$value: '#343434', alpha: 0.4}), + getMockToken({$value: '#34343466', alpha: 0.9}), + getMockToken({$value: 'rgb(100,200,255)', alpha: 0.4}), + getMockToken({$value: 'rgba(100,200,255,0.8)', alpha: 0.4}), ].map(item => colorToRgbaFloat.transform(item, {}, {})), ).toStrictEqual([ { @@ -86,10 +90,10 @@ describe('Transformer: colorToRgbaFloat', () => { it('transforms `color` tokens including mix', () => { expect( [ - getMockToken({name: 'Mix of reds', value: '#a40e26', mix: {color: '#660018', weight: 0.4}}), - getMockToken({value: '#34343466', mix: {color: '#000000'}}), - getMockToken({value: 'rgb(100,200,255)', mix: {weight: 0.5}}), - getMockToken({value: 'rgba(100,200,255,0.8)', mix: {color: undefined, weight: undefined}}), + getMockToken({name: 'Mix of reds', $value: '#a40e26', mix: {color: '#660018', weight: 0.4}}), + getMockToken({$value: '#34343466', mix: {color: '#000000'}}), + getMockToken({$value: 'rgb(100,200,255)', mix: {weight: 0.5}}), + getMockToken({$value: 'rgba(100,200,255,0.8)', mix: {color: undefined, weight: undefined}}), ].map(item => colorToRgbaFloat.transform(item, {}, {})), ).toStrictEqual([ { @@ -120,10 +124,10 @@ describe('Transformer: colorToRgbaFloat', () => { expect( [ - getMockToken({name: 'Mix of reds', value: '#a40e26', mix: {color: '#660018', weight: 0.4}}), - getMockToken({value: '#34343466', mix: {color: '#000000'}}), - getMockToken({value: 'rgb(100,200,255)', mix: {weight: 0.5}}), - getMockToken({value: 'rgba(100,200,255,0.8)', mix: {color: undefined, weight: undefined}}), + getMockToken({name: 'Mix of reds', $value: '#a40e26', mix: {color: '#660018', weight: 0.4}}), + getMockToken({$value: '#34343466', mix: {color: '#000000'}}), + getMockToken({$value: 'rgb(100,200,255)', mix: {weight: 0.5}}), + getMockToken({$value: 'rgba(100,200,255,0.8)', mix: {color: undefined, weight: undefined}}), ] .map(item => colorToRgbaFloat.transform(item, {}, {}) as {r: number; g: number; b: number; a?: number}) .map(item => rgbaFloatToHex(item)), @@ -133,7 +137,7 @@ describe('Transformer: colorToRgbaFloat', () => { it('it forwards `rgb float` values', () => { const input = [ getMockToken({ - value: { + $value: { r: 0.39215686274509803, g: 0.7843137254901961, b: 1, @@ -141,7 +145,7 @@ describe('Transformer: colorToRgbaFloat', () => { }, }), getMockToken({ - value: { + $value: { r: 0.39215686274509803, g: 0.7843137254901961, b: 1, diff --git a/src/transformers/colorToRgbaFloat.ts b/src/transformers/colorToRgbaFloat.ts index 341725783..e87919f65 100644 --- a/src/transformers/colorToRgbaFloat.ts +++ b/src/transformers/colorToRgbaFloat.ts @@ -5,10 +5,10 @@ import {rgbaFloatToHex} from './utilities/rgbaFloatToHex.js' import mix from './utilities/mix.js' import {hexToRgbaFloat} from './utilities/hexToRgbaFloat.js' import {isRgbaFloat} from './utilities/isRgbaFloat.js' -import type {Transform, TransformedToken, Config, PlatformConfig} from 'style-dictionary/types' +import type {Transform, TransformedToken} from 'style-dictionary/types' -const toRgbaFloat = (token: TransformedToken, alpha: undefined | number = undefined, options: Config) => { - let tokenValue = getTokenValue(token, undefined, options) +const toRgbaFloat = (token: TransformedToken, alpha: undefined | number = undefined) => { + let tokenValue = getTokenValue(token) let tokenMixColor = token.mix?.color // get hex value from color string if (isRgbaFloat(tokenValue)) { @@ -34,15 +34,14 @@ const toRgbaFloat = (token: TransformedToken, alpha: undefined | number = undefi */ export const colorToRgbaFloat: Transform = { name: 'color/rgbaFloat', - type: `value`, + type: 'value', transitive: true, filter: isColor, - transform: (token: TransformedToken, config: PlatformConfig, options: Config) => { - const {usesDtcg} = options - const valueProp = usesDtcg ? '$value' : 'value' + transform: (token: TransformedToken) => { + const value = getTokenValue(token) // skip if value is already rgb float - if (isRgbaFloat(token[valueProp]) && !('mix' in token) && !('alpha' in token)) return token[valueProp] + if (isRgbaFloat(value) && !('mix' in token) && !('alpha' in token)) return value // convert hex or rgb values to rgba float - return toRgbaFloat(token, token.alpha, options) + return toRgbaFloat(token, token.alpha) }, } diff --git a/src/transformers/dimensionToPixelUnitless.ts b/src/transformers/dimensionToPixelUnitless.ts index c9e50d856..f6b082743 100644 --- a/src/transformers/dimensionToPixelUnitless.ts +++ b/src/transformers/dimensionToPixelUnitless.ts @@ -30,7 +30,7 @@ const hasUnit = (value: string | number, unit: string): boolean => { */ export const dimensionToPixelUnitless: Transform = { name: 'dimension/pixelUnitless', - type: `value`, + type: 'value', transitive: true, filter: isDimension, transform: (token: TransformedToken, config: PlatformConfig, options: Config) => { diff --git a/src/transformers/dimensionToRem.ts b/src/transformers/dimensionToRem.ts index e0983abe7..5aaba8e70 100644 --- a/src/transformers/dimensionToRem.ts +++ b/src/transformers/dimensionToRem.ts @@ -30,7 +30,7 @@ const hasUnit = (value: string | number, unit: string): boolean => { */ export const dimensionToRem: Transform = { name: 'dimension/rem', - type: `value`, + type: 'value', transitive: true, filter: isDimension, transform: (token: TransformedToken, config: PlatformConfig, options: Config) => { diff --git a/src/transformers/dimensionToRemPxArray.ts b/src/transformers/dimensionToRemPxArray.ts index 960c2759d..f5e0966ea 100644 --- a/src/transformers/dimensionToRemPxArray.ts +++ b/src/transformers/dimensionToRemPxArray.ts @@ -34,7 +34,7 @@ const hasUnit = (value: string | number, unit: string): boolean => { */ export const dimensionToRemPxArray: Transform = { name: 'dimension/remPxArray', - type: `value`, + type: 'value', transitive: true, filter: isDimension, transform: (token: TransformedToken, config: PlatformConfig, options: Config): [SizeRem | SizeEm, SizePx] => { diff --git a/src/transformers/durationToCss.ts b/src/transformers/durationToCss.ts index 7e51daba3..88698a444 100644 --- a/src/transformers/durationToCss.ts +++ b/src/transformers/durationToCss.ts @@ -9,7 +9,7 @@ import {isDuration} from '../filters/isDuration.js' */ export const durationToCss: Transform = { name: 'duration/css', - type: `value`, + type: 'value', transitive: true, filter: isDuration, transform: (token: TransformedToken, _config: PlatformConfig, options: Config) => { diff --git a/src/transformers/floatToPixel.ts b/src/transformers/floatToPixel.ts index 01a5d0abf..db65dbae8 100644 --- a/src/transformers/floatToPixel.ts +++ b/src/transformers/floatToPixel.ts @@ -27,7 +27,7 @@ export const convertFloatToPixel = (token: TransformedToken, unitless = false) = */ export const floatToPixel: Transform = { name: 'float/pixel', - type: `value`, + type: 'value', transitive: true, filter: isNumber, transform: (token: TransformedToken): string => convertFloatToPixel(token), @@ -35,7 +35,7 @@ export const floatToPixel: Transform = { export const floatToPixelUnitless: Transform = { name: 'float/pixelUnitless', - type: `value`, + type: 'value', transitive: true, filter: isNumber, transform: (token: TransformedToken): string => convertFloatToPixel(token, true), diff --git a/src/transformers/fontFamilyToCss.test.ts b/src/transformers/fontFamilyToCss.test.ts index f8cd77145..2e10ae70c 100644 --- a/src/transformers/fontFamilyToCss.test.ts +++ b/src/transformers/fontFamilyToCss.test.ts @@ -5,10 +5,10 @@ describe('Transformer: fontFamilyToCss', () => { it('transforms fontFamily string', () => { const input = [ getMockToken({ - value: 'Roboto, Noto Sans', + $value: 'Roboto, Noto Sans', }), getMockToken({ - value: 'Roboto', + $value: 'Roboto', }), ] const expectedOutput = ['Roboto, Noto Sans', 'Roboto'] @@ -18,10 +18,10 @@ describe('Transformer: fontFamilyToCss', () => { it('transforms fontFamily array', () => { const input = [ getMockToken({ - value: ['Roboto', 'Noto Sans'], + $value: ['Roboto', 'Noto Sans'], }), getMockToken({ - value: ['Roboto'], + $value: ['Roboto'], }), ] const expectedOutput = ["Roboto, 'Noto Sans'", 'Roboto'] @@ -32,7 +32,7 @@ describe('Transformer: fontFamilyToCss', () => { expect(() => fontFamilyToCss.transform( getMockToken({ - value: { + $value: { fontFamily: 'Roboto', fontSize: '42px', }, @@ -45,7 +45,7 @@ describe('Transformer: fontFamilyToCss', () => { expect(() => fontFamilyToCss.transform( getMockToken({ - value: 42, + $value: 42, }), {}, {}, @@ -55,7 +55,7 @@ describe('Transformer: fontFamilyToCss', () => { expect(() => fontFamilyToCss.transform( getMockToken({ - value: undefined, + $value: undefined, }), {}, {}, @@ -65,7 +65,7 @@ describe('Transformer: fontFamilyToCss', () => { expect(() => fontFamilyToCss.transform( getMockToken({ - value: [42, 'Roboto'], + $value: [42, 'Roboto'], }), {}, {}, diff --git a/src/transformers/fontFamilyToCss.ts b/src/transformers/fontFamilyToCss.ts index f226391c7..d666b25ee 100644 --- a/src/transformers/fontFamilyToCss.ts +++ b/src/transformers/fontFamilyToCss.ts @@ -31,7 +31,7 @@ export const parseFontFamily = (value: unknown): string => { */ export const fontFamilyToCss: Transform = { name: 'fontFamily/css', - type: `value`, + type: 'value', transitive: true, filter: isFontFamily, transform: (token: TransformedToken, config: PlatformConfig): string => diff --git a/src/transformers/fontFamilyToFigma.ts b/src/transformers/fontFamilyToFigma.ts index 75baa1706..d3db998f4 100644 --- a/src/transformers/fontFamilyToFigma.ts +++ b/src/transformers/fontFamilyToFigma.ts @@ -42,7 +42,7 @@ export const parseFontFamily = ( */ export const fontFamilyToFigma: Transform = { name: 'fontFamily/figma', - type: `value`, + type: 'value', transitive: true, filter: isFontFamily, transform: (token: TransformedToken, platform: PlatformConfig, options: Config): string => diff --git a/src/transformers/fontWeightToNumber.ts b/src/transformers/fontWeightToNumber.ts index 337165e6e..7f6bf6c1c 100644 --- a/src/transformers/fontWeightToNumber.ts +++ b/src/transformers/fontWeightToNumber.ts @@ -1,4 +1,4 @@ -import type {Config, PlatformConfig, Transform, TransformedToken} from 'style-dictionary/types' +import type {Transform, TransformedToken} from 'style-dictionary/types' import {isFontWeight} from '../filters/index.js' import {getTokenValue} from './utilities/getTokenValue.js' @@ -47,9 +47,8 @@ export const parseFontWeight = (value: unknown): number => { */ export const fontWeightToNumber: Transform = { name: 'fontWeight/number', - type: `value`, + type: 'value', transitive: true, filter: isFontWeight, - transform: (token: TransformedToken, config: PlatformConfig, options: Config): number => - parseFontWeight(getTokenValue(token, undefined, options)), + transform: (token: TransformedToken): number => parseFontWeight(getTokenValue(token)), } diff --git a/src/transformers/fontWeightToNumbers.test.ts b/src/transformers/fontWeightToNumbers.test.ts index 1b450d833..4038006c5 100644 --- a/src/transformers/fontWeightToNumbers.test.ts +++ b/src/transformers/fontWeightToNumbers.test.ts @@ -5,10 +5,10 @@ describe('Transformer: fontWeightToNumbers', () => { it('keeps number if within range of 1-1000', () => { const input = [ getMockToken({ - value: 100, + $value: 100, }), getMockToken({ - value: 1000, + $value: 1000, }), ] const expectedOutput = [100, 1000] @@ -17,7 +17,7 @@ describe('Transformer: fontWeightToNumbers', () => { it('transforms string of number to number', () => { const input = getMockToken({ - value: '100', + $value: '100', }) const expectedOutput = 100 expect(fontWeightToNumber.transform(input, {}, {})).toStrictEqual(expectedOutput) @@ -47,7 +47,7 @@ describe('Transformer: fontWeightToNumbers', () => { for (const [fontWeightNumber, fontWeightString] of testCases) { const input = getMockToken({ - value: fontWeightString, + $value: fontWeightString, }) try { expect(fontWeightToNumber.transform(input, {}, {})).toStrictEqual(fontWeightNumber) @@ -61,7 +61,7 @@ describe('Transformer: fontWeightToNumbers', () => { expect(() => fontWeightToNumber.transform( getMockToken({ - value: 1001, + $value: 1001, }), {}, {}, @@ -71,7 +71,7 @@ describe('Transformer: fontWeightToNumbers', () => { expect(() => fontWeightToNumber.transform( getMockToken({ - value: 0, + $value: 0, }), {}, {}, @@ -81,7 +81,7 @@ describe('Transformer: fontWeightToNumbers', () => { expect(() => fontWeightToNumber.transform( getMockToken({ - value: undefined, + $value: undefined, }), {}, {}, @@ -91,7 +91,7 @@ describe('Transformer: fontWeightToNumbers', () => { expect(() => fontWeightToNumber.transform( getMockToken({ - value: 'Roboto', + $value: 'Roboto', }), {}, {}, @@ -101,7 +101,7 @@ describe('Transformer: fontWeightToNumbers', () => { expect(() => fontWeightToNumber.transform( getMockToken({ - value: ['Roboto'], + $value: ['Roboto'], }), {}, {}, @@ -111,7 +111,7 @@ describe('Transformer: fontWeightToNumbers', () => { expect(() => fontWeightToNumber.transform( getMockToken({ - value: { + $value: { fontWeight: 300, }, }), diff --git a/src/transformers/index.ts b/src/transformers/index.ts index 9a86428aa..41e046383 100644 --- a/src/transformers/index.ts +++ b/src/transformers/index.ts @@ -1,24 +1,24 @@ -export {borderToCss} from './borderToCss' -export {colorToHex} from './colorToHex' -export {colorToHexMix} from './colorToHexMix' -export {colorToRgbAlpha} from './colorToRgbAlpha' -export {colorToRgbaFloat} from './colorToRgbaFloat' -export {floatToPixel} from './floatToPixel' -export {floatToPixelUnitless} from './floatToPixel' -export {dimensionToRem} from './dimensionToRem' -export {dimensionToRemPxArray} from './dimensionToRemPxArray' -export {dimensionToPixelUnitless} from './dimensionToPixelUnitless' -export {durationToCss} from './durationToCss' -export {figmaAttributes} from './figmaAttributes' -export {fontFamilyToCss} from './fontFamilyToCss' -export {fontFamilyToFigma} from './fontFamilyToFigma' -export {fontWeightToNumber} from './fontWeightToNumber' -export {jsonDeprecated} from './jsonDeprecated' -export {namePathToCamelCase} from './namePathToCamelCase' -export {namePathToPascalCase} from './namePathToPascalCase' -export {namePathToDotNotation} from './namePathToDotNotation' -export {namePathToFigma} from './namePathToFigma' -export {namePathToKebabCase} from './namePathToKebabCase' -export {namePathToSlashNotation} from './namePathToSlashNotation' -export {shadowToCss} from './shadowToCss' -export {typographyToCss} from './typographyToCss' +export {borderToCss} from './borderToCss.js' +export {colorToHex} from './colorToHex.js' +export {colorToHexMix} from './colorToHexMix.js' +export {colorToRgbAlpha} from './colorToRgbAlpha.js' +export {colorToRgbaFloat} from './colorToRgbaFloat.js' +export {floatToPixel} from './floatToPixel.js' +export {floatToPixelUnitless} from './floatToPixel.js' +export {dimensionToRem} from './dimensionToRem.js' +export {dimensionToRemPxArray} from './dimensionToRemPxArray.js' +export {dimensionToPixelUnitless} from './dimensionToPixelUnitless.js' +export {durationToCss} from './durationToCss.js' +export {figmaAttributes} from './figmaAttributes.js' +export {fontFamilyToCss} from './fontFamilyToCss.js' +export {fontFamilyToFigma} from './fontFamilyToFigma.js' +export {fontWeightToNumber} from './fontWeightToNumber.js' +export {jsonDeprecated} from './jsonDeprecated.js' +export {namePathToCamelCase} from './namePathToCamelCase.js' +export {namePathToPascalCase} from './namePathToPascalCase.js' +export {namePathToDotNotation} from './namePathToDotNotation.js' +export {namePathToFigma} from './namePathToFigma.js' +export {namePathToKebabCase} from './namePathToKebabCase.js' +export {namePathToSlashNotation} from './namePathToSlashNotation.js' +export {shadowToCss} from './shadowToCss.js' +export {typographyToCss} from './typographyToCss.js' diff --git a/src/transformers/jsonDeprecated.ts b/src/transformers/jsonDeprecated.ts index 499d00edb..65bdd1f7d 100644 --- a/src/transformers/jsonDeprecated.ts +++ b/src/transformers/jsonDeprecated.ts @@ -8,7 +8,7 @@ import {isDeprecated} from '../filters/index.js' */ export const jsonDeprecated: Transform = { name: 'json/deprecated', - type: `value`, + type: 'value', transitive: true, filter: isDeprecated, transform: (token: TransformedToken) => diff --git a/src/transformers/namePathToCamelCase.ts b/src/transformers/namePathToCamelCase.ts index 3dc063e0c..b1f053484 100644 --- a/src/transformers/namePathToCamelCase.ts +++ b/src/transformers/namePathToCamelCase.ts @@ -9,7 +9,7 @@ import type {PlatformConfig, Transform, TransformedToken} from 'style-dictionary */ export const namePathToCamelCase: Transform = { name: 'name/pathToCamelCase', - type: `name`, + type: 'name', transform: (token: TransformedToken, options?: PlatformConfig): string => toCamelCase([options?.prefix || '', ...token.path]), } diff --git a/src/transformers/namePathToDotNotation.ts b/src/transformers/namePathToDotNotation.ts index 64625aee4..c0188e9e6 100644 --- a/src/transformers/namePathToDotNotation.ts +++ b/src/transformers/namePathToDotNotation.ts @@ -22,7 +22,7 @@ const camelCase = (string: string): string => { */ export const namePathToDotNotation: Transform = { name: 'name/pathToDotNotation', - type: `name`, + type: 'name', transform: (token: TransformedToken, options?: PlatformConfig): string => { return ( [options?.prefix, ...token.path] diff --git a/src/transformers/namePathToFigma.ts b/src/transformers/namePathToFigma.ts index 192a70ee4..6cd975ed5 100644 --- a/src/transformers/namePathToFigma.ts +++ b/src/transformers/namePathToFigma.ts @@ -21,6 +21,6 @@ export const transformNamePathToFigma = (token: TransformedToken, options?: Plat */ export const namePathToFigma: Transform = { name: 'name/pathToFigma', - type: `name`, + type: 'name', transform: transformNamePathToFigma, } diff --git a/src/transformers/namePathToKebabCase.ts b/src/transformers/namePathToKebabCase.ts index 3bc980057..ff78182d2 100644 --- a/src/transformers/namePathToKebabCase.ts +++ b/src/transformers/namePathToKebabCase.ts @@ -8,7 +8,7 @@ import type {PlatformConfig, Transform, TransformedToken} from 'style-dictionary */ export const namePathToKebabCase: Transform = { name: 'name/pathToKebabCase', - type: `name`, + type: 'name', transform: (token: TransformedToken, options?: PlatformConfig): string => { return ( [options?.prefix, ...token.path] diff --git a/src/transformers/namePathToPascalCase.ts b/src/transformers/namePathToPascalCase.ts index d7ad508c7..0a094414a 100644 --- a/src/transformers/namePathToPascalCase.ts +++ b/src/transformers/namePathToPascalCase.ts @@ -8,7 +8,7 @@ import {toPascalCase} from '../utilities/toPascalCase' */ export const namePathToPascalCase: Transform = { name: 'name/pathToPascalCase', - type: `name`, + type: 'name', transform: (token: TransformedToken, options?: PlatformConfig): string => toPascalCase([options?.prefix || '', ...token.path]), } diff --git a/src/transformers/namePathToSlashNotation.ts b/src/transformers/namePathToSlashNotation.ts index 6fd09ef64..2919c9051 100644 --- a/src/transformers/namePathToSlashNotation.ts +++ b/src/transformers/namePathToSlashNotation.ts @@ -8,7 +8,7 @@ import type {PlatformConfig, Transform, TransformedToken} from 'style-dictionary */ export const namePathToSlashNotation: Transform = { name: 'name/pathToSlashNotation', - type: `name`, + type: 'name', transform: (token: TransformedToken, options?: PlatformConfig): string => { return ( [options?.prefix, ...token.path] diff --git a/src/transformers/shadowToCss.test.ts b/src/transformers/shadowToCss.test.ts index 506c750c9..a738b0e88 100644 --- a/src/transformers/shadowToCss.test.ts +++ b/src/transformers/shadowToCss.test.ts @@ -5,7 +5,7 @@ describe('Transformer: shadowToCss', () => { it('transforms `shadow` token to css shadow string', () => { const input = [ getMockToken({ - value: { + $value: { color: '#000000', offsetX: '0px', offsetY: '2px', @@ -21,7 +21,7 @@ describe('Transformer: shadowToCss', () => { it('transforms inset `shadow` token to css shadow string', () => { const input = [ getMockToken({ - value: { + $value: { color: '#000000', offsetX: '0px', offsetY: '2px', @@ -31,7 +31,7 @@ describe('Transformer: shadowToCss', () => { }, }), getMockToken({ - value: { + $value: { color: '#000000', offsetX: '0px', offsetY: '2px', @@ -50,7 +50,7 @@ describe('Transformer: shadowToCss', () => { expect(() => shadowToCss.transform( getMockToken({ - value: { + $value: { color: '#000000', offsetX: '2px', offsetY: '2px', @@ -66,7 +66,7 @@ describe('Transformer: shadowToCss', () => { expect(() => shadowToCss.transform( getMockToken({ - value: { + $value: { color: '#000000', offsetX: '2px', offsetY: '2px', @@ -82,7 +82,7 @@ describe('Transformer: shadowToCss', () => { expect(() => shadowToCss.transform( getMockToken({ - value: { + $value: { color: '#000000', offsetX: '2px', spread: '0px', @@ -97,7 +97,7 @@ describe('Transformer: shadowToCss', () => { expect(() => shadowToCss.transform( getMockToken({ - value: { + $value: { color: '#000000', offsetY: '2px', spread: '0px', @@ -112,7 +112,7 @@ describe('Transformer: shadowToCss', () => { expect(() => shadowToCss.transform( getMockToken({ - value: { + $value: { offsetX: '0px', offsetY: '2px', spread: '0px', @@ -128,7 +128,7 @@ describe('Transformer: shadowToCss', () => { it('transforms `shadow` token alpha value to css shadow string', () => { const input = [ getMockToken({ - value: { + $value: { color: '#000000', offsetX: '0px', offsetY: '2px', @@ -138,7 +138,7 @@ describe('Transformer: shadowToCss', () => { }, }), getMockToken({ - value: { + $value: { color: '#22222266', offsetX: '0px', offsetY: '2px', @@ -154,7 +154,7 @@ describe('Transformer: shadowToCss', () => { it('transforms multi-layer `shadow` token to css shadow string', () => { const item = getMockToken({ - value: [ + $value: [ { color: '#000000', offsetX: '0px', diff --git a/src/transformers/shadowToCss.ts b/src/transformers/shadowToCss.ts index 87f6d0d3c..3b5273ade 100644 --- a/src/transformers/shadowToCss.ts +++ b/src/transformers/shadowToCss.ts @@ -4,7 +4,7 @@ import {alpha} from './utilities/alpha.js' import {checkRequiredTokenProperties} from './utilities/checkRequiredTokenProperties.js' import type {ShadowTokenValue} from '../types/ShadowTokenValue.js' import {getTokenValue} from './utilities/getTokenValue.js' -import type {Config, PlatformConfig, Transform, TransformedToken} from 'style-dictionary/types' +import type {Transform, TransformedToken} from 'style-dictionary/types' /** * @description converts w3c shadow tokens in css shadow string @@ -14,13 +14,13 @@ import type {Config, PlatformConfig, Transform, TransformedToken} from 'style-di */ export const shadowToCss: Transform = { name: 'shadow/css', - type: `value`, + type: 'value', transitive: true, filter: isShadow, - transform: (token: TransformedToken, config: PlatformConfig, options: Config) => { + transform: (token: TransformedToken) => { // extract value - const valueProp = options.usesDtcg ? '$value' : 'value' - const value: ShadowTokenValue | ShadowTokenValue[] = token[valueProp] || undefined + const value: ShadowTokenValue | ShadowTokenValue[] = getTokenValue(token) + const valueProp = token.$value ? '$value' : 'value' // turn value into array const shadowValues = !Array.isArray(value) ? [value] : value @@ -32,7 +32,7 @@ export const shadowToCss: Transform = { /*css box shadow: inset? | offset-x | offset-y | blur-radius | spread-radius | color */ return `${shadow.inset === true ? 'inset ' : ''}${shadow.offsetX} ${shadow.offsetY} ${shadow.blur} ${ shadow.spread - } ${toHex(alpha(getTokenValue({...token, ...{[valueProp]: shadow}}, 'color', options), shadow.alpha || 1, token))}` + } ${toHex(alpha(getTokenValue({...token, ...{[valueProp]: shadow}}, 'color'), shadow.alpha || 1, token))}` }) .join(', ') }, diff --git a/src/transformers/typographyToCss.test.ts b/src/transformers/typographyToCss.test.ts index fb98ecbd4..28e989a08 100644 --- a/src/transformers/typographyToCss.test.ts +++ b/src/transformers/typographyToCss.test.ts @@ -4,7 +4,7 @@ import {typographyToCss} from './typographyToCss.js' describe('Transformer: typographyToCss', () => { it('transforms `typography` token to css typography string', () => { const input = getMockToken({ - value: { + $value: { fontFamily: 'Roboto', fontSize: '42px', fontWeight: 700, @@ -18,7 +18,7 @@ describe('Transformer: typographyToCss', () => { it('transforms `typography` with custom `fontStyle` prop token to css typography string', () => { const input = getMockToken({ - value: { + $value: { fontFamily: 'Roboto', fontSize: '2rem', fontWeight: 700, @@ -34,7 +34,7 @@ describe('Transformer: typographyToCss', () => { it('transforms fontWeight string to number', () => { const input = [ getMockToken({ - value: { + $value: { fontFamily: 'Roboto', fontSize: '42px', fontWeight: '500', @@ -43,7 +43,7 @@ describe('Transformer: typographyToCss', () => { }, }), getMockToken({ - value: { + $value: { fontFamily: 'Roboto', fontSize: '42px', fontWeight: 'black', @@ -59,7 +59,7 @@ describe('Transformer: typographyToCss', () => { it('transforms fontFamily string and array', () => { const input = [ getMockToken({ - value: { + $value: { fontFamily: 'Roboto, Noto Sans', fontSize: '42px', fontWeight: '700', @@ -68,7 +68,7 @@ describe('Transformer: typographyToCss', () => { }, }), getMockToken({ - value: { + $value: { fontFamily: ['Roboto', 'Noto Sans'], fontSize: '42px', fontWeight: '700', @@ -84,7 +84,7 @@ describe('Transformer: typographyToCss', () => { it('transforms lineHeight string to number', () => { const input = [ getMockToken({ - value: { + $value: { fontFamily: 'Roboto', fontSize: '42px', fontWeight: '700', @@ -93,7 +93,7 @@ describe('Transformer: typographyToCss', () => { }, }), getMockToken({ - value: { + $value: { fontFamily: 'Roboto', fontSize: '42px', fontWeight: '700', @@ -102,7 +102,7 @@ describe('Transformer: typographyToCss', () => { }, }), getMockToken({ - value: { + $value: { fontFamily: 'Roboto', fontSize: '42px', fontWeight: '700', @@ -120,7 +120,7 @@ describe('Transformer: typographyToCss', () => { expect(() => typographyToCss.transform( getMockToken({ - value: { + $value: { fontSize: '42px', fontWeight: '700', letterSpacing: '0.1px', @@ -136,7 +136,7 @@ describe('Transformer: typographyToCss', () => { expect(() => typographyToCss.transform( getMockToken({ - value: { + $value: { fontFamily: 'Roboto', fontWeight: '700', letterSpacing: '0.1px', @@ -152,7 +152,7 @@ describe('Transformer: typographyToCss', () => { expect(() => typographyToCss.transform( getMockToken({ - value: { + $value: { fontFamily: 'Roboto', fontSize: '42px', letterSpacing: '0.1px', diff --git a/src/transformers/typographyToCss.ts b/src/transformers/typographyToCss.ts index 2f7e4d4ac..1a61b47de 100644 --- a/src/transformers/typographyToCss.ts +++ b/src/transformers/typographyToCss.ts @@ -14,12 +14,12 @@ import type {Config, PlatformConfig, Transform, TransformedToken} from 'style-di */ export const typographyToCss: Transform = { name: 'typography/css', - type: `value`, + type: 'value', transitive: true, filter: isTypography, transform: (token: TransformedToken, config: PlatformConfig, options: Config) => { // extract value - const value: TypographyTokenValue = getTokenValue(token, undefined, options) + const value: TypographyTokenValue = getTokenValue(token) // validate token properties checkRequiredTokenProperties(value, ['fontWeight', 'fontSize', 'fontFamily']) // format output diff --git a/src/transformers/utilities/getTokenValue.test.ts b/src/transformers/utilities/getTokenValue.test.ts index ae65bbbf4..d32e05831 100644 --- a/src/transformers/utilities/getTokenValue.test.ts +++ b/src/transformers/utilities/getTokenValue.test.ts @@ -4,16 +4,17 @@ import {getTokenValue} from './getTokenValue.js' describe('Utilities: getTokenValue', () => { it('it retrieves the token value if usesDtcg is false', () => { const token = getMockToken({ + $value: undefined, // needs to reset because of defaults from getMockToken value: '#223344', }) - expect(getTokenValue(token, undefined, {usesDtcg: false})).toStrictEqual('#223344') + expect(getTokenValue(token)).toStrictEqual('#223344') }) it('it retrieves the token $value if usesDtcg is true', () => { const token = getMockToken({ $value: '#223344', }) - expect(getTokenValue(token, undefined, {usesDtcg: true})).toStrictEqual('#223344') + expect(getTokenValue(token, undefined)).toStrictEqual('#223344') }) it('it throws a typeError if invalid input is used', () => { expect(() => { diff --git a/src/transformers/utilities/getTokenValue.ts b/src/transformers/utilities/getTokenValue.ts index 4cc53d04d..6cc802963 100644 --- a/src/transformers/utilities/getTokenValue.ts +++ b/src/transformers/utilities/getTokenValue.ts @@ -1,21 +1,20 @@ -import type {Config, TransformedToken} from 'style-dictionary/types' +import type {TransformedToken} from 'style-dictionary/types' import {invalidTokenValueError, invalidTokenValuePropertyError} from './invalidTokenError.js' -export const getTokenValue = (token: TransformedToken, property?: string, config: Config = {}) => { - const {usesDtcg} = config - const valueProp = usesDtcg ? '$value' : 'value' +export const getTokenValue = (token: TransformedToken, property?: string) => { + const value = token.$value ?? token.value - if (token[valueProp] === undefined) { - throw new invalidTokenValueError(token, usesDtcg) + if (value === undefined) { + throw new invalidTokenValueError(token) } // for composite token if subproperty is needed - if (typeof property === 'string' && token[valueProp][property] === undefined) { + if (typeof property === 'string' && value[property] === undefined) { throw new invalidTokenValuePropertyError(token, property) } if (typeof property === 'string') { - return token[valueProp][property] + return value[property] } - return token[valueProp] + return value } diff --git a/src/transformers/utilities/invalidTokenError.ts b/src/transformers/utilities/invalidTokenError.ts index 96ffd44e1..ad6aa39b1 100644 --- a/src/transformers/utilities/invalidTokenError.ts +++ b/src/transformers/utilities/invalidTokenError.ts @@ -1,27 +1,31 @@ import type {TransformedToken} from 'style-dictionary/types' import {namePathToDotNotation} from '../namePathToDotNotation.js' -const composeValueErrorMessage = (token: TransformedToken, usesDtcg?: boolean) => { +const composeValueErrorMessage = (token: TransformedToken) => { + const originalValue = token.original.$value ?? token.original.value + const value = token.$value ?? token.value // eslint-disable-next-line i18n-text/no-en return `Invalid token "${namePathToDotNotation.transform(token, {}, {})}" in file "${ token.filePath - }". Transformed value: "${JSON.stringify(token.value)}". ${ - token.original.value ? `Original value: "${JSON.stringify(token.original.value)}" ` : '' - }This may be due to referencing a token that does not exists. ${usesDtcg ? `usesDtcg is set to '${usesDtcg}.'` : ''}` + }". Transformed value: "${JSON.stringify(value)}". ${ + originalValue ? `Original value: "${JSON.stringify(originalValue)}" ` : '' + }This may be due to referencing a token that does not exists.` } const composeValuePropertyErrorMessage = (token: TransformedToken, property: string) => { + const originalValue = token.original.$value ?? token.original.value + const value = token.$value ?? token.value // eslint-disable-next-line i18n-text/no-en return `Invalid property "${property}" of token "${namePathToDotNotation.transform(token, {}, {})}" in file "${ token.filePath - }". Transformed property value: "${token.value[property]}". ${ - token.original.value ? `Original value: "${token.original.value[property]}" ` : '' + }". Transformed property value: "${value[property]}". ${ + originalValue ? `Original value: "${originalValue[property]}" ` : '' }This may be due to referencing a token that does not exists.` } export class invalidTokenValueError extends Error { - constructor(token: TransformedToken, usesDtcg?: boolean) { - super(composeValueErrorMessage(token, usesDtcg)) + constructor(token: TransformedToken) { + super(composeValueErrorMessage(token)) Error.captureStackTrace(this, invalidTokenValueError) } }