Skip to content

Commit

Permalink
feat: apply stripMeta option to new javascript/esm format
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorenbroekema
jorenbroekema committed Nov 11, 2024
1 parent d7b5836 commit 4bf68a3
Show file tree
Hide file tree
Showing 6 changed files with 322 additions and 37 deletions.
5 changes: 5 additions & 0 deletions .changeset/violet-goats-smile.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'style-dictionary': minor
---

Apply stripMeta from "json" format to the new "javascript/esm" as well.
125 changes: 123 additions & 2 deletions __tests__/formats/__snapshots__/es6Module.test.snap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,133 @@ snapshots["formats javascript/esm should be a valid JS file and match snapshot"]
*/
export default {
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 javascript/esm should be a valid JS file and match snapshot */

snapshots["formats javascript/esm should optionally allow stripping StyleDictionary metadata"] =
`/**
* Do not edit directly, this file was auto-generated.
*/
export default {
colors: {
red: {
500: {
value: "#ff0000",
type: "color",
},
},
},
dimensions: {
xs: {
value: "15px",
type: "dimension",
},
},
};
`;
/* end snapshot formats javascript/esm should optionally allow stripping StyleDictionary metadata */

snapshots["formats javascript/esm should optionally allow stripping everything but an allowlist of props"] =
`/**
* Do not edit directly, this file was auto-generated.
*/
export default {
colors: {
red: {
500: {
value: "#ff0000",
type: "color",
},
},
},
dimensions: {
xs: {
value: "15px",
type: "dimension",
},
},
};
`;
/* end snapshot formats javascript/esm should optionally allow stripping everything but an allowlist of props */

snapshots["formats javascript/esm should optionally allow stripping custom list of metadata props"] =
`/**
* Do not edit directly, this file was auto-generated.
*/
export default {
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 javascript/esm should optionally allow stripping custom list of metadata props */

snapshots["formats javascript/esm should optionally allow stripping StyleDictionary metadata for DTCG formatted tokens"] =
`/**
* Do not edit directly, this file was auto-generated.
*/
export default {
colors: {
red: {
500: {
$value: "#ff0000",
$type: "color",
},
},
},
dimensions: {
xs: {
$value: "15px",
$type: "dimension",
},
},
};
`;
/* end snapshot formats javascript/esm should optionally allow stripping StyleDictionary metadata for DTCG formatted tokens */

129 changes: 127 additions & 2 deletions __tests__/formats/es6Module.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,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 @@ -46,5 +98,78 @@ describe('formats', () => {
),
).to.matchSnapshot();
});

it('should optionally allow stripping StyleDictionary metadata', async () => {
await expect(
await 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(
await 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(
await 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(
await format(
createFormatArgs({
dictionary: { tokens: DTCGTokens, allTokens: flattenTokens(DTCGTokens) },
file,
platform: {},
options: {
usesDtcg: true,
stripMeta: true,
},
}),
{},
file,
),
).to.matchSnapshot();
});
});
});
24 changes: 20 additions & 4 deletions docs/src/content/docs/reference/Hooks/Formats/predefined.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -308,10 +308,13 @@ Creates an ES6 module object of the style dictionary.
}
```

| Param | Type | Description |
| ---------------- | --------- | --------------------------------------------------------- |
| `options` | `Object` | |
| `options.minify` | `boolean` | Whether or not to minify the output. Defaults to `false`. |
| Param | Type | Description |
| ------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `options` | `Object` | |
| `options.minify` | `boolean` | Whether or not to minify the output. Defaults to `false`. |
| `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. |
| `options.stripMeta.keep` | `string[]` | Array of property keys to keep in the output. |
| `options.stripMeta.strip` | `string[]` | Array of property keys to strip from the output. |

Example:

Expand Down Expand Up @@ -348,6 +351,19 @@ export default {
};
```

Example with `stripMeta` flag:

```js title="vars.js"
export default {
colors: {
black: {
$value: '#000000',
$type: 'color',
},
},
};
```

---

### typescript/es6-declarations
Expand Down
Loading

0 comments on commit 4bf68a3

Please sign in to comment.