Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(examples): add matching build files example #481

Merged
merged 15 commits into from
Nov 14, 2020
Merged

feat(examples): add matching build files example #481

merged 15 commits into from
Nov 14, 2020

Conversation

kharrop
Copy link

@kharrop kharrop commented Nov 7, 2020

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.

dbanksdesign and others added 9 commits October 8, 2020 10:14
`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>
Copy link
Member

@dbanksdesign dbanksdesign left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Super awesome example! This is definitely an example that gets brought up often, great to see it added here. I made a few minor call-outs, but overall looks good!

@@ -0,0 +1,5 @@
/**
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this file can be deleted?

},
};

StyleDictionary.registerTransform({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't appear that this transform or the next one are being used?

source: ["properties/**/*.json"],
platforms: {
"esm/category": {
transformGroup: "js",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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) => ({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Super cool 😎

format: "javascript/es6",
filter: {
attributes: {
category: tokenCategory,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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...

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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. :)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll think about it today..

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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());
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TIL how to get all directories in a folder 😁

@kharrop kharrop changed the title feat(examples): add custom filters example feat(examples): add matching build files example Nov 11, 2020
@kharrop kharrop requested a review from dbanksdesign November 12, 2020 20:34
Copy link
Collaborator

@chazzmoney chazzmoney left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! :shipit:

@dbanksdesign dbanksdesign changed the base branch from main to 3.0 November 14, 2020 00:18
Copy link
Member

@dbanksdesign dbanksdesign left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! :shipit: thank you so much!

@dbanksdesign dbanksdesign merged commit 5a80ef6 into amzn:3.0 Nov 14, 2020
@kharrop kharrop deleted the custom-filters branch December 15, 2020 04:09
@uptonking uptonking mentioned this pull request Jan 2, 2021
32 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants