Version Packages (prerelease)

[github-actions[bot]]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to v4, this PR will be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

v4 is currently in pre mode so this branch has prereleases rather than normal releases. If you want to exit prereleases, run changeset pre exit on v4.

⚠️⚠️⚠️⚠️⚠️⚠️

Releases

style-dictionary@4.0.0-prerelease.24

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 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`, '')}`;
    },
  });