Skip to content

Commit

Permalink
feat: add stripMeta util, use in json format
Browse files Browse the repository at this point in the history
  • Loading branch information
@florin01hyma @jorenbroekema
florin01hyma authored and jorenbroekema committed Nov 8, 2024
1 parent 0fcf229 commit 8f1b4f0
Show file tree
Hide file tree
Showing 11 changed files with 679 additions and 26 deletions.
7 changes: 7 additions & 0 deletions .changeset/warm-teachers-teach.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'style-dictionary': minor
---

Add new utility in `style-dictionary/utils` -> `stripMeta` for stripping metadata from tokens.
This utility is used now as an opt-in for the built-in `'json'` format by using `options.stripMeta`, which if set to `true` will strip Style Dictionary meta props.
You can specify `keep`/`strip` (allow/blocklist) for granular control about which properties to keep or strip.
21 changes: 5 additions & 16 deletions __tests__/StyleDictionary.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { fileToJSON, clearOutput, fileExists, clearSDMeta } from './__helpers.js
import { resolve } from '../lib/resolve.js';
import GroupMessages from '../lib/utils/groupMessages.js';
import flattenTokens from '../lib/utils/flattenTokens.js';
import { stripMeta } from '../lib/utils/stripMeta.js';
import formats from '../lib/common/formats.js';
import { restore, stubMethod } from 'hanbi';

Expand All @@ -30,18 +31,6 @@ function traverseObj(obj, fn) {
}
}

function stripMeta(obj) {
Object.keys(obj).forEach((key) => {
if (['attributes', 'name', 'original', 'path'].includes(key)) {
delete obj[key];
}
if (typeof obj[key] === 'object') {
stripMeta(obj[key]);
}
});
return obj;
}

