chore(deps): update all non-major dependencies

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@storybook/testing-library	0.2.0 -> 0.2.2
@testing-library/user-event	14.4.3 -> 14.5.2
@types/lodash-es (source)	4.17.8 -> 4.17.12
@types/react (source)	18.2.20 -> 18.3.8
@types/react-dom (source)	18.2.7 -> 18.3.0
@vitejs/plugin-react (source)	4.0.4 -> 4.3.1
classnames	2.3.2 -> 2.5.1
interactjs (source)	1.10.18 -> 1.10.27
prettier (source)	3.0.1 -> 3.3.3
react (source)	18.2.0 -> 18.3.1
react-dom (source)	18.2.0 -> 18.3.1
sass	1.65.1 -> 1.79.3
ts-pattern	5.0.5 -> 5.3.1
typescript (source)	5.1.6 -> 5.6.2

---

Release Notes

storybookjs/testing-library (@​storybook/testing-library)

v0.2.2

Compare Source

🐛 Bug Fix

• Revert: Temporarily fix user-event to 14.4.0 to avoid compatibility issues #​57 (@​yannbf)

Authors: 1

• Yann Braga (@​yannbf)

v0.2.1

Compare Source

🎉 This release contains work from a new contributor! 🎉

Thank you, Valentin Palkovic (@​valentinpalkovic), for all your work!

🐛 Bug Fix

• Temporarily fix user-event to 14.4.0 to avoid compatibility issues #​53 (@​yannbf)

Authors: 2

• Valentin Palkovic (@​valentinpalkovic)
• Yann Braga (@​yannbf)

testing-library/user-event (@​testing-library/user-event)

v14.5.2

Compare Source

Bug Fixes

• remove interop and deep DTL imports (6a3c896)

v14.5.1

Compare Source

Bug Fixes

