Skip to content

Commit 8e297d6

Browse files
jorenbroekemajorenbroekema
authored
fix: outputReferences for DTCG spec tokens (#1127)
1 parent 79bb201 commit 8e297d6

File tree

7 files changed

+136
-30
lines changed

7 files changed

+136
-30
lines changed

‎.changeset/famous-falcons-join.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'style-dictionary': patch
3+
---
4+
5+
Fix outputReferences for DTCG spec tokens, by using token.original.$value instead of token.original.value.

‎__tests__/buildFile.test.js

+1
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,7 @@ ${dictionary.allTokens.map((tok) => ` ${tok.name}: "${tok.value}";`).join('\n')
269269
name: 'someName',
270270
type: 'color',
271271
path: ['some', 'name', 'path1'],
272+
original: { value: 'value1' },
272273
value: 'value1',
273274
},
274275
],

‎__tests__/common/formatHelpers/__snapshots__/createPropertyFormatter.test.snap.js

+46
Original file line numberDiff line numberDiff line change
@@ -52,3 +52,49 @@ snapshots["common formatHelpers createPropertyFormatter commentStyle supports DT
5252
--color-blue: #0000FF;`;
5353
/* end snapshot common formatHelpers createPropertyFormatter commentStyle supports DTCG spec $description property for comments 3 */
5454

55+
snapshots["common formatHelpers createPropertyFormatter DTCG supports DTCG spec $description property for comments 1"] =
56+
` --color-red: #FF0000; /* Foo bar qux red */`;
57+
/* end snapshot common formatHelpers createPropertyFormatter DTCG supports DTCG spec $description property for comments 1 */
58+
59+
snapshots["common formatHelpers createPropertyFormatter DTCG supports DTCG spec $description property for comments 2"] =
60+
` --color-green: #00FF00; /* Foo bar qux green */`;
61+
/* end snapshot common formatHelpers createPropertyFormatter DTCG supports DTCG spec $description property for comments 2 */
62+
63+
snapshots["common formatHelpers createPropertyFormatter DTCG supports DTCG spec $description property for comments 3"] =
64+
` /**
65+
* Foo
66+
* bar
67+
* qux
68+
* blue
69+
*/
70+
--color-blue: #0000FF;`;
71+
/* end snapshot common formatHelpers createPropertyFormatter DTCG supports DTCG spec $description property for comments 3 */
72+
73+
snapshots["common formatHelpers createPropertyFormatter DTCG supports DTCG spec $value for outputReferences 1"] =
74+
` --color-red: #FF0000; /* Foo bar qux red */`;
75+
/* end snapshot common formatHelpers createPropertyFormatter DTCG supports DTCG spec $value for outputReferences 1 */
76+
77+
snapshots["common formatHelpers createPropertyFormatter DTCG supports DTCG spec $value for outputReferences 2"] =
78+
` --color-green: #00FF00; /* Foo bar qux green */`;
79+
/* end snapshot common formatHelpers createPropertyFormatter DTCG supports DTCG spec $value for outputReferences 2 */
80+
81+
snapshots["common formatHelpers createPropertyFormatter DTCG supports DTCG spec $value for outputReferences 3"] =
82+
` /**
83+
* Foo
84+
* bar
85+
* qux
86+
* blue
87+
*/
88+
--color-blue: #0000FF;`;
89+
/* end snapshot common formatHelpers createPropertyFormatter DTCG supports DTCG spec $value for outputReferences 3 */
90+
91+
snapshots["common formatHelpers createPropertyFormatter DTCG supports DTCG spec $value for outputReferences"] =
92+
` /**
93+
* Foo
94+
* bar
95+
* qux
96+
* ref
97+
*/
98+
--color-ref: var(--color-red);`;
99+
/* end snapshot common formatHelpers createPropertyFormatter DTCG supports DTCG spec $value for outputReferences */
100+

‎__tests__/common/formatHelpers/createPropertyFormatter.test.js

+67-23
Original file line numberDiff line numberDiff line change
@@ -246,18 +246,27 @@ describe('common', () => {
246246
value: '#FF0000',
247247
comment: 'Foo bar qux',
248248
path: ['color', 'red'],
249+
original: {
250+
value: '#FF0000',
251+
},
249252
},
250253
green: {
251254
name: 'color-green',
252255
value: '#00FF00',
253256
comment: 'Foo bar qux',
254257
path: ['color', 'green'],
258+
original: {
259+
value: '#00FF00',
260+
},
255261
},
256262
blue: {
257263
name: 'color-blue',
258264
value: '#0000FF',
259265
comment: 'Foo\nbar\nqux',
260266
path: ['color', 'blue'],
267+
original: {
268+
value: '#0000FF',
269+
},
261270
},
262271
},
263272
};
@@ -307,44 +316,79 @@ describe('common', () => {
307316
await expect(cssRed).to.matchSnapshot(1);
308317
await expect(sassRed).to.matchSnapshot(2);
309318
});
319+
});
310320