const test_props = {
size: {
padding: {
Expand Down Expand Up @@ -570,7 +559,7 @@ Refer to: https://styledictionary.com/reference/logging/
await sd.hasInitialized;
const cssTokens = await sd.exportPlatform('css');
const jsTokens = await sd.exportPlatform('js');
expect(stripMeta(cssTokens)).to.eql({
expect(stripMeta(cssTokens, { keep: ['type', 'value'] })).to.eql({
border: {
color: {
type: 'color',
Expand All @@ -586,7 +575,7 @@ Refer to: https://styledictionary.com/reference/logging/
},
},
});
expect(stripMeta(jsTokens)).to.eql(input);
expect(stripMeta(jsTokens, { keep: ['type', 'value'] })).to.eql(input);
});

it('should allow combining global expand with per platform expand', async () => {
Expand Down Expand Up @@ -628,7 +617,7 @@ Refer to: https://styledictionary.com/reference/logging/
const cssTokens = await sd.exportPlatform('css');
const jsTokens = await sd.exportPlatform('js');

expect(stripMeta(cssTokens)).to.eql({
expect(stripMeta(cssTokens, { keep: ['type', 'value'] })).to.eql({
border: {
color: {
type: 'color',
Expand All @@ -645,7 +634,7 @@ Refer to: https://styledictionary.com/reference/logging/
},
borderTwo: input.borderTwo,
});
expect(stripMeta(jsTokens)).to.eql({
expect(stripMeta(jsTokens, { keep: ['type', 'value'] })).to.eql({
border: {
color: {
type: 'color',
Expand Down
123 changes: 121 additions & 2 deletions __tests__/formats/__snapshots__/json.test.snap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,131 @@ export const snapshots = {};

snapshots["formats json should be a valid JSON file and match snapshot"] =
`{
"color": {
"colors": {
"red": {
"value": "#FF0000"
"500": {
"value": "#ff0000",
"type": "color",
"path": [
"colors",
"red",
"500"
],
"filePath": "tokens.json",
"attributes": {
"foo": "bar"
},
"name": "colors-red-500"
}
}
},
"dimensions": {
"xs": {
"value": "15px",
"type": "dimension",
"path": [
"dimension",
"xs"
],
"filePath": "tokens.json",
"attributes": {
"foo": "bar"
},
"name": "dimension-xs"
}
}
}
`;
/* end snapshot formats json should be a valid JSON file and match snapshot */

snapshots["formats json should optionally allow stripping StyleDictionary metadata"] =
`{
"colors": {
"red": {
"500": {
"value": "#ff0000",
"type": "color"
}
}
},
"dimensions": {
"xs": {
"value": "15px",
"type": "dimension"
}
}
}
`;
/* end snapshot formats json should optionally allow stripping StyleDictionary metadata */

snapshots["formats json should optionally allow stripping everything but an allowlist of props"] =
`{
"colors": {
"red": {
"500": {
"value": "#ff0000",
"type": "color"
}
}
},
"dimensions": {
"xs": {
"value": "15px",
"type": "dimension"
}
}
}
`;
/* end snapshot formats json should optionally allow stripping everything but an allowlist of props */

snapshots["formats json should optionally allow stripping custom list of metadata props"] =
`{
"colors": {
"red": {
"500": {
"value": "#ff0000",
"type": "color",
"path": [
"colors",
"red",
"500"
],
"name": "colors-red-500"
}
}
},
"dimensions": {
"xs": {
"value": "15px",
"type": "dimension",
"path": [
"dimension",
"xs"
],
"name": "dimension-xs"
}
}
}
`;
/* end snapshot formats json should optionally allow stripping custom list of metadata props */

snapshots["formats json should optionally allow stripping StyleDictionary metadata for DTCG formatted tokens"] =
`{
"colors": {
"red": {
"500": {
"$value": "#ff0000",
"$type": "color"
}
}
},
"dimensions": {
"xs": {
"$value": "15px",
"$type": "dimension"
}
}
}
`;
/* end snapshot formats json should optionally allow stripping StyleDictionary metadata for DTCG formatted tokens */

129 changes: 127 additions & 2 deletions __tests__/formats/json.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,60 @@ const file = {
};

const tokens = {
color: {
red: { value: '#FF0000' },
colors: {
red: {
500: {
value: '#ff0000',
type: 'color',
path: ['colors', 'red', '500'],
filePath: 'tokens.json',
attributes: {
foo: 'bar',
},
name: 'colors-red-500',
},
},
},
dimensions: {
xs: {
value: '15px',
type: 'dimension',
path: ['dimension', 'xs'],
filePath: 'tokens.json',
attributes: {
foo: 'bar',
},
name: 'dimension-xs',
},
},
};

const DTCGTokens = {
colors: {
red: {
500: {
$value: '#ff0000',
$type: 'color',
path: ['colors', 'red', '500'],
filePath: 'tokens.json',
attributes: {
foo: 'bar',
},
name: 'colors-red-500',
},
},
},
dimensions: {
xs: {
$value: '15px',
$type: 'dimension',
path: ['dimension', 'xs'],
filePath: 'tokens.json',
attributes: {
foo: 'bar',
},
name: 'dimension-xs',
},
},
};

Expand All @@ -43,5 +95,78 @@ describe('formats', () => {
),
).to.matchSnapshot();
});

it('should optionally allow stripping StyleDictionary metadata', async () => {
await expect(
format(
createFormatArgs({
dictionary: { tokens, allTokens: flattenTokens(tokens) },
file,
platform: {},
options: {
stripMeta: true,
},
}),
{},
file,
),
).to.matchSnapshot();
});

it('should optionally allow stripping everything but an allowlist of props', async () => {
await expect(
format(
createFormatArgs({
dictionary: { tokens, allTokens: flattenTokens(tokens) },
file,
platform: {},
options: {
stripMeta: {
keep: ['value', 'type'],
},
},
}),
{},
file,
),
).to.matchSnapshot();
});

it('should optionally allow stripping custom list of metadata props', async () => {
await expect(
format(
createFormatArgs({
dictionary: { tokens, allTokens: flattenTokens(tokens) },
file,
platform: {},
options: {
stripMeta: {
strip: ['attributes', 'filePath'],
},
},
}),
{},
file,
),
).to.matchSnapshot();
});

it('should optionally allow stripping StyleDictionary metadata for DTCG formatted tokens', async () => {
await expect(
format(
createFormatArgs({
dictionary: { tokens: DTCGTokens, allTokens: flattenTokens(DTCGTokens) },
file,
platform: {},
options: {
usesDtcg: true,
stripMeta: true,
},
}),
{},
file,
),
).to.matchSnapshot();
});
});
});
Loading

0 comments on commit 8f1b4f0

Please sign in to comment.