• incorrect default import from @​testing-library/dom (#​1162) (d7483f0)

v14.5.0

Compare Source

Bug Fixes

• exports: add a named export for userEvent (4019cee), closes #​1146

Features

• types: Add additional type exports for UserEvent & Options (#​1112) (da00e8d)

vitejs/vite-plugin-react (@​vitejs/plugin-react)

v4.3.1

Compare Source

Fix support for React Compiler with React 18

The previous version made this assumption that the compiler was only usable with React 19, but it's possible to use it with React 18 and a custom runtimeModule: https://gist.github.com/poteto/37c076bf112a07ba39d0e5f0645fec43

When using a custom runtimeModule, the plugin will not try to pre-optimize react/compiler-runtime dependency.

Reminder: Vite expect code outside of node_modules to be ESM, so you will need to update the gist with import React from 'react'.

v4.3.0

Compare Source

Fix support for React compiler

Don't set retainLines: true when the React compiler is used. This creates whitespace issues and the compiler is modifying the JSX too much to get correct line numbers after that. If you want to use the React compiler and get back correct line numbers for tools like vite-plugin-react-click-to-component to work, you should update your config to something like:

export default defineConfig(({ command }) => {
  const babelPlugins = [['babel-plugin-react-compiler', {}]]
  if (command === 'serve') {
    babelPlugins.push(['@​babel/plugin-transform-react-jsx-development', {}])
  }

  return {
    plugins: [react({ babel: { plugins: babelPlugins } })],
  }
})

Support HMR for class components

This is a long overdue and should fix some issues people had with HMR when migrating from CRA.

v4.2.1

Compare Source

Remove generic parameter on Plugin to avoid type error with Rollup 4/Vite 5 and skipLibCheck: false.

I expect very few people to currently use this feature, but if you are extending the React plugin via api object, you can get back the typing of the hook by importing ViteReactPluginApi:

import type { Plugin } from 'vite'
import type { ViteReactPluginApi } from '@​vitejs/plugin-react'

export const somePlugin: Plugin = {
  name: 'some-plugin',
  api: {
    reactBabel: (babelConfig) => {
      babelConfig.plugins.push('some-babel-plugin')
    },
  } satisfies ViteReactPluginApi,
}

v4.2.0

Compare Source

Update peer dependency range to target Vite 5

There were no breaking change that impacted this plugin, so any combination of React plugins and Vite core version will work.

Align jsx runtime for optimized dependencies

This will only affect people using internal libraries that contains untranspiled JSX. This change aligns the optimizer with the source code and avoid issues when the published source don't have React in the scope.

Reminder: While being partially supported in Vite, publishing TS & JSX outside of internal libraries is highly discouraged.

v4.1.1

Compare Source

• Enable retainLines to get correct line numbers for jsxDev (fix #​235)

v4.1.0

Compare Source

• Add @types/babel__cores to dependencies (fix #​211)
• Improve build perf when not using Babel plugins by lazy loading @babel/core #​212
• Better invalidation message when an export is added & fix HMR for export of nullish values #​215
• Include non-dev jsx runtime in optimizeDeps & support HMR for JS files using the non dev runtime #​224
• The build output now contains a index.d.cts file so you don't get types errors when setting moduleResolution to node16 or nodenext in your tsconfig (we recommend using bundler which is more close to how Vite works)

JedWatson/classnames (classnames)

v2.5.1

Compare Source

• Remove workspaces field from package (#​350)

v2.5.0

Compare Source

• Restore ability to pass a TypeScript interface (#​341)
• Add exports field to package (#​342)

v2.4.0

Compare Source

• Use string concatenation to increase performance thanks Jon Koops (#​336)

v2.3.3

Compare Source

• Fix default export, thanks Remco Haszing (#​301)
• Fix types for read-only arrays, thanks Ben Thompson (#​307)
• Replace README examples with functional-style components, thanks JoeDGit (#​303)

taye/interact.js (interactjs)

v1.10.27

Compare Source

• fix(types): fix issues with skipLibCheck: false

v1.10.26

Compare Source

• fix: improve build; check output for ES2018 compatibility

v1.10.25

Compare Source

• fix: bundle to ES5 syntax

v1.10.24

Compare Source

• chore: generate api docs

v1.10.23

Compare Source

• fix: transform nullish coalescing; fix symbol-tree build

v1.10.22

Compare Source

• fix(actions/gesture): fix error when inertia is enabled for gestures #​995

v1.10.21

Compare Source

• fix(actions/drop): fix regression with drop event targets #​1016

v1.10.20

Compare Source

• fix(types): import plugins for module augmentations #​933

v1.10.19

Compare Source

• fix(core/scope): remove duplicate Interactable super.unset
• fix(utils/pointerExtend): skip all vendor-prefixed props. Close #​978

prettier/prettier (prettier)

v3.3.3

Compare Source

diff

Add parentheses for nullish coalescing in ternary (#​16391 by @​cdignam-segment)

This change adds clarity to operator precedence.

// Input
foo ? bar ?? foo : baz;
foo ?? bar ? a : b;
a ? b : foo ?? bar;

// Prettier 3.3.2
foo ? bar ?? foo : baz;
foo ?? bar ? a : b;
a ? b : foo ?? bar;

// Prettier 3.3.3
foo ? (bar ?? foo) : baz;
(foo ?? bar) ? a : b;
a ? b : (foo ?? bar);

Add parentheses for decorator expressions (#​16458 by @​y-schneider)

Prevent parentheses around member expressions or tagged template literals from being removed to follow the stricter parsing rules of TypeScript 5.5.

// Input
@​(foo`tagged template`)
class X {}

// Prettier 3.3.2
@​foo`tagged template`
class X {}

// Prettier 3.3.3
@​(foo`tagged template`)
class X {}

Support @let declaration syntax (#​16474 by @​sosukesuzuki)

Adds support for Angular v18 @let declaration syntax.

Please see the following code example. The @let declaration allows you to define local variables within the template:

@​let name = 'Frodo';

<h1>Dashboard for {{name}}</h1>
Hello, {{name}}

For more details, please refer to the excellent blog post by the Angular Team: Introducing @​let in Angular.

We also appreciate the Angular Team for kindly answering our questions to implement this feature.

v3.3.2

Compare Source

diff

Fix handlebars path expressions starts with @ (#​16358 by @​Princeyadav05)

{{! Input }}
<div>{{@&#8203;x.y.z}}</div>

{{! Prettier 3.3.1 }}
<div>{{@&#8203;x}}</div>

{{! Prettier 3.3.2 }}
<div>{{@&#8203;x.y.z}}</div>

v3.3.1

Compare Source

diff

Preserve empty lines in front matter (#​16347 by @​fisker)

<!-- Input -->
---
foo:
  - bar1

  - bar2

  - bar3
---
Markdown

<!-- Prettier 3.3.0 -->

---
foo:
  - bar1
  - bar2
  - bar3
---

Markdown

<!-- Prettier 3.3.1 -->
---
foo:
  - bar1

  - bar2

  - bar3
---

Markdown

Preserve explicit language in front matter (#​16348 by @​fisker)

<!-- Input -->
---yaml
title: Hello
slug: home
---

<!-- Prettier 3.3.0 -->
---
title: Hello
slug: home
---

<!-- Prettier 3.3.1 -->
---yaml
title: Hello
slug: home
---

Avoid line breaks in import attributes (#​16349 by @​fisker)

// Input
import something from "./some-very-very-very-very-very-very-very-very-long-path.json" with { type: "json" };

// Prettier 3.3.0
import something from "./some-very-very-very-very-very-very-very-very-long-path.json" with { type:
  "json" };

// Prettier 3.3.1
import something from "./some-very-very-very-very-very-very-very-very-long-path.json" with { type: "json" };

v3.3.0

Compare Source

diff

🔗 Release Notes

v3.2.5

Compare Source

diff

Support Angular inline styles as single template literal (#​15968 by @​sosukesuzuki)

Angular v17 supports single string inline styles.

// Input
@​Component({
  template: `<div>...</div>`,
  styles: `h1 { color: blue; }`,
})
export class AppComponent {}

// Prettier 3.2.4
@&#8203;Component({
  template: `<div>...</div>`,
  styles: `h1 { color: blue; }`,
})
export class AppComponent {}

// Prettier 3.2.5
@&#8203;Component({
  template: `<div>...</div>`,
  styles: `
    h1 {
      color: blue;
    }
  `,
})
export class AppComponent {}

Unexpected embedded formatting for Angular template (#​15969 by @​JounQin)

Computed template should not be considered as Angular component template

// Input
const template = "foobar";

@​Component({
  [template]: `<h1>{{       hello }}</h1>`,
})
export class AppComponent {}

// Prettier 3.2.4
const template = "foobar";

@&#8203;Component({
  [template]: `<h1>{{ hello }}</h1>`,
})
export class AppComponent {}

// Prettier 3.2.5
const template = "foobar";

@&#8203;Component({
  [template]: `<h1>{{       hello }}</h1>`,
})
export class AppComponent {}

Use "json" parser for tsconfig.json by default (#​16012 by @​sosukesuzuki)

In v2.3.0, we introduced "jsonc" parser which adds trialing comma by default.

When adding a new parser we also define how it will be used based on the linguist-languages data.

tsconfig.json is a special file used by TypeScript, it uses .json file extension, but it actually uses the JSON with Comments syntax. However, we found that there are many third-party tools not recognize it correctly because of the confusing .json file extension.

We decide to treat it as a JSON file for now to avoid the extra configuration step.

To keep using the "jsonc" parser for your tsconfig.json files, add the following to your .pretterrc file

{
  "overrides": [
    {
      "files": ["tsconfig.json", "jsconfig.json"],
      "options": {
        "parser": "jsonc"
      }
    }
  ]
}

v3.2.4

Compare Source

diff

Fix incorrect parser inference (#​15947 by @​fisker)

Files like .eslintrc.json were incorrectly formatted as JSONC files.

// Input
prettier --file-info .eslintrc.json
{ "ignored": false, "inferredParser": "jsonc" }

// Prettier 3.2.4
prettier --file-info .eslintrc.json
{ "ignored": false, "inferredParser": "json" }

v3.2.3

Compare Source

diff

Throw errors for invalid code (#​15881 by @​fisker, @​Josh-Cena, @​auvred)

// Input
1++;

// Prettier 3.2.2
1++;

// Prettier 3.2.3
SyntaxError: Invalid left-hand side expression in unary operation (1:1)
> 1 | 1++;
    | ^

// Input
try {} catch (error = 1){}

// Prettier 3.2.2
try {
} catch (error) {}

// Prettier 3.2.3
SyntaxError: Catch clause variable cannot have an initializer. (1:23)
> 1 | try {} catch (error = 1){}
    |                       ^

Fix parser inference (#​15927 by @​fisker)

// Prettier 3.2.2
prettier --file-info tsconfig.json
{ "ignored": false, "inferredParser": "json" }

// Prettier 3.2.3
prettier --file-info tsconfig.json
{ "ignored": false, "inferredParser": "jsonc" }

v3.2.2

Compare Source

diff

Fix crash when parsing template literal CSS in a JSX style tag using a spread attribute (#​15896 by @​eelco)

For example this code would crash before:

<style {...spread}>{`.{}`}</style>

Fix formatting error on optional call expression and member chain (#​15920 by @​sosukesuzuki)

// Input
a(() => {}, c?.d());

// Prettier 3.2.1
TypeError: Cannot read properties of undefined (reading 'type')

// Prettier 3.2.2
a(() => {}, c?.d());

v3.2.1

Compare Source

diff

Fix formatting error on member chain (#​15915 by @​sosukesuzuki)

// Input
test().test2().test2(thing?.something);

// Prettier 3.2.0
TypeError: Cannot read properties of undefined (reading 'type')

// Prettier 3.2.1
test().test2().test2(thing?.something);

v3.2.0

Compare Source

diff

🔗 Release Notes

v3.1.1

Compare Source

diff

Fix config file search (#​15363 by @​fisker)

Previously, we start search for config files from the filePath as a directory, if it happened to be a directory and contains config file, it will be used by mistake.

├─ .prettierrc
└─ test.js         (A directory)
  └─ .prettierrc

// Prettier 3.1.0
await prettier.resolveConfigFile(new URL("./test.js", import.meta.url));
// <CWD>/test.js/.prettierrc

// Prettier 3.1.1
await prettier.resolveConfigFile(new URL("./test.js", import.meta.url));
// <CWD>/.prettierrc

Skip explicitly passed symbolic links with --no-error-on-unmatched-pattern (#​15533 by @​sanmai-NL)

Since Prettier v3, we stopped following symbolic links, however in some use cases, the symbolic link patterns can't be filtered out, and there is no way to prevent Prettier from throwing errors.

In Prettier 3.1.1, you can use --no-error-on-unmatched-pattern to simply skip symbolic links.

Consistently use tabs in ternaries when useTabs is true (#​15662 by @​auvred)

// Input
aaaaaaaaaaaaaaa
	? bbbbbbbbbbbbbbbbbb
	: ccccccccccccccc
	  ? ddddddddddddddd
	  : eeeeeeeeeeeeeee
	    ? fffffffffffffff
	    : gggggggggggggggg;

// Prettier 3.1.0
aaaaaaaaaaaaaaa
	? bbbbbbbbbbbbbbbbbb
	: ccccccccccccccc
	  ? ddddddddddddddd
	  : eeeeeeeeeeeeeee
	    ? fffffffffffffff
	    : gggggggggggggggg;

// Prettier 3.1.1
aaaaaaaaaaaaaaa
	? bbbbbbbbbbbbbbbbbb
	: ccccccccccccccc
		? ddddddddddddddd
		: eeeeeeeeeeeeeee
			? fffffffffffffff
			: gggggggggggggggg;

Improve config file search (#​15663 by @​fisker)

The Prettier config file search performance has been improved by more effective cache strategy.

Fix unstable and ugly formatting for comments in destructuring patterns (#​15708 by @​sosukesuzuki)

// Input
const {
  foo,
  // bar
  // baz
}: Foo = expr;

// Prettier 3.1.0
const {
  foo1,
} // bar
// baz
: Foo = expr;

// Prettier 3.1.0 second output
const {
  foo1, // bar
} // baz
: Foo = expr;

// Prettier 3.1.1
const {
  foo1,
  // bar
  // baz
}: Foo = expr;

Support "Import Attributes" (#​15718 by @​fisker)

TypeScript 5.3 supports the latest updates to the import attributes proposal.

import something from "./something.json" with { type: "json" };

Fix false claim in docs that cursorOffset is incompatible with rangeStart/rangeEnd (#​15750 by @​ExplodingCabbage)

The cursorOffset option has in fact been compatible with rangeStart/rangeEnd for over 5 years, thanks to work by @​ds300. However, Prettier's documentation (including the CLI --help text) continued to claim otherwise, falsely. The documentation is now fixed.

Keep curly braces and from keyword in empty import statements (#​15756 by @​fisker)

// Input
import { } from 'foo';
import { /* comment */ } from 'bar';

// Prettier 3.1.0
import {} from "foo";
import /* comment */ "bar";

// Prettier 3.1.1
import {} from "foo";
import {} from /* comment */ "bar";

Keep empty import attributes and assertions (#​15757 by @​fisker)

// Input
import foo from "foo" with {};
import bar from "bar" assert {};

// Prettier 3.1.0
import foo from "foo";
import bar from "bar";

// Prettier 3.1.1
import foo from "foo" with {};
import bar from "bar" assert {};

v3.1.0

Compare Source

diff

🔗 Release Notes

v3.0.3

Compare Source

diff

Add preferUnplugged: true to package.json (#​15169 by @​fisker and @​so1ve)

Prettier v3 uses dynamic imports, user will need to unplug Prettier when Yarn's PnP mode is enabled, add preferUnplugged: true to package.json, so Yarn will install Prettier as unplug by default.

Support shared config that forbids require() (#​15233 by @​fisker)

If an external shared config package is used, and the package exports don't have require or default export.

In Prettier 3.0.2 Prettier fails when attempt to require() the package, and throws an error.

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in <packageName>/package.json

Allow argument of require() to break (#​15256 by @​fisker)

// Input
const plugin = require(
  global.STANDALONE
    ? path.join(__dirname, "../standalone.js")
    : path.join(__dirname, "..")
);

// Prettier 3.0.2
const plugin = require(global.STANDALONE
  ? path.join(__dirname, "../standalone.js")
  : path.join(__dirname, ".."));

// Prettier 3.0.3
const plugin = require(
  global.STANDALONE
    ? path.join(__dirname, "../standalone.js")
    : path.join(__dirname, "..")
);

Do not print trailing commas in arrow function type parameter lists in ts code blocks (#​15286 by @​sosukesuzuki)

<!-- Input -->
```ts
const foo = <T>() => {}
```

<!-- Prettier 3.0.2 -->
```ts
const foo = <T,>() => {}
```

<!-- Prettier 3.0.3 -->
```ts
const foo = <T>() => {}
```

Support TypeScript 5.2 using / await using declaration (#​15321 by @​sosukesuzuki)

Support for the upcoming Explicit Resource Management feature in ECMAScript. using / await using declaration

{
   using foo = new Foo();
   await using bar = new Bar();
}

v3.0.2

Compare Source

diff

Break after = of assignment if RHS is poorly breakable AwaitExpression or YieldExpression (#​15204 by @​seiyab)

// Input
const { section, rubric, authors, tags } = await utils.upsertCommonData(mainData);

// Prettier 3.0.1
const { section, rubric, authors, tags } = await utils.upsertCommonData(
  mainData,
);

// Prettier 3.0.2
const { section, rubric, authors, tags } =
  await utils.upsertCommonData(mainData);

Do not add trailing comma for grouped scss comments (#​15217 by @​auvred)

/* Input */
$foo: (
	'property': (),
	// comment 1
	// comment 2
)

/* Prettier 3.0.1 */
$foo: (
  "property": (),
  // comment 1
  // comment 2,
);

/* Prettier 3.0.2 */
$foo: (
  "property": (),
  // comment 1
  // comment 2
);

Print declare and export keywords for nested namespace (#​15249 by @​sosukesuzuki)

// Input
declare namespace abc1.def {}
export namespace abc2.def {}

// Prettier 3.0.1
namespace abc1.def {}
namespace abc2.def {}

// Prettier 3.0.2
declare namespace abc1.def {}
export namespace abc2.def {}

facebook/react (react)

v18.3.1

Compare Source

v18.3.0

Compare Source

facebook/react (react-dom)

v18.3.1

Compare Source

v18.3.0

Compare Source

sass/dart-sass (sass)

v1.79.3

Compare Source

• Update the $channel parameter in the suggested replacement for
  color.red(), color.green(), color.blue(), color.hue(),
  color.saturation(), color.lightness(), color.whiteness(), and
  color.blackness() to use a quoted string.

v1.79.2

Compare Source

• Add a $space parameter to the suggested replacement for color.red(),
  color.green(), color.blue(), color.hue(), color.saturation(),
  color.lightness(), color.whiteness(), and color.blackness().

• Update deprecation warnings for the legacy JS API to include a link to
  relevant documentation.

v1.79.1

Compare Source

• No user-visible changes.

v1.79.0

Compare Source

• Breaking change: Passing a number with unit % to the $alpha parameter
  of color.change(), color.adjust(), change-color(), and adjust-color()
  is now interpreted as a percentage, instead of ignoring the unit. For example,
  color.change(red, $alpha: 50%) now returns rgb(255 0 0 / 0.5).

• Potentially breaking compatibility fix: Sass no longer rounds RGB channels
  to the nearest integer. This means that, for example, rgb(0 0 1) != rgb(0 0 0.6). This matches the latest version of the CSS spec and browser behavior.

• Potentially breaking compatibility fix: Passing large positive or negative
  values to color.adjust() can now cause a color's channels to go outside that
  color's gamut. In most cases this will currently be clipped by the browser and
  end up showing the same color as before, but once browsers implement gamut
  mapping it may produce a different result.

• Add support for CSS Color Level 4 color spaces. Each color value now tracks
  its color space along with the values of each channel in that color space.
  There are two general principles to keep in mind when dealing with new color
  spaces:

  1. With the exception of legacy color spaces (rgb, hsl, and hwb), colors
     will always be emitted in the color space they were defined in unless
     they're explicitly converted.

  2. The color.to-space() function is the only way to convert a color to
     another color space. Some built-in functions may do operations in a
     different color space, but they'll always convert back to the original space
     afterwards.

• rgb colors can now have non-integer channels and channels outside the normal
  gamut of 0-255. These colors are always emitted using the rgb() syntax so
  that modern browsers that are being displayed on wide-gamut devices can
  display the most accurate color possible.

• Add support for all the new color syntax defined in Color Level 4, including:

  • oklab(), oklch(), lab(), and lch() functions;
  • a top-level hwb() function that matches the space-separated CSS syntax;
  • and a color() function that supports the srgb, srgb-linear,
    display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, and
    xyz-d65 color spaces.

• Add new functions for working with color spaces:

  • color.to-space($color, $space) converts $color to the given $space. In
    most cases this conversion is lossless—the color may end up out-of-gamut for
    the destination color space, but browsers will generally display it as best
    they can regardless. However, the hsl and hwb spaces can't represent
    out-of-gamut colors and so will be clamped.

  • color.channel($color, $channel, $space: null) returns the value of the
    given $channel in $color, after converting it to $space if necessary.
    It should be used instead of the old channel-specific functions such as
    color.red() and color.hue().

  • color.same($color1, $color2) returns whether two colors represent the same
    color even across color spaces. It differs from $color1 == $color2 because
    == never consider colors in different (non-legacy) spaces as equal.

  • color.is-in-gamut($color, $space: null) returns whether $color is
    in-gamut for its color space (or $space if it's passed).

  • color.to-gamut($color, $space: null) returns $color constrained to its
    space's gamut (or to $space's gamut, if passed). This is generally not
    recommended since even older browsers will display out-of-gamut colors as
    best they can, but it may be necessary in some cases.

  • color.space($color): Returns the name of $color's color space.

  • color.is-legacy($color): Returns whether $color is in a legacy color
    space (rgb, hsl, or hwb).

  • color.is-powerless($color, $channel, $space: null): Returns whether the
    given $channel of $color is powerless in $space (or its own color
    space). A channel is "powerless" if its value doesn't affect the way the
    color is displayed, such as hue for a color with 0 chroma.

  • color.is-missing($color, $channel): Returns whether $channel's value is
    missing in $color. Missing channels can be explicitly specified using the
    special value none and can appear automatically when color.to-space()
    returns a color with a powerless channel. Missing channels are usually
    treated as 0, except when interpolating between two colors and in
    color.mix() where they're treated as the same value as the other color.

• Update existing functions to support color spaces:

  • hsl() and color.hwb() no longer forbid out-of-bounds values. Instead,
    they follow the CSS spec by clamping them to within the allowed range.

  • color.change(), color.adjust(), and color.scale() now support all
    channels of all color spaces. However, if you want to modify a channel
    that's not in $color's own color space, you have to explicitly specify the
    space with the $space parameter. (For backwards-compatibility, this
    doesn't apply to legacy channels of legacy colors—for example, you can still
    adjust an rgb color's saturation without passing $space: hsl).

  • color.mix() and color.invert() now support the standard CSS algorithm
    for interpolating between two colors (the same one that's used for gradients
    and animations). To use this, pass the color space to use for interpolation
    to the $method parameter. For polar color spaces like hsl and oklch,
    this parameter also allows you to specify how hue interpolation is handled.

  • color.complement() now supports a $space parameter that indicates which
    color space should be used to take the complement.

  • color.grayscale() now operates in the oklch space for non-legacy colors.

  • color.ie-hex-str() now automatically converts its color to the rgb space
    and gamut-maps it so that it can continue to take colors from any color
    space.

• The following functions are now deprecated, and uses should be replaced with
  the new color-space-aware functions defined above:

  • The color.red(), color.green(), color.blue(), color.hue(),
    color.saturation(), color.lightness(), color.whiteness(), and
    color.blackness() functions, as well as their global counterparts, should
    be replaced with calls to color.channel().

  • The global adjust-hue(), saturate(), desaturate(), lighten(),
    darken(), transaprentize(), fade-out(), opacify(), and fade-in()
    functions should be replaced by color.adjust() or color.scale().

• Add a global-builtin future deprecation, which can be opted-into with the
  --future-deprecation flag or the futureDeprecations option in the JS or
  Dart API. This emits warnings when any global built-in functions that are
  now available in sass: modules are called. It will become active by default
  in an upcoming release alongside the @import deprecation.

Dart API

• Added a ColorSpace class which represents the various color spaces defined
  in the CSS spec.

• Added SassColor.space which returns a color's color space.

• Added SassColor.channels and .channelsOrNull which returns a list
  of channel values, with missing channels converted to 0 or exposed as null,
  respectively.

• Added SassColor.isLegacy, .isInGamut, .channel(), .isChannelMissing(),
  .isChannelPowerless(), .toSpace(), .toGamut(), .changeChannels(), and
  .interpolate() which do the same thing as the Sass functions of the
  corresponding names.

• SassColor.rgb() now allows out-of-bounds and non-integer arguments.

• SassColor.hsl() and .hwb() now allow out-of-bounds arguments.

• Added SassColor.hwb(), .srgb(), .srgbLinear(), .displayP3(),
  .a98Rgb(), .prophotoRgb(), .rec2020(), .xyzD50(), .xyzD65(),
  .lab(), .lch(), .oklab(), .oklch(), and .forSpace() constructors.

• Deprecated SassColor.red, .green, .blue, .hue, .saturation,
  .lightness, .whiteness, and .blackness in favor of
  SassColor.channel().

• Deprecated SassColor.changeRgb(), .changeHsl(), and .changeHwb() in
  favor of SassColor.changeChannels().

• Added SassNumber.convertValueToUnit() as a shorthand for
  SassNumber.convertValue() with a single numerator.

• Added InterpolationMethod and HueInterpolationMethod which collectively
  represent the method to use to interpolate two colors.

JS API

• While the legacy API has been deprecated since we released the modern API, we
  now emit warnings when the legacy API is used to make sure users are aware
  that it will be removed in Dart Sass 2.0.0. In the meantime, you can silence
  these warnings by passing legacy-js-api in silenceDeprecations when using
  the legacy API.

• Modify SassColor to accept a new space option, with support for all the
  new color spaces defined in Color Level 4.

• Add SassColor.space which returns a color's color space.

• Add SassColor.channels and .channelsOrNull which returns a list of channel
  values, with missing channels converted to 0 or exposed as null, respectively.

• Add SassColor.isLegacy, .isInGamut(), .channel(), .isChannelMissing(),
  .isChannelPowerless(), .toSpace(), .toGamut(), .change(), and
  .interpolate() which do the same thing as the Sass functions of the
  corresponding names.

• Deprecate SassColor.red, .green, .blue, .hue, .saturation,
  .lightness, .whiteness, and .blackness in favor of
  SassColor.channel().

Embedded Sass

• Add Color SassScri

---

Configuration

📅 Schedule: Branch creation - "before 4am on the first day of the month" in timezone Europe/Berlin, Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.