From 04f1037e0c8784a6563da968bfd9a49ad37093f7 Mon Sep 17 00:00:00 2001 From: jorenbroekema <joren.broekema@gmail.com> Date: Thu, 6 Jun 2024 12:56:56 +0200 Subject: [PATCH] chore: align index.js entrypoint exports --- README.md | 36 +++++++++++++++++--------------- src/TransformOptions.ts | 26 ----------------------- src/index.ts | 30 +++++++++++++++++++++++--- src/preprocessors/align-types.ts | 5 ++++- 4 files changed, 50 insertions(+), 47 deletions(-) diff --git a/README.md b/README.md index b01d73f..bbadb36 100644 --- a/README.md +++ b/README.md @@ -141,28 +141,30 @@ This allows fontStyles to be extracted when they are embedded in fontWeights, al > This made sense due to object-value tokens being part of the DTCG spec and no longer a Tokens Studio specific feature. When using the [expand feature of Style Dictionary](https://v4.styledictionary.com/reference/config/#expand) to expand object-value (composite) tokens, -you should pass an additional `typesMap` for `boxShadow` tokens, because these are slightly different from the DTCG shadow tokens in that they are called `boxShadow` -and that their `offsetX` and `offsetY` props are called `x` and `y` respectively. +you should pass our additional `expandTypesMap` for Tokens Studio tokens, because these are slightly different from the DTCG tokens: + +- shadow tokens are called `boxShadow` and their `offsetX` and `offsetY` props are called `x` and `y` respectively. +- typography tokens have some additional properties in Tokens Studio: + - `paragraphSpacing` -> dimension + - `paragraphIndent` -> dimension + - `textDecoration` -> other + - `textCase` -> other Due to the Style Dictionary object-value tokens expansion happening before custom preprocessors such as the sd-transforms preprocessor, which aligns Tokens Studio token types with DTCG token types, this has to be configured like so: -```json -{ - "source": ["tokens/**/*.json"], - "preprocessors": ["tokens-studio"], - "expand": { - "typesMap": { - "boxShadow": { - "x": "dimension", - "y": "dimension", - "blur": "dimension", - "spread": "dimension" - } - } +```js +import StyleDictionary from 'style-dictionary'; +import { expandTypesMap } from '@tokens-studio/sd-transforms'; + +const sd = new StyleDictionary({ + source: ['tokens/**/*.json'], + preprocessors: ['tokens-studio'], + expand: { + typesMap: expandTypesMap, }, - "platforms": {} -} + platforms: {}, +}); ``` ### Using the transforms diff --git a/src/TransformOptions.ts b/src/TransformOptions.ts index a6216e2..d261bb1 100644 --- a/src/TransformOptions.ts +++ b/src/TransformOptions.ts @@ -1,29 +1,3 @@ -import { - SingleBorderToken, - SingleBoxShadowToken, - SingleCompositionToken, - SingleToken, - SingleTypographyToken, -} from '@tokens-studio/types'; - -export type Expandables = - | SingleCompositionToken - | SingleTypographyToken - | SingleBorderToken - | SingleBoxShadowToken; - -export const expandablesAsStringsArr = ['composition', 'typography', 'border', 'boxShadow']; -export type ExpandablesAsStrings = (typeof expandablesAsStringsArr)[number]; - -export type ExpandFilter<T extends SingleToken> = (token: T, filePath?: string) => boolean; - -export interface ExpandOptions { - typography?: boolean | ExpandFilter<SingleTypographyToken>; // default false - border?: boolean | ExpandFilter<SingleBorderToken>; // default false - shadow?: boolean | ExpandFilter<SingleBoxShadowToken>; // default false - composition?: boolean | ExpandFilter<SingleCompositionToken>; // default true -} - export type ColorModifierFormat = 'hex' | 'hsl' | 'lch' | 'p3' | 'srgb'; export interface ColorModifierOptions { diff --git a/src/index.ts b/src/index.ts index 389635d..eb95ee1 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,8 +1,7 @@ -export { registerTransforms } from './registerTransforms.js'; -export { transforms } from './registerTransforms.js'; +export { registerTransforms, transforms } from './registerTransforms.js'; export { addFontStyles } from './preprocessors/add-font-styles.js'; -export { alignTypes, typesMap } from './preprocessors/align-types.js'; +export { alignTypes } from './preprocessors/align-types.js'; export { excludeParentKeys } from './preprocessors/exclude-parent-keys.js'; export { parseTokens } from './preprocessors/parse-tokens.js'; @@ -12,10 +11,35 @@ export { transformDimension } from './transformDimension.js'; export { transformFontWeight } from './transformFontWeight.js'; export { transformColorModifiers } from './color-modifiers/transformColorModifiers.js'; export { transformLineHeight } from './transformLineHeight.js'; +export { transformOpacity } from './transformOpacity.js'; export { transformHEXRGBaForCSS } from './css/transformHEXRGBa.js'; export { transformLetterSpacingForCSS } from './css/transformLetterSpacing.js'; +export { transformShadow } from './css/transformShadow.js'; export { transformTypographyForCompose } from './compose/transformTypography.js'; export { permutateThemes } from './permutateThemes.js'; + +/** + * Some of the Tokens Studio typography/shadow props need to be aligned + * when expanding them through StyleDictionary expand + */ +export const expandTypesMap = { + typography: { + paragraphSpacing: 'dimension', + paragraphIndent: 'dimension', + textDecoration: 'other', + textCase: 'other', + }, + /** + * boxShadow/x/y are not shadow/offsetX/offsetY here because the SD expand on global level + * happens before these types are aligned in sd-transforms preprocessor + */ + boxShadow: { + x: 'dimension', + y: 'dimension', + blur: 'dimension', + spread: 'dimension', + }, +}; diff --git a/src/preprocessors/align-types.ts b/src/preprocessors/align-types.ts index 6b0da4d..63f2cfb 100644 --- a/src/preprocessors/align-types.ts +++ b/src/preprocessors/align-types.ts @@ -1,6 +1,9 @@ import { DeepKeyTokenMap, SingleToken } from '@tokens-studio/types'; -export const typesMap = { +// TODO: composition tokens props also need the same types alignments.. +// nested composition tokens are out of scope. + +const typesMap = { fontFamilies: 'fontFamily', fontWeights: 'fontWeight', fontSizes: 'fontSize',