[Snyk] Upgrade: chroma-js, style-dictionary #163
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Snyk has created this PR to upgrade multiple dependencies.
👯♂ The following dependencies are linked and will therefore be updated together.ℹ️ 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.
chroma-js
⚠️ This is a major version upgrade, and may be a breaking change | a month ago
⚠️ This is a major version upgrade, and may be a breaking change | 2 months ago
from 2.6.0 to 3.0.0 | 3 versions ahead of your current version
on 2024-08-17
style-dictionary
from 3.8.0 to 4.0.1 | 45 versions ahead of your current version
on 2024-07-18
Release notes
Package name: chroma-js
What's Changed
lab()
,lch()
,oklab()
,oklch()
space.setLabWhitePoint
.color.css()
will no longer return legacy CSS colors likergb(255, 255, 0)
but use modern CSS colors likergb(255 255 0)
instead.round
forhsl2rgb
by @ zyyv in #344Full Changelog: v2.6.0...v3.0.0
3.0.0-0
What's Changed
Full Changelog: v2.5.0...v2.6.0
Package name: style-dictionary
Patch Changes
Major Changes
6cc7f31: BREAKING:
usesReference
util function is nowusesReferences
to be consistent plural form like the other reference util functions.getReferences
first and second parameters have been swapped to be consistent withresolveReferences
, 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:
.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 fewerany
s.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 asParser
,Transform
,DesignTokens
, etc. can be imported from the newly added types entrypoint: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, soFilter['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 returnsPromise<StyleDictionary.Core>
instead ofStyleDictionary.Core
.allProperties
/properties
was deprecated in v3, and is now removed fromStyleDictionary.Core
, useallTokens
andtokens
instead.registerTemplate
were deprecated in v3, now removed. Use Formats instead.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 tofileHeader
.Note the change from singular to plural form here.
Before:
After:
79bb201: BREAKING: Logging has been redesigned a fair bit and is more configurable now.
Before:
After:
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.
f2ed88b: BREAKING: Actions, when registered, are put inside the
hooks.actions
property now, as opposed toaction
.Note the change from singular to plural form here.
Before:
After:
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
const { fileHeader, formattedVariables } = StyleDictionary.formatHelpers;
After
f2ed88b: Filters, when registered, are put inside the
hooks.filters
property now, as opposed tofilter
.Note the change from singular to plural form here.
Before:
After:
In addition, when using
registerFilter
method, the name of the filter function is nowfilter
instead ofmatcher
.Before:
StyleDictionary.registerFilter({
name: 'colors-only',
matcher: (token) => token.type === 'color',
});
After:
StyleDictionary.registerFilter({
name: 'colors-only',
filter: (token) => token.type === 'color',
});
f2ed88b: BREAKING: Transform groups, when registered, are put inside the
hooks.transformGroups
property now, as opposed totransformGroup
.Before:
After:
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.
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 toformat
.The
formatter
handler function has been renamed toformat
for consistency.The importable type interfaces have also been renamed,
Formatter
is nowFormatFn
andFormatterArguments
is nowFormatFnArguments
.Note that you can also use
Format['format']
instead ofFormatFn
, orParameters<Format['format']>
instead ofFormatFnArguments
, so these renames may not matter.Before:
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 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 calledhooks
.Before:
After:
2f80da2: BREAKING:
className
,packageName
,mapName
,type
,name
,resourceType
andresourceMap
options for a bunch of built-in formats have been moved fromfile
to go inside thefile.options
object, for API consistency reasons.Before:
After:
f2ed88b: BREAKING: Transforms, when registered, are put inside the
hooks.transforms
property now, as opposed totransform
.The
matcher
property has been renamed tofilter
(to align with the Filter hook change), and thetransformer
handler function has been renamed totransform
for consistency.Before:
After
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:
name: 'custom/es6',
formatter: async (dictionary) => {
const { allTokens, options, file } = dictionary;
const { usesDtcg } = options;