Skip to content

Commit c687817

Browse files
jorenbroekemajorenbroekema
authored
feat: store original TS type on and align more TS types to dimension (#293)
* fix: align more TS types to dimension * feat: store original TS type on
1 parent b12c09f commit c687817

File tree

10 files changed

+120
-18
lines changed

10 files changed

+120
-18
lines changed

‎.changeset/cyan-pots-punch.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@tokens-studio/sd-transforms': patch
3+
---
4+
5+
Fix alignTypes to also include `borderWidth`, `letterSpacing`, `paragraphSpacing` and `paragraphIndent` and align them to `dimension`.

‎.changeset/eleven-crabs-think.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@tokens-studio/sd-transforms': minor
3+
---
4+
5+
Add the `originalType` property to `$extensions.['studio.tokens']` to store the original Tokens Studio token type, when the type is aligned to DTCG types. LetterSpacing transform is the transform in this package that actually needs to use this, because it doesn't want to match all dimension tokens, but it does want to match letterSpacing tokens.

‎README.md

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88

99
- [Installation](#installation)
1010
- [Compatibility](#compatibility)
11-
- [Getting Started](#usage)
11+
- [Usage](#usage)
12+
- [Using the preprocessor](#using-the-preprocessor)
13+
- [Using expand](#using-expand)
1214
- [Using the transforms](#using-the-transforms)
1315
- [Custom Transform Group](#custom-transform-group)
1416
- [Options](#options)
@@ -125,6 +127,11 @@ You must add the `'tokens-studio'` preprocessor explicitly in the configuration:
125127

126128
This allows `fontStyles` to be extracted when they are embedded in `fontWeights`, aligns Tokens Studio token types with DTCG token types, and allows excluding parent keys for single-file Tokens Studio exports.
127129

130+
> [!TIP]
131+
> The align types part of the preprocessor aligns Tokens Studio token types to DTCG token types.
132+
> The original Tokens Studio type in this scenario will be stored at `$extensions['studio.tokens'].originalType` if this happens.
133+
> This allows you to use the original type e.g. for token filtering/matching for your custom transforms.
134+
128135
### Using "Expand"
129136

130137
> Expand used to be an sd-transforms exclusive feature but has moved to Style Dictionary itself under a slightly different API.
@@ -541,7 +548,7 @@ You can adjust to how many decimals the result should be rounded using `Platform
541548

542549
This transform adds `px` as a unit when dimension-like tokens do not have a unit.
543550

544-
**matches**: `token.type` is one of `['sizing', 'spacing', 'borderRadius', 'borderWidth', 'fontSizes', 'dimension']`
551+
**matches**: `token.type` is one of `['fontSize', 'dimension', 'border', 'typography', 'shadow']`
545552

546553
#### before
547554

@@ -597,7 +604,7 @@ This transforms opacity token values declared with `%` into a number between `0`
597604

598605
This transforms line-height token values declared with `%` into a unitless value.
599606

600-
**matches**: `token.type` is `'lineHeights'`
607+
**matches**: `token.type` is `'lineHeight'` or `token.type` is `'typography'`
601608

602609
#### before
603610

@@ -625,7 +632,7 @@ This transforms line-height token values declared with `%` into a unitless value
625632

626633
This transforms fontweight from keynames to fontweight numbers.
627634

628-
**matches**: `token.type` is `'fontWeights'`
635+
**matches**: `token.type` is `'fontWeight'` or `token.type` is `'typography'`
629636

630637
#### before
631638

@@ -715,7 +722,7 @@ This transforms color modifiers from Tokens Studio to color values.
715722

716723
This transforms letter-spacing token values declared with `%` to a value with `em`.
717724

718-
**matches**: `token.type` is `'letterSpacing'`
725+
**matches**: `token.$extensions['studio.tokens'].originalType` is `'letterSpacing'` or `token.type` is `'typography'`
719726

720727
#### before
721728

‎package-lock.json

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"dependencies": {
3636
"@bundled-es-modules/deepmerge": "^4.3.1",
3737
"@bundled-es-modules/postcss-calc-ast-parser": "^0.1.6",
38-
"@tokens-studio/types": "^0.4.0",
38+
"@tokens-studio/types": "^0.5.1",
3939
"colorjs.io": "^0.4.3",
4040
"expr-eval-fork": "^2.0.2",
4141
"is-mergeable-object": "^1.1.1"

‎src/preprocessors/align-types.ts

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ const typesMap = {
1414
spacing: 'dimension',
1515
sizing: 'dimension',
1616
borderRadius: 'dimension',
17+
borderWidth: 'dimension',
18+
letterSpacing: 'dimension',
19+
paragraphSpacing: 'dimension',
20+
paragraphIndent: 'dimension',
1721
text: 'content',
1822
} as Partial<Record<valueOfTokenTypes, string>>;
1923

@@ -31,11 +35,24 @@ function recurse(slice: DeepKeyTokenMap<false> | SingleToken<false>) {
3135
if (isToken) {
3236
const { $value, value, type, $type } = slice;
3337
const usesDTCG = Object.hasOwn(slice, '$value');
34-
const t = (usesDTCG ? $type : type) as string;
38+
const t = (usesDTCG ? $type : type) as valueOfTokenTypes;
3539
const v = usesDTCG ? $value : value;
3640
const tProp = `${usesDTCG ? '$' : ''}type` as '$type' | 'type';
3741
const newT = (typesMap[t as keyof typeof typesMap] ?? t) as valueOfTokenTypes;
38-
(slice[tProp] as valueOfTokenTypes) = newT;
42+
const k = 'studio.tokens' as keyof typeof slice.$extensions;
43+
44+
if (newT !== t) {
45+
// replace the type with new type
46+
(slice[tProp] as valueOfTokenTypes) = newT;
47+
// store the original type as metadata
48+
slice.$extensions = {
49+
...slice.$extensions,
50+
[k]: {
51+
...(slice.$extensions?.[k] ?? {}),
52+
originalType: t as TokenTypes,
53+
},
54+
};
55+
}
3956

4057
// now also check propsMap if we need to map some props
4158
if (typeof v === 'object') {

‎src/register.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,11 @@ export async function register(sd: typeof StyleDictionary, transformOpts?: Trans
104104
transitive: true,
105105
filter: token => {
106106
const type = token.$type ?? token.type;
107-
return typeof type === 'string' && ['letterSpacing', 'typography'].includes(type);
107+
const originalType = token.$extensions?.['studio.tokens']?.originalType;
108+
return (
109+
typeof type === 'string' &&
110+
(['letterSpacing', 'typography'].includes(type) || originalType === 'letterSpacing')
111+
);
108112
},
109113
transform: token => transformLetterSpacingForCSS(token),
110114
});

‎test/integration/sd-transforms.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ describe('sd-transforms smoke tests', () => {
6262
--sdColorsGradient: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.00) 45%);
6363
--sdLineHeightsHeading: 1.1;
6464
--sdLineHeightsBody: 1.4;
65-
--sdLetterSpacingDefault: 0;
65+
--sdLetterSpacingDefault: 0rem;
6666
--sdLetterSpacingIncreased: 1.5em;
6767
--sdLetterSpacingDecreased: -0.05em;
6868
--sdFontWeightsHeadingRegular: 600;
@@ -117,7 +117,7 @@ describe('sd-transforms smoke tests', () => {
117117
--sd-colors-gradient: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.00) 45%);
118118
--sd-line-heights-heading: 1.1;
119119
--sd-line-heights-body: 1.4;
120-
--sd-letter-spacing-default: 0;
120+
--sd-letter-spacing-default: 0rem;
121121
--sd-letter-spacing-increased: 1.5em;
122122
--sd-letter-spacing-decreased: -0.05em;
123123
--sd-font-weights-heading-regular: 600;

‎test/spec/preprocessors/align-types.spec.ts

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,22 @@ const tokenObj = {
1212
weight: {
1313
value: 400,
1414
type: 'fontWeights',
15+
$extensions: {
16+
'studio.tokens': {
17+
modify: undefined,
18+
},
19+
'foo.bar': { some: 'metadata' },
20+
},
1521
},
1622
},
1723
semantic: {
1824
sizings: {
1925
lg: {
2026
value: '30px',
2127
type: 'sizing',
28+
$extensions: {
29+
'foo.bar': { some: 'metadata' },
30+
},
2231
},
2332
},
2433
},
@@ -63,13 +72,26 @@ const tokenObjAligned = {
6372
weight: {
6473
value: 400,
6574
type: 'fontWeight',
75+
$extensions: {
76+
'studio.tokens': {
77+
modify: undefined,
78+
originalType: 'fontWeights',
79+
},
80+
'foo.bar': { some: 'metadata' },
81+
},
6682
},
6783
},
6884
semantic: {
6985
sizings: {
7086
lg: {
7187
value: '30px',
7288
type: 'dimension',
89+
$extensions: {
90+
'studio.tokens': {
91+
originalType: 'sizing',
92+
},
93+
'foo.bar': { some: 'metadata' },
94+
},
7395
},
7496
},
7597
},
@@ -88,6 +110,11 @@ const tokenObjAligned = {
88110
},
89111
],
90112
type: 'shadow',
113+
$extensions: {
114+
'studio.tokens': {
115+
originalType: 'boxShadow',
116+
},
117+
},
91118
},
92119
shadowSingle: {
93120
value: {
@@ -99,6 +126,11 @@ const tokenObjAligned = {
99126
type: 'innerShadow',
100127
},
101128
type: 'shadow',
129+
$extensions: {
130+
'studio.tokens': {
131+
originalType: 'boxShadow',
132+
},
133+
},
102134
},
103135
},
104136
},
@@ -114,13 +146,22 @@ const tokenObjDTCG = {
114146
weight: {
115147
$value: 400,
116148
$type: 'fontWeights',
149+
$extensions: {
150+
'studio.tokens': {
151+
modify: undefined,
152+
},
153+
'foo.bar': { some: 'metadata' },
154+
},
117155
},
118156
},
119157
semantic: {
120158
sizings: {
121159
lg: {
122160
$value: '30px',
123161
$type: 'sizing',
162+
$extensions: {
163+
'foo.bar': { some: 'metadata' },
164+
},
124165
},
125166
},
126167
},
@@ -165,13 +206,26 @@ const tokenObjAlignedDTCG = {
165206
weight: {
166207
$value: 400,
167208
$type: 'fontWeight',
209+
$extensions: {
210+
'studio.tokens': {
211+
modify: undefined,
212+
originalType: 'fontWeights',
213+
},
214+
'foo.bar': { some: 'metadata' },
215+
},
168216
},
169217
},
170218
semantic: {
171219
sizings: {
172220
lg: {
173221
$value: '30px',
174222
$type: 'dimension',
223+
$extensions: {
224+
'studio.tokens': {
225+
originalType: 'sizing',
226+
},
227+
'foo.bar': { some: 'metadata' },
228+
},
175229
},
176230
},
177231
},
@@ -190,6 +244,11 @@ const tokenObjAlignedDTCG = {
190244
},
191245
],
192246
$type: 'shadow',
247+
$extensions: {
248+
'studio.tokens': {
249+
originalType: 'boxShadow',
250+
},
251+
},
193252
},
194253
shadowSingle: {
195254
$value: {
@@ -201,6 +260,11 @@ const tokenObjAlignedDTCG = {
201260
type: 'innerShadow',
202261
},
203262
$type: 'shadow',
263+
$extensions: {
264+
'studio.tokens': {
265+
originalType: 'boxShadow',
266+
},
267+
},
204268
},
205269
},
206270
},

‎test/spec/register.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -328,7 +328,7 @@ describe('register', () => {
328328
--colorsGradient: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.00) 45%);
329329
--lineHeightsHeading: 1.1;
330330
--lineHeightsBody: 1.4;
331-
--letterSpacingDefault: 0;
331+
--letterSpacingDefault: 0rem;
332332
--letterSpacingIncreased: 1.5em;
333333
--letterSpacingDecreased: -0.05em;
334334
--fontWeightsHeadingRegular: 600;

0 commit comments

Comments
 (0)