feat(examples): add matching build files example #481
Conversation
`style-dictionary build` and `style-dictionary clean` were not using the same config path defaults. This fixes that.
Bumps [prismjs](https://github.com/PrismJS/prism) from 1.20.0 to 1.21.0. - [Release notes](https://github.com/PrismJS/prism/releases) - [Changelog](https://github.com/PrismJS/prism/blob/master/CHANGELOG.md) - [Commits](PrismJS/prism@v1.20.0...v1.21.0) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Bumps [node-fetch](https://github.com/bitinn/node-fetch) from 2.6.0 to 2.6.1. - [Release notes](https://github.com/bitinn/node-fetch/releases) - [Changelog](https://github.com/node-fetch/node-fetch/blob/master/docs/CHANGELOG.md) - [Commits](node-fetch/node-fetch@v2.6.0...v2.6.1) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Bumps [elliptic](https://github.com/indutny/elliptic) from 6.5.2 to 6.5.3. - [Release notes](https://github.com/indutny/elliptic/releases) - [Commits](indutny/elliptic@v6.5.2...v6.5.3) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
| @@ -0,0 +1,5 @@ | |||
| /** | |||
There was a problem hiding this comment.
I think this file can be deleted?
| }, | ||
| }; | ||
|
|
||
| StyleDictionary.registerTransform({ |
There was a problem hiding this comment.
It doesn't appear that this transform or the next one are being used?
| source: ["properties/**/*.json"], | ||
| platforms: { | ||
| "esm/category": { | ||
| transformGroup: "js", |
There was a problem hiding this comment.
It looks like you are defining both transforms and a transformGroup. I think the transforms will override anything in transformGroup so we might be able to remove this line (and the other transformGroup lines below)
| transformGroup: "js", | ||
| buildPath: "build/js/esm/", | ||
| transforms: ["attribute/cti", "name/cti/camel", "size/px", "color/hex"], | ||
| files: tokens.map((tokenCategory) => ({ |
| format: "javascript/es6", | ||
| filter: { | ||
| attributes: { | ||
| category: tokenCategory, |
There was a problem hiding this comment.
This is awesome that it uses the built-in filter mechanism!
|
|
||
| - Each token category as its own Sass partial (_colors.scss) | ||
| - Separate component files (button.css, input.css, etc) | ||
| - Tree shaking (only import what you need) |
There was a problem hiding this comment.
I love this 'common use cases' section. I think this is something we should start adding to examples.
| @@ -0,0 +1,61 @@ | |||
| ## Customize token output using filters | |||
|
|
|||
| This example shows how you can manage what tokens are generated and how they are organized. This is useful when you want to generate a 1:1 relationship between files and token categories. | |||
There was a problem hiding this comment.
What do you think about changing the name of this example? This example is showing how to generate output files 1:1 based on category/folder. I don't have a good name in mind right now...
There was a problem hiding this comment.
Darn, I was hoping you had a suggestion haha. I was thinking maybe something like matching-build-files ? Open to whatever makes it easier to understand what this example does. :)
There was a problem hiding this comment.
I'll think about it today..
There was a problem hiding this comment.
How about "Custom Build", or "Custom Output Structure"?
I'm so excited to see this work, I'm creating a multi-brand design system that has shared global styles among the brands, and specific brand styles for each site. I'd love to output tokens as two separate files, like global.scss and brand.scss
| "name": "style-dictionary-custom-filters", | ||
| "version": "1.0.0", | ||
| "description": "An example to show custom filters", | ||
| "main": "dist/js/cjs/index.js", |
There was a problem hiding this comment.
Should these paths be 'build/' rather than 'dist/'?
| const { readdirSync, statSync } = require("fs"); | ||
| const { join } = require("path"); | ||
| const dirs = (p) => | ||
| readdirSync(p).filter((f) => statSync(join(p, f)).isDirectory()); |
There was a problem hiding this comment.
TIL how to get all directories in a folder 😁
kharrop
changed the title
Issue #, if available: #251
Description of changes:
Adding an example of how someone could automatically generate 1:1 token files based on a custom filter.
By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.