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

[Snyk] Upgrade style-dictionary from 3.8.0 to 4.1.1 #213

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

WontonSam
Copy link
Owner

snyk-top-banner

Snyk has created this PR to upgrade style-dictionary from 3.8.0 to 4.1.1.

ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.


⚠️ Warning: This PR contains major version upgrade(s), and may be a breaking change.

  • The recommended version is 47 versions ahead of your current version.

  • The recommended version was released on 23 days ago.

Release notes
Package name: style-dictionary
  • 4.1.1 - 2024-09-12

    Patch Changes

    • 5db3521: Add iosSwiftEnumOpts.className and iosSwiftAnyOpts.className formats property documentation
    • 23f8a25: Use cp and rmdir commands for copy_assets do and undo methods, since they affect directories, not files.
  • 4.1.0 - 2024-08-28

    Minor Changes

    • ccf27b7: Prevent duplicate redundant calls to StyleDictionary class methods by caching platform specific config & tokens results.

      Added reusable methods:

      • getPlatformTokens() -> grabs the tokens/allTokens(new! exportPlatform does not return this) for a specific platform, after running platform specific preprocessors and transforms. This replaces the old exportPlatform method which is now deprecated and will be removed in v5.
      • getPlatformConfig() -> grabs the processed/transformed PlatformConfig for a specific platform, replaces the now deprecated getPlatform method which will be removed in v5.

      The reasons for deprecating those methods and replacing them with new ones is to reduce method ambiguity and make them more pure.

      Add new options object to methods:

      • getPlatformTokens
      • getPlatformConfig
      • exportPlatform (deprecated, see above)
      • getPlatform (deprecated, see above)
      • formatPlatform
      • formatAllPlatforms
      • buildPlatform
      • buildAllPlatforms
      • cleanPlatform
      • cleanAllPlatforms

      with property cache, which if set to false, will disable this caching of generating the platform specific config / tokens, e.g.:

      await sd.exportPlatform('css', { cache: false });
      await sd.buildAllPlatforms('css', { cache: false });

      Expectation is that this is usually not useful for majority of users, unless for example you're testing multiple runs of StyleDictionary while changing tokens or platform configs in between those runs.

    Patch Changes

    • 2ec9a44: size/rem transform to leave 0 (string or number) values as is, since 0 doesn't need a unit.

    • f317430: Added link to logging documentation inside all of the warnings and errors that refer to verbosity.

    • 6275983: Respect formatting options in scss map-deep/map-flat formats, those that make sense:

      • commentPosition
      • commentStyle
      • indentation

      Also export a new type interface FormattingOverrides, which is a limited version of FormattingOptions.
      These contain the formatting options that can be overridden by users, whereas the full version is meant for the format helper utilities such as createPropertyFormatter/formattedVariables.

  • 4.0.1 - 2024-07-18

    Patch Changes

    • e6cbf73: Fix type information for Config.parser
    • e8aea2f: Fix transitive color transform advanced example, migrate chroma-js to colorjs.io
    • 7afcffd: Fix bugs with expand tokens where they would run before instead of after user-configured preprocessors, and would fatally error on broken references. Broken refs should be tolerated at the expand stage, and errors will be thrown after preprocessor lifecycle if the refs are still broken at that point.
    • 922b6aa: Update memfs esm-fork dependency to allow named import Volume.
    • 61b6984: Fix 'filePath' missing from falsy token values
    • 3ae67e3: Upgrade memfs esm fork to publish types and bumping stream to fix unclear licensing issue with transitive dependency.
  • 4.0.0 - 2024-06-28

    For a more comprehensive migration guide from version 3.x.x to version 4.0.0,
    visit the migration guide page

    Major Changes

    • 6cc7f31: BREAKING:

      • usesReference util function is now usesReferences to be consistent plural form like the other reference util functions.

      • getReferences first and second parameters have been swapped to be consistent with resolveReferences, so value first, then the full token object (instead of the entire dictionary instance).

      • getReferences accepts a third options parameter which can be used to set reference Regex options as well as an unfilteredTokens object which can be used as a fallback when references are made to tokens that have been filtered out. There will be warnings logged for this.

      • format.formatter removed old function signature of (dictionary, platform, file) in favor of ({ dictionary, platform, options, file }).

      • Types changes:

        • Style Dictionary is entirely strictly typed now, and there will be .d.ts files published next to every file, this means that if you import from one of Style Dictionary's entrypoints, you automatically get the types implicitly with it. This is a big win for people using TypeScript, as the majority of the codebase now has much better types, with much fewer anys.
        • There is no more hand-written Style Dictionary module index.d.ts anymore that exposes all type interfaces on itself. This means that you can no longer grab types that aren't members of the Style Dictionary class directly from the default export of the main entrypoint. External types such as Parser, Transform, DesignTokens, etc. can be imported from the newly added types entrypoint:
        import type { DesignTokens, Transform, Parser } from 'style-dictionary/types';

        Please raise an issue if you find anything missing or suddenly broken.

        • Matcher, Transformer, Formatter, etc. are still available, although no longer directly but rather as properties on their parents, so Filter['matcher'], Transform['transformer'], Format['formatter']
    • dcbe2fb: - The project has been fully converted to ESM format, which is also the format that the browser uses.
      For users, this means you'll have to either use Style Dictionary in ESM JavaScript code, or dynamically import it into your CommonJS code.

      • StyleDictionary.extend() method is now asynchronous, which means it returns Promise<StyleDictionary.Core> instead of StyleDictionary.Core.
      • allProperties / properties was deprecated in v3, and is now removed from StyleDictionary.Core, use allTokens and tokens instead.
      • Templates and the method registerTemplate were deprecated in v3, now removed. Use Formats instead.
      • The package now uses package entrypoints, which means that what is importable from the package is locked down to just the specified entrypoints: style-dictionary & style-dictionary/fs. If more is needed, please raise an issue explaining which file you were importing and why you need it to be public API.
    • f2ed88b: BREAKING: File headers, when registered, are put inside the hooks.fileHeaders property now, as opposed to fileHeader.
      Note the change from singular to plural form here.

      Before:

      export default {
        fileHeader: {
          foo: (defaultMessages = []) => ['Ola, planet!', ...defaultMessages, 'Hello, World!'],
        },
      };

      After:

      export default {
        hooks: {
          fileHeaders: {
            foo: (defaultMessages = []) => ['Ola, planet!', ...defaultMessages, 'Hello, World!'],
          },
        },
      };
    • 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
          "errors": {
            "brokenReferences": "console" // 'console' | 'throw' -> 'throw' 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:

      • Token value collisions (in the source)
      • Token name collisions (when exporting)
      • Missing "undo" function for Actions
      • File not created because no tokens found, or all of them filtered out
      • Broken references in file when using outputReferences, but referring to a token that's been filtered out

      Verbosity configures whether the following warnings/errors should display in a verbose manner:

      • Token collisions of both types (value & name)
      • Broken references due to outputReferences & filters
      • Token reference errors

      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.

    • f2ed88b: BREAKING: Actions, when registered, are put inside the hooks.actions property now, as opposed to action.
      Note the change from singular to plural form here.

      Before:

      export default {
        action: {
          'copy-assets': {
            do: () => {}
            undo: () => {}
          }
        },
      };

      After:

      export default {
        hooks: {
          actions: {
            'copy-assets': {
              do: () => {}
              undo: () => {}
            }
          },
        },
      };
    • a4542f4: BREAKING: StyleDictionaryInstance.properties & .allProperties have been removed. They were deprecated in v3 in favor of .tokens and .allTokens.

    • 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';
    • f2ed88b: Filters, when registered, are put inside the hooks.filters property now, as opposed to filter.
      Note the change from singular to plural form here.

      Before:

      export default {
        filter: {
          'colors-only': (token) => token.type === 'color,
        },
        platforms: {
          css: {
            files: [{
              format: 'css/variables',
              destination: '_variables.css',
              filter: 'colors-only',
            }],
          },
        },
      };

      After:

      export default {
        hooks: {
          filters: {
            'colors-only': (token) => token.type === 'color,
          },
        },
        platforms: {
          css: {
            files: [{
              format: 'css/variables',
              destination: '_variables.css',
              filter: 'colors-only',
            }],
          },
        },
      };

      In addition, when using registerFilter method, the name of the filter function is now filter instead of matcher.

      Before:

      import StyleDictionary from 'style-dictionary';

      StyleDictionary.registerFilter({
      name: 'colors-only',
      matcher: (token) => token.type === 'color',
      });

      After:

      import StyleDictionary from 'style-dictionary';

      StyleDictionary.registerFilter({
      name: 'colors-only',
      filter: (token) => token.type === 'color',
      });

      These changes also apply for the filter function (previously matcher) inside transforms.

    • f2ed88b: BREAKING: Transform groups, when registered, are put inside the hooks.transformGroups property now, as opposed to transformGroup.

      Before:

      export default {
        // register it inline or by SD.registerTransformGroup
        transformGroup: {
          foo: ['foo-transform'],
        },
      };

      After:

      export default {
        hooks: {
          transformGroups: {
            foo: ['foo-transform'],
          },
        },
      };
    • 502dbd1: BREAKING: All of our hooks, parsers, preprocessors, transforms, formats, actions, fileHeaders and filters, support async functions as well now. This means that the formatHelpers -> fileHeader helper method is now asynchronous, to support async fileheader functions.

      import StyleDictionary from 'style-dictionary';

      const { fileHeader } = StyleDictionary.formatHelpers;

      StyleDictionary.registerFormat({
      name: 'custom/css',
      // this can be async now, usually it is if you use fileHeader format helper, since that now always returns a Promise
      formatter: async function ({ dictionary, file, options }) {
      const { outputReferences } = options;
      return (
      // this helper is now async! because the user-passed file.fileHeader might be an async function
      (await fileHeader({ file })) +
      ':root {\n' +
      formattedVariables({ format: 'css', dictionary, outputReferences }) +
      '\n}\n'
      );
      },
      });

    • f2ed88b: BREAKING: Formats, when registered, are put inside the hooks.formats property now, as opposed to format.
      The formatter handler function has been renamed to format for consistency.

      The importable type interfaces have also been renamed, Formatter is now FormatFn and FormatterArguments is now FormatFnArguments.
      Note that you can also use Format['format'] instead of FormatFn, or Parameters<Format['format']> instead of FormatFnArguments, so these renames may not matter.

      Before:

      import StyleDictionary from 'style-dictionary';
      import type { Formatter, FormatterArguments } from 'style-dictionary/types';

      // register it with register method
      StyleDictionary.registerFormat({
      name: 'custom/json',
      formatter: ({ dictionary }) => JSON.stringify(dictionary, null, 2),
      });

      export default {
      // OR define it inline
      format: {
      'custom/json': ({ dictionary }) => JSON.stringify(dictionary, null, 2),
      },
      platforms: {
      json: {
      files: [
      {
      destination: 'output.json',
      format: 'custom/json',
      },
      ],
      },
      },
      };

      After:

      import StyleDictionary from 'style-dictionary';
      import type { FormatFn, FormatFnArguments } from 'style-dictionary/types';

      // register it with register method
      StyleDictionary.registerFormat({
      name: 'custom/json',
      format: ({ dictionary }) => JSON.stringify(dictionary, null, 2),
      });

      export default {
      // OR define it inline
      hooks: {
      formats: {
      'custom/json': ({ dictionary }) => JSON.stringify(dictionary, null, 2),
      },
      },
      platforms: {
      json: {
      files: [
      {
      destination: 'output.json',
      format: 'custom/json',
      },
      ],
      },
      },
      };

    • e83886c: BREAKING: preprocessors must now also be explicitly applied on global or platform level, rather than only registering it. This is more consistent with how the other hooks work and allows applying it on a platform level rather than only on the global level.

      preprocessors property that contains the registered preprocessors has been moved under a wrapping property called hooks.

      Before:

      export default {
        // register it inline or by SD.registerPreprocessor
        // applies automatically, globally
        preprocessors: {
          foo: (dictionary) => {
            // preprocess it
            return dictionary;
          },
        },
      };

      After:

      export default {
        // register it inline or by SD.registerPreprocessor
        hooks: {
          preprocessors: {
            foo: (dictionary) => {
              // preprocess it
              return dictionary;
            },
          },
        },
        // apply it globally
        preprocessors: ['foo'],
        platforms: {
          css: {
            // or apply is per platform
            preprocessors: ['foo'],
          },
        },
      };
    • 2f80da2: BREAKING: className, packageName, mapName, type, name, resourceType and resourceMap options for a bunch of built-in formats have been moved from file to go inside the file.options object, for API consistency reasons.

      Before:

      {
        "files": [
          {
            "destination": "tokenmap.scss",
            "format": "scss/map-deep",
            "mapName": "tokens"
          }
        ]
      }

      After:

      {
        "files": [
          {
            "destination": "tokenmap.scss",
            "format": "scss/map-deep",
            "options": {
              "mapName": "tokens"
            }
          }
        ]
      }
    • f2ed88b: BREAKING: Transforms, when registered, are put inside the hooks.transforms property now, as opposed to transform.
      The matcher property has been renamed to filter (to align with the Filter hook change), and the transformer handler function has been renamed to transform for consistency.

      Before:

      export default {
        // register it inline or by SD.registerTransform
        transform: {
          'color-transform': {
            type: 'value',
            matcher: (token) => token.type === 'color',
            transformer: (token) => token.value,
          },
        },
        platforms: {
          css: {
            // apply it per platform
            transforms: ['color-transform'],
          },
        },
      };

      After

      export default {
        // register it inline or by SD.registerTransform
        hooks: {
          transforms: {
            'color-transform': {
              type: 'value',
              filter: (token) => token.type === 'color',
              transform: (token) => token.value,
            },
          },
        },
        platforms: {
          css: {
            // apply it per platform
            transforms: ['color-transform'],
          },
        },
      };
    • 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;

      <span class="pl-k">const</span> <span class="pl-en">compileTokenValue</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-s1">token</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-k">let</span> <span class="pl-s1">value</span> <span class="pl-c1">=</span> <span class="pl-s1">usesDtcg</span> ? <span class="pl-s1">token</span><span class="pl-kos">.</span><span class="pl-c1">$value</span> : <span class="pl-s1">token</span><span class="pl-kos">.</span><span class="pl-c1">value</span><span class="pl-kos">;</span>
        <span class="pl-k">const</span> <span class="pl-s1">originalValue</span> <span class="pl-c1">=</span> <span class="pl-s1">usesDtcg</span> ? <span class="pl-s1">token</span><span class="pl-kos">.</span><span class="pl-c1">original</span><span class="pl-kos">.</span><span class="pl-c1">$value</span> : <span class="pl-s1">token</span><span class="pl-kos">.</span><span class="pl-c1">original</span><span class="pl-kos">.</span><span class="pl-c1">value</span><span class="pl-kos">;</span>
      
        <span class="pl-c">// Look here 👇</span>
        <span class="pl-k">const</span> <span class="pl-s1">shouldOutputRefs</span> <span class="pl-c1">=</span> <span class="pl-s1">outputReferences</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-en">usesReferences</span><span class="pl-kos">(</span><span class="pl-s1">originalValue</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      
        <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">shouldOutputRefs</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
          <span class="pl-c">// ... your code for putting back the reference in the output</span>
          <span class="pl-s1">value</span> <span class="pl-c1">=</span> ...
        <span class="pl-kos">}</span>
        <span class="pl-k">return</span> <span class="pl-s1">value</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span>
      <span class="pl-k">return</span> <span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">allTokens</span><span class="pl-kos">.</span><span class="pl-en">reduce</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-s1">acc</span><span class="pl-kos">,</span> <span class="pl-s1">token</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">acc</span><span class="pl-kos">}</span></span>export const <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">token</span><span class="pl-kos">.</span><span class="pl-c1">name</span><span class="pl-kos">}</span></span> = <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-en">compileTokenValue</span><span class="pl-kos">(</span><span class="pl-s1">token</span><span class="pl-kos">)</span><span class="pl-kos">}</span></span>;\n`</span><span class="pl-kos">,</span> <span class="pl-s">''</span><span class="pl-kos">)</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">;</span>
      

      },
      });

      After

Snyk has created this PR to upgrade style-dictionary from 3.8.0 to 4.1.1.

See this package in npm:
style-dictionary

See this project in Snyk:
https://app.snyk.io/org/cachiman/project/c9e20c20-fff5-4733-9cfc-b1362bbd6153?utm_source=github&utm_medium=referral&page=upgrade-pr
Copy link

google-cla bot commented Oct 5, 2024

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

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.

2 participants