311-
it('supports DTCG spec $description property for comments', async () => {
312-
const descriptionDictionary = {
313-
color: {
314-
red: {
315-
name: 'color-red',
316-
value: '#FF0000',
317-
$description: 'Foo bar qux red',
318-
path: ['color', 'red'],
321+
describe('DTCG', () => {
322+
const dtcgDictionary = {
323+
color: {
324+
red: {
325+
name: 'color-red',
326+
$value: '#FF0000',
327+
original: {
328+
$value: '#FF0000',
319329
},
320-
green: {
321-
name: 'color-green',
322-
value: '#00FF00',
323-
$description: 'Foo bar qux green',
324-
path: ['color', 'green'],
330+
$description: 'Foo bar qux red',
331+
path: ['color', 'red'],
332+
},
333+
green: {
334+
name: 'color-green',
335+
$value: '#00FF00',
336+
original: {
337+
$value: '#00FF00',
325338
},
326-
blue: {
327-
name: 'color-blue',
328-
value: '#0000FF',
329-
$description: 'Foo\nbar\nqux\nblue',
330-
path: ['color', 'blue'],
339+
$description: 'Foo bar qux green',
340+
path: ['color', 'green'],
341+
},
342+
blue: {
343+
name: 'color-blue',
344+
$value: '#0000FF',
345+
original: {
346+
$value: '#0000FF',
331347
},
348+
$description: 'Foo\nbar\nqux\nblue',
349+
path: ['color', 'blue'],
332350
},
333-
};
351+
ref: {
352+
name: 'color-ref',
353+
$value: '#FF0000',
354+
original: {
355+
$value: '{color.red}',
356+
},
357+
$description: 'Foo\nbar\nqux\nref',
358+
path: ['color', 'ref'],
359+
},
360+
},
361+
};
362+
it('supports DTCG spec $description property for comments', async () => {
334363
// long commentStyle
335364
const cssFormatter = createPropertyFormatter({
336365
format: 'css',
337-
dictionary: { tokens: descriptionDictionary },
366+
dictionary: { tokens: dtcgDictionary },
367+
usesDtcg: true,
338368
});
339369

340-
const cssRed = cssFormatter(descriptionDictionary.color.red);
341-
const cssGreen = cssFormatter(descriptionDictionary.color.green);
342-
const cssBlue = cssFormatter(descriptionDictionary.color.blue);
370+
const cssRed = cssFormatter(dtcgDictionary.color.red);
371+
const cssGreen = cssFormatter(dtcgDictionary.color.green);
372+
const cssBlue = cssFormatter(dtcgDictionary.color.blue);
343373

344374
await expect(cssRed).to.matchSnapshot(1);
345375
await expect(cssGreen).to.matchSnapshot(2);
346376
await expect(cssBlue).to.matchSnapshot(3);
347377
});
378+
379+
it('supports DTCG spec $value for outputReferences', async () => {
380+
// long commentStyle
381+
const cssFormatter = createPropertyFormatter({
382+
format: 'css',
383+
outputReferences: true,
384+
dictionary: { tokens: dtcgDictionary },
385+
usesDtcg: true,
386+
});
387+
388+
const cssRef = cssFormatter(dtcgDictionary.color.ref);
389+
390+
await expect(cssRef).to.matchSnapshot();
391+
});
348392
});
349393
});
350394
});

‎__tests__/formats/androidResources.test.js

+8
Original file line numberDiff line numberDiff line change
@@ -70,13 +70,21 @@ const customTokens = {
7070
name: 'backgroundColorSecondary',
7171
value: '#F2F3F4',
7272
type: 'color',
73+
original: {
74+
value: '#F2F3F4',
75+
type: 'color',
76+
},
7377
},
7478
},
7579
fontColor: {
7680
primary: {
7781
name: 'fontColorPrimary',
7882
value: '#000000',
7983
type: 'color',
84+
original: {
85+
value: '#000000',
86+
type: 'color',
87+
},
8088
},
8189
},
8290
};

