Skip to content

Commit f2395f3

Browse files
tiloyitiloyi
authored
feat: formats javascript/esm add flat option (#1474)
* feat(formats/javascriptEsm): add 'flat' option Resolves #1451 * feat(formats/javascriptEsm): add 'flat' option - update following code review * feat(formats/javascriptEsm): add changeset
1 parent 6ff17ec commit f2395f3

File tree

5 files changed

+121
-7
lines changed

5 files changed

+121
-7
lines changed

‎.changeset/friendly-rice-hide.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'style-dictionary': minor
3+
---
4+
5+
Add a 'flat' option to the javascriptEsm format

‎__tests__/formats/__snapshots__/javascriptEsmFlat.test.snap.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
/* @web/test-runner snapshot v1 */
2+
export const snapshots = {};
3+
4+
snapshots["formats javascript/esm should be a valid JS file and match snapshot"] =
5+
`/**
6+
* Do not edit directly, this file was auto-generated.
7+
*/
8+
9+
export default {
10+
ColorsRed500: "#ff0000",
11+
DimensionXs: "15px",
12+
};
13+
`;
14+
/* end snapshot formats javascript/esm should be a valid JS file and match snapshot */
15+

‎__tests__/formats/javascriptEsmFlat.test.js

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/*
2+
* Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
5+
* the License. A copy of the License is located at
6+
*
7+
* http://www.apache.org/licenses/LICENSE-2.0
8+
*
9+
* or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
10+
* CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
11+
* and limitations under the License.
12+
*/
13+
import { expect } from 'chai';
14+
import formats from '../../lib/common/formats.js';
15+
import createFormatArgs from '../../lib/utils/createFormatArgs.js';
16+
import { convertTokenData } from '../../lib/utils/convertTokenData.js';
17+
import { formats as formatsEnum } from '../../lib/enums/formats.js';
18+
19+
const { javascriptEsm } = formatsEnum;
20+
21+
const file = {
22+
destination: '__output/',
23+
format: javascriptEsm,
24+
options: {
25+
flat: true,
26+
},
27+
filter: {
28+
type: 'color',
29+
},
30+
};
31+
32+
const tokens = {
33+
colors: {
34+
red: {
35+
500: {
36+
value: '#ff0000',
37+
type: 'color',
38+
path: ['colors', 'red', '500'],
39+
filePath: 'tokens.json',
40+
attributes: {
41+
foo: 'bar',
42+
},
43+
name: 'ColorsRed500',
44+
},
45+
},
46+
},
47+
dimensions: {
48+
xs: {
49+
value: '15px',
50+
type: 'dimension',
51+
path: ['dimension', 'xs'],
52+
filePath: 'tokens.json',
53+
attributes: {
54+
foo: 'bar',
55+
},
56+
name: 'DimensionXs',
57+
},
58+
},
59+
};
60+
61+
const format = formats[javascriptEsm];
62+
63+
describe('formats', () => {
64+
describe(javascriptEsm, () => {
65+
it('should be a valid JS file and match snapshot', async () => {
66+
await expect(
67+
await format(
68+
createFormatArgs({
69+
dictionary: { tokens, allTokens: convertTokenData(tokens, { output: 'array' }) },
70+
file,
71+
platform: {},
72+
}),
73+
{},
74+
file,
75+
),
76+
).to.matchSnapshot();
77+
});
78+
});
79+
});

‎docs/src/content/docs/reference/Hooks/Formats/predefined.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -311,7 +311,8 @@ Creates an ES6 module object of the style dictionary.
311311
| Param | Type | Description |
312312
| ------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
313313
| `options` | `Object` | |
314-
| `options.minify` | `boolean` | Whether or not to minify the output. Defaults to `false`. |
314+
| `options.minify` | `boolean` | Whether or not to minify the output. Defaults to `false`. Has no effect when `options.flat` is `true`. |
315+
| `options.flat` | `boolean` | Whether or not to flatten the output. Defaults to `false`. If `true`, renders only the token value, which means it is minified. |
315316
| `options.stripMeta` | `Object \| boolean` | Control whether meta data is stripped from the output tokens. `false` by default. If set to `true`, will strip known Style Dictionary meta props: `['attributes', 'filePath', 'name', 'path', 'comment']`. Note that using minify means that meta is stripped as a side effect of this already, so using both is unnecessary. |
316317
| `options.stripMeta.keep` | `string[]` | Array of property keys to keep in the output. |
317318
| `options.stripMeta.strip` | `string[]` | Array of property keys to strip from the output. |

‎lib/common/formats.js

+20-6
Original file line numberDiff line numberDiff line change
@@ -678,7 +678,7 @@ const formats = {
678678
* ```
679679
*/
680680
[javascriptEsm]: async function ({ dictionary, file, options }) {
681-
const { formatting, minify = false } = options;
681+
const { formatting, minify = false, flat = false } = options;
682682
let { tokens } = dictionary;
683683
tokens = stripMetaProps(
684684
tokens,
@@ -691,11 +691,25 @@ const formats = {
691691
options,
692692
});
693693

694-
const dictionaryString = JSON.stringify(
695-
minify ? minifyDictionary(tokens, options.usesDtcg) : tokens,
696-
null,
697-
2,
698-
);
694+
let dictionaryString;
695+
if (flat) {
696+
dictionaryString = JSON.stringify(
697+
Object.fromEntries(
698+
dictionary.allTokens.map((token) => [
699+
token.name,
700+
options.usesDtcg ? token.$value : token.value,
701+
]),
702+
),
703+
null,
704+
2,
705+
);
706+
} else {
707+
dictionaryString = JSON.stringify(
708+
minify ? minifyDictionary(tokens, options.usesDtcg) : tokens,
709+
null,
710+
2,
711+
);
712+
}
699713

700714
const content = `${header}export default ${dictionaryString};\n`;
701715
return formatJS(content);

0 commit comments

Comments
 (0)