A build system for creating cross-platform styles.
asset/url that will wrap such tokens inside url("") statements, this transform is applied to transformGroups scss, css and less.outputReferencesTransformed utility function to pass into outputReferences option, which will not output references for values that have been transitively transformed.5e167de: BREAKING: moved formatHelpers away from the StyleDictionary class and export them in 'style-dictionary/utils' entrypoint instead.
Before
import StyleDictionary from 'style-dictionary';
const { fileHeader, formattedVariables } = StyleDictionary.formatHelpers;
After
import { fileHeader, formattedVariables } from 'style-dictionary/utils';
90095a6: BREAKING: Allow specifying a function for outputReferences, conditionally outputting a ref or not per token. Also exposes outputReferencesFilter utility function which will determine whether a token should be outputting refs based on whether those referenced tokens were filtered out or not.
If you are maintaining a custom format that allows outputReferences option, you'll need to take into account that it can be a function, and pass the correct options to it.
Before:
StyleDictionary.registerFormat({
name: 'custom/es6',
formatter: async (dictionary) => {
const { allTokens, options, file } = dictionary;
const { usesDtcg } = options;
const compileTokenValue = (token) => {
let value = usesDtcg ? token.$value : token.value;
const originalValue = usesDtcg ? token.original.$value : token.original.value;
// Look here 👇
const shouldOutputRefs = outputReferences && usesReferences(originalValue);
if (shouldOutputRefs) {
// ... your code for putting back the reference in the output
value = ...
}
return value;
}
return `${allTokens.reduce((acc, token) => `${acc}export const ${token.name} = ${compileTokenValue(token)};\n`, '')}`;
},
});
After
StyleDictionary.registerFormat({
name: 'custom/es6',
formatter: async (dictionary) => {
const { allTokens, options, file } = dictionary;
const { usesDtcg } = options;
const compileTokenValue = (token) => {
let value = usesDtcg ? token.$value : token.value;
const originalValue = usesDtcg ? token.original.$value : token.original.value;
// Look here 👇
const shouldOutputRef =
usesReferences(original) &&
(typeof options.outputReferences === 'function'
? outputReferences(token, { dictionary, usesDtcg })
: options.outputReferences);
if (shouldOutputRefs) {
// ... your code for putting back the reference in the output
value = ...
}
return value;
}
return `${allTokens.reduce((acc, token) => `${acc}export const ${token.name} = ${compileTokenValue(token)};\n`, '')}`;
},
});
8b6fff3: Fixes some noisy warnings still being outputted even when verbosity is set to default.
We also added log.warning "disabled" option for turning off warnings altogether, meaning you only get success logs and fatal errors.
This option can be used from the CLI as well using the --no-warn flag.
aff6646: Allow passing a custom FileSystem Volume to your Style-Dictionary instances, to ensure input/output files are read/written from/to that specific volume. Useful in case you want multiple Style-Dictionary instances that are isolated from one another in terms of inputs/outputs.
import { Volume } from 'memfs';
// You will need a bundler for memfs in browser...
// Or use as a prebundled fork:
import memfs from '@bundled-es-modules/memfs';
const { Volume } = memfs;
const vol = new Volume();
const sd = new StyleDictionary(
{
tokens: {
colors: {
red: {
value: '#FF0000',
type: 'color',
},
},
},
platforms: {
css: {
transformGroup: 'css',
files: [
{
destination: 'variables.css',
format: 'css/variables',
},
],
},
},
},
{ volume: vol },
);
await sd.buildAllPlatforms();
vol.readFileSync('/variables.css');
/**
* :root {
* --colors-red: #FF0000;
* }
*/
This also works when using extend:
const extendedSd = await sd.extend(cfg, { volume: vol });
79bb201: BREAKING: Logging has been redesigned a fair bit and is more configurable now.
Before:
{
"log": "error" // 'error' | 'warn' -> 'warn' is the default value
}
After:
{
"log": {
"warnings": "error", // 'error' | 'warn' -> 'warn' is the default value
"verbosity": "verbose" // 'default' | 'verbose' | 'silent' -> 'default' is the default value
}
}
Log is now and object and the old "log" option is now "warnings".
This configures whether the following five warnings will be thrown as errors instead of being logged as warnings:
Verbosity configures whether the following warnings/errors should display in a verbose manner:
And it also configures whether success/neutral logs should be logged at all. Using "silent" (or --silent in the CLI) means no logs are shown apart from fatal errors.
bcb5ef3: Remove reliance on CTI token structure across transforms, actions and formats.
Breaking changes:
attributes.category as the token type indicator.name/cti/casing to just name/casing. name/ti/camel and name/ti/constant have been removed. For example name/cti/kebab transform is now name/kebab.content/icon has been renamed to html/icon since it targets HTML entity strings, not just any icon content.font/objC/literal, font/swift/literal and font/flutter/literal have been removed in favor of font/objC/literal, font/swift/literal and font/flutter/literal, as they do he exact same transformations.typescript/module-declarations format to be updated with current DesignToken type interface.Before:
{
"color": {
"red": {
"value": "#FF0000"
}
}
}
After:
{
"color": {
// <-- this no longer needs to be "color" in order for the tokens inside this group to be considered of type "color"
"red": {
"value": "#FF0000",
"type": "color"
}
}
}