v4.0.0-prerelease.24
Pre-release
Pre-release
github-actions
released this
05 Apr 09:41
·
26 commits
to main
since this release
Major Changes
-
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
foroutputReferences
, conditionally outputting a ref or not per token. Also exposesoutputReferencesFilter
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`, '')}`; }, });