‎lib/common/formatHelpers/createPropertyFormatter.js

+6-5
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
* and limitations under the License.
1212
*/
1313
import { _getReferences } from '../../utils/references/getReferences.js';
14+
import { resolveReferences } from '../../utils/references/resolveReferences.js';
1415
import usesReferences from '../../utils/references/usesReferences.js';
1516

1617
/**
@@ -162,6 +163,7 @@ export default function createPropertyFormatter({
162163
return function (token) {
163164
let to_ret_token = `${indentation}${prefix}${token.name}${separator} `;
164165
let value = usesDtcg ? token.$value : token.value;
166+
const originalValue = usesDtcg ? token.original.$value : token.original.value;
165167

166168
/**
167169
* A single value can have multiple references either by interpolation:
@@ -175,15 +177,14 @@ export default function createPropertyFormatter({
175177
* This will see if there are references and if there are, replace
176178
* the resolved value with the reference's name.
177179
*/
178-
if (outputReferences && usesReferences(token.original.value)) {
180+
if (outputReferences && usesReferences(originalValue)) {
179181
// Formats that use this function expect `value` to be a string
180182
// or else you will get '[object Object]' in the output
181-
const refs = _getReferences(token.original.value, tokens, { unfilteredTokens }, []);
183+
const refs = _getReferences(originalValue, tokens, { unfilteredTokens }, []);
182184

183185
// original can either be an object value, which requires transitive value transformation in web CSS formats
184186
// or a different (primitive) type, meaning it can be stringified.
185-
const originalIsObject =
186-
typeof token.original.value === 'object' && token.original.value !== null;
187+
const originalIsObject = typeof originalValue === 'object' && originalValue !== null;
187188

188189
if (!originalIsObject) {
189190
// when original is object value, we replace value by matching ref.value and putting a var instead.
@@ -192,7 +193,7 @@ export default function createPropertyFormatter({
192193

193194
// when original is string value, we replace value by matching original.value and putting a var instead
194195
// this is more friendly to transitive transforms that transform the string values
195-
value = token.original.value;
196+
value = originalValue;
196197
}
197198

198199
refs.forEach((ref) => {

‎lib/common/templates/android/resources.template.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,9 @@ export default (opts) => {
6565
* @returns {string}
6666
*/
6767
function tokenToValue(token, tokens) {
68-
if (file?.options && file.options.outputReferences && usesReferences(token.original.value)) {
69-
return `@${tokenToType(token)}/${getReferences(token.original.value, tokens)[0].name}`;
68+
let originalValue = options.usesDtcg ? token.original.$value : token.original.value;
69+
if (file?.options && file.options.outputReferences && usesReferences(originalValue)) {
70+
return `@${tokenToType(token)}/${getReferences(originalValue, tokens)[0].name}`;
7071
} else {
7172
return options.usesDtcg ? token.$value : token.value;
7273
}

0 commit comments

Comments
 (0)