-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(tokens): add tailwind config output files for utility and helper…
… tokensets (#3899)
- Loading branch information
1 parent
c5bf1de
commit 4a3a243
Showing
12 changed files
with
355 additions
and
189 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,3 @@ | ||
| # Outputs | ||
| dist/ | ||
| _temp/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import { fileHeader } from 'style-dictionary/utils'; | ||
| import { expandTypesMap } from '@tokens-studio/sd-transforms'; | ||
| import StyleDictionary from '../style-dictionary.js'; | ||
| import { getSetName, getSet, getTokenValue, registerConfigMethod } from '../methods.js'; | ||
|
|
||
| /** | ||
| * Registers a config getter method to generate output files for all code relevant tokens in the tokens.json. | ||
| */ | ||
| registerConfigMethod((tokenSets, { sourcePath, buildPath }) => { | ||
| return Object.entries(tokenSets.output).map(([name, { type, layer, filePath, sets }]) => { | ||
| return { | ||
| meta: { | ||
| type, | ||
| layer, | ||
| filePath, | ||
| setNames: Object.keys(sets), | ||
| }, | ||
| source: [`${sourcePath}_temp/output/${filePath}`], | ||
| include: [`${sourcePath}_temp/source/**/*.json`], | ||
| platforms: { | ||
| scss: { | ||
| transforms: ['name/kebab'], | ||
| buildPath, | ||
| expand: { | ||
| include: ['typography'], | ||
| typesMap: expandTypesMap, | ||
| }, | ||
| files: [ | ||
| { | ||
| destination: `_${name}.scss`.toLowerCase(), | ||
| format: 'swisspost/scss-format', | ||
| filter: 'swisspost/scss-filter', | ||
| options: { | ||
| outputReferences: true, | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| }; | ||
| }); | ||
| }); | ||
|
|
||
| /** | ||
| * @function StyleDictionary.registerFilter() | ||
| * Defines a custom StyleDictionary filter. | ||
| * | ||
| * @param object { | ||
| * name: string, | ||
| * filter: (token: TransformedToken, options: Config) => boolean | ||
| * } | ||
| * | ||
| * swisspost/tokenset-filter: | ||
| * Used to filter only the tokens of the current tokenset (e.g. core, device-desktop, ...). | ||
| */ | ||
| StyleDictionary.registerFilter({ | ||
| name: 'swisspost/scss-filter', | ||
| filter: (token, { meta }) => { | ||
| return token.filePath.includes(`/output/${meta.filePath}`); | ||
| }, | ||
| }); | ||
|
|
||
| /** | ||
| * @function StyleDictionary.registerFormat() | ||
| * Defines a custom StyleDictionary format to be used at specific places in the build process. | ||
| * | ||
| * @param object { | ||
| * name: string, | ||
| * format: (dictionary: Dictionary, file: File, options: Config & LocalOptions, platform: PlatformConfig) => string | ||
| * } | ||
| * | ||
| * swisspost/scss-format: | ||
| * Used to declare the format of the *.scss output files. | ||
| */ | ||
| StyleDictionary.registerFormat({ | ||
| name: 'swisspost/scss-format', | ||
| format: async ({ dictionary, options, file }) => { | ||
| const { meta } = options; | ||
| const header = await fileHeader({ file, commentStyle: 'short' }); | ||
|
|
||
| return ( | ||
| header + | ||
| meta.setNames | ||
| .map(setName => { | ||
| const tokenSetName = getSetName(options, setName); | ||
| const tokenSet = getSet(options, dictionary, setName) | ||
| .map(token => { | ||
| const tokenValue = getTokenValue(options, token); | ||
|
|
||
| return meta.layer === 'core' | ||
| ? ` --${token.name}: ${tokenValue};` | ||
| : ` ${token.name}: ${tokenValue},`; | ||
| }) | ||
| .join('\n'); | ||
|
|
||
| return meta.layer === 'core' | ||
| ? `:root {\n${tokenSet}\n}\n` | ||
| : `$${tokenSetName}: (\n${tokenSet}\n);\n`; | ||
| }) | ||
| .join('\n') | ||
| ); | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| import './all.js'; | ||
| import './tailwind.js'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import { fileHeader } from 'style-dictionary/utils'; | ||
| import { TOKENSET_LAYERS, TOKENSET_PREFIX } from '../constants.js'; | ||
| import StyleDictionary from '../style-dictionary.js'; | ||
| import { registerConfigMethod, getTokenValue } from '../methods.js'; | ||
| import { objectDeepmerge, objectTextoutput } from '../utils/index.js'; | ||
|
|
||
| const TAILWIND_TOKENSET_NAMES = ['utilities', 'helpers']; | ||
|
|
||
| /** | ||
| * Registers a config getter method to generate output files for tailwind relevant tokens in the tokens.json. | ||
| */ | ||
| registerConfigMethod((tokenSets, { sourcePath, buildPath }) => { | ||
| return Object.entries(tokenSets.output) | ||
| .filter( | ||
| ([name, { layer }]) => | ||
| layer === TOKENSET_LAYERS.component && TAILWIND_TOKENSET_NAMES.includes(name), | ||
| ) | ||
| .map(([name, { type, layer, filePath, sets }]) => { | ||
| return { | ||
| meta: { | ||
| type, | ||
| layer, | ||
| filePath, | ||
| setNames: Object.keys(sets), | ||
| }, | ||
| source: [`${sourcePath}_temp/output/${filePath}`], | ||
| include: [`${sourcePath}_temp/source/**/*.json`], | ||
| platforms: { | ||
| tailwind: { | ||
| transforms: ['name/kebab'], | ||
| buildPath: `${buildPath}tailwind/`, | ||
| files: [ | ||
| { | ||
| destination: `${name}.tailwind.js`, | ||
| format: 'swisspost/tailwind-format', | ||
| filter: 'swisspost/tailwind-filter', | ||
| options: { | ||
| outputReferences: true, | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| }; | ||
| }); | ||
| }); | ||
|
|
||
| /** | ||
| * @function StyleDictionary.registerFilter() | ||
| * Defines a custom StyleDictionary filter. | ||
| * | ||
| * @param object { | ||
| * name: string, | ||
| * filter: (token: TransformedToken, options: Config) => boolean | ||
| * } | ||
| * | ||
| * swisspost/tailwind-filter: | ||
| * Used to filter only the component layer tokens defined in the tokensets with the names in TAILWIND_TOKENSET_NAMES. | ||
| */ | ||
| StyleDictionary.registerFilter({ | ||
| name: 'swisspost/tailwind-filter', | ||
| filter: token => { | ||
| return token.filePath.includes('/output/'); | ||
| }, | ||
| }); | ||
|
|
||
| /** | ||
| * @function StyleDictionary.registerFormat() | ||
| * Defines a custom StyleDictionary format to be used at specific places in the build process. | ||
| * | ||
| * @param object { | ||
| * name: string, | ||
| * format: (dictionary: Dictionary, file: File, options: Config & LocalOptions, platform: PlatformConfig) => string | ||
| * } | ||
| * | ||
| * swisspost/tailwind-format: | ||
| * Used to declare the format of the tailwind output files. | ||
| */ | ||
| StyleDictionary.registerFormat({ | ||
| name: 'swisspost/tailwind-format', | ||
| format: async ({ dictionary, options, file }) => { | ||
| const header = await fileHeader({ file, commentStyle: 'short' }); | ||
| const tailwindTokensObject = dictionary.allTokens.reduce((allTokens, token) => { | ||
| const tokenObj = token.path | ||
| .slice(token.path.indexOf(TOKENSET_PREFIX) + 1) | ||
| .reverse() | ||
| .reduce((res, p) => ({ [p]: res }), getTokenValue(options, token)); | ||
|
|
||
| return objectDeepmerge(allTokens, tokenObj); | ||
| }, {}); | ||
|
|
||
| return header + `export default {${objectTextoutput(tailwindTokensObject)}\n};\n`; | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.