Update all dependencies

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence	Type	Update
Flask-OpenID	==1.3.0 -> ==1.3.1						patch
autoprefixer	10.4.1 -> 10.4.20					dependencies	patch
django-openid-auth	==0.16 -> ==0.17						minor
prettier (source)	2.5.1 -> 2.8.8					dependencies	minor
python	3.9.13 -> 3.13.2						minor
react (source)	18.2.0 -> 18.3.1					dependencies	minor
react-dom (source)	18.2.0 -> 18.3.1					dependencies	minor
sass	1.46.0 -> 1.84.0					dependencies	minor
stylelint-config-prettier	9.0.3 -> 9.0.5					dependencies	patch

---

Release Notes

mitsuhiko/flask-openid (Flask-OpenID)

v1.3.1

Import quote from urllib.

Note that this library is for a very old and outdated version of OpenID.
Almost no-one uses this Open ID protocol, the OpenID Connect protocol is
the current standard.

postcss/autoprefixer (autoprefixer)

v10.4.20

Compare Source

• Fixed fit-content prefix for Firefox.

v10.4.19

Compare Source

• Removed end value has mixed support, consider using flex-end warning
  since end/start now have good support.

v10.4.18

Compare Source

• Fixed removing -webkit-box-orient on -webkit-line-clamp (@​Goodwine).

v10.4.17

Compare Source

• Fixed user-select: contain prefixes.

v10.4.16

Compare Source

• Improved performance (by Romain Menke).
• Fixed docs (by Christian Oliff).

v10.4.15

Compare Source

• Fixed ::backdrop prefixes (by 一丝).
• Fixed docs (by Christian Oliff).

v10.4.14

Compare Source

• Improved startup time and reduced JS bundle size (by Kārlis Gaņģis).

v10.4.13

Compare Source

• Fixed missed prefixes on vendor prefixes in name of CSS Custom Property.

v10.4.12

Compare Source

• Fixed support of unit-less zero angle in backgrounds (by 一丝).

v10.4.11

Compare Source

• Fixed text-decoration prefixes by moving to MDN data (by Romain Menke).

v10.4.10

Compare Source

• Fixed unicode-bidi prefixes by moving to MDN data.

v10.4.9

Compare Source

• Fixed css-unicode-bidi issue from latest Can I Use.

v10.4.8

Compare Source

• Do not print color-adjust warning if print-color-adjust also is in rule.

v10.4.7

Compare Source

• Fixed print-color-adjust support in Firefox.

v10.4.6

Compare Source

• Fixed print-color-adjust support.

v10.4.5

Compare Source

• Fixed NaN in grid (by @​SukkaW).

v10.4.4

Compare Source

• Fixed package.funding to have same value between all PostCSS packages.

v10.4.3

Compare Source

• Fixed package.funding (by Álvaro Mondéjar).

v10.4.2

Compare Source

• Fixed missed -webkit- prefix for width: stretch.

prettier/prettier (prettier)

v2.8.8

Compare Source

This version is a republished version of v2.8.7.
A bad version was accidentally published and it can't be unpublished, apologies for the churn.

v2.8.7

Compare Source

diff

Allow multiple decorators on same getter/setter (#​14584 by @​fisker)

// Input
class A {
  @​decorator()
  get foo () {}
  
  @​decorator()
  set foo (value) {}
}

// Prettier 2.8.6
SyntaxError: Decorators cannot be applied to multiple get/set accessors of the same name. (5:3)
  3 |   get foo () {}
  4 |   
> 5 |   @​decorator()
    |   ^^^^^^^^^^^^
  6 |   set foo (value) {}
  7 | }

// Prettier 2.8.7
class A {
  @​decorator()
  get foo() {}

  @​decorator()
  set foo(value) {}
}

v2.8.6

Compare Source

diff

Allow decorators on private members and class expressions (#​14548 by @​fisker)

// Input
class A {
  @​decorator()
  #privateMethod () {}
}

// Prettier 2.8.5
SyntaxError: Decorators are not valid here. (2:3)
  1 | class A {
> 2 |   @​decorator()
    |   ^^^^^^^^^^^^
  3 |   #privateMethod () {}
  4 | }

// Prettier 2.8.6
class A {
  @​decorator()
  #privateMethod() {}
}

v2.8.5

Compare Source

diff

Support TypeScript 5.0 (#​14391 by @​fisker, #​13819 by @​fisker, @​sosukesuzuki)

TypeScript 5.0 introduces two new syntactic features:

• const modifiers for type parameters
• export type * declarations

Add missing parentheses for decorator (#​14393 by @​fisker)

// Input
class Person {
  @​(myDecoratorArray[0])
  greet() {}
}

// Prettier 2.8.4
class Person {
  @​myDecoratorArray[0]
  greet() {}
}

// Prettier 2.8.5
class Person {
  @​(myDecoratorArray[0])
  greet() {}
}

Add parentheses for TypeofTypeAnnotation to improve readability (#​14458 by @​fisker)

// Input
type A = (typeof node.children)[];

// Prettier 2.8.4
type A = typeof node.children[];

// Prettier 2.8.5
type A = (typeof node.children)[];

Support max_line_length=off when parsing .editorconfig (#​14516 by @​josephfrazier)

If an .editorconfig file is in your project and it sets max_line_length=off for the file you're formatting,
it will be interpreted as a printWidth of Infinity rather than being ignored
(which previously resulted in the default printWidth of 80 being applied, if not overridden by Prettier-specific configuration).

<!-- Input -->
<div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}/>

<!-- Prettier 2.8.4 -->
<div
  className="HelloWorld"
  title={`You are visitor number ${num}`}
  onMouseOver={onMouseOver}
/>;

<!-- Prettier 2.8.5 -->
<div className="HelloWorld" title={`You are visitor number ${num}`} onMouseOver={onMouseOver} />;

v2.8.4

Compare Source

diff

Fix leading comments in mapped types with readonly (#​13427 by @​thorn0, @​sosukesuzuki)

// Input
type Type = {
  // comment
  readonly [key in Foo];
};

// Prettier 2.8.3
type Type = {
  readonly // comment
  [key in Foo];
};

// Prettier 2.8.4
type Type = {
  // comment
  readonly [key in Foo];
};

Group params in opening block statements (#​14067 by @​jamescdavis)

This is a follow-up to #​13930 to establish wrapping consistency between opening block statements and else blocks by
grouping params in opening blocks. This causes params to break to a new line together and not be split across lines
unless the length of params exceeds the print width. This also updates the else block wrapping to behave exactly the
same as opening blocks.

{{! Input }}
{{#block param param param param param param param param param param as |blockParam|}}
  Hello
{{else block param param param param param param param param param param as |blockParam|}}
  There
{{/block}}

{{! Prettier 2.8.3 }}
{{#block
  param
  param
  param
  param
  param
  param
  param
  param
  param
  param
  as |blockParam|
}}
  Hello
{{else block param
param
param
param
param
param
param
param
param
param}}
  There
{{/block}}

{{! Prettier 2.8.4 }}
{{#block
  param param param param param param param param param param
  as |blockParam|
}}
  Hello
{{else block
  param param param param param param param param param param
  as |blockParam|
}}
  There
{{/block}}

Ignore files in .sl/ (#​14206 by @​bolinfest)

In Sapling SCM, .sl/ is the folder where it stores its state, analogous to .git/ in Git. It should be ignored in Prettier like the other SCM folders.

Recognize @satisfies in Closure-style type casts (#​14262 by @​fisker)

// Input
const a = /** @&#8203;satisfies {Record<string, string>} */ ({hello: 1337});
const b = /** @&#8203;type {Record<string, string>} */ ({hello: 1337});

// Prettier 2.8.3
const a = /** @&#8203;satisfies {Record<string, string>} */ { hello: 1337 };
const b = /** @&#8203;type {Record<string, string>} */ ({ hello: 1337 });

// Prettier 2.8.4
const a = /** @&#8203;satisfies {Record<string, string>} */ ({hello: 1337});
const b = /** @&#8203;type {Record<string, string>} */ ({hello: 1337});

Fix parens in inferred function return types with extends (#​14279 by @​fisker)

// Input
type Foo<T> = T extends ((a) => a is infer R extends string) ? R : never;

// Prettier 2.8.3 (First format)
type Foo<T> = T extends (a) => a is infer R extends string ? R : never;

// Prettier 2.8.3 (Second format)
SyntaxError: '?' expected. 

// Prettier 2.8.4
type Foo<T> = T extends ((a) => a is infer R extends string) ? R : never;

v2.8.3

Compare Source

diff

Allow self-closing tags on custom elements (#​14170 by @​fisker)

See Angular v15.1.0 release note for details.

// Input
<app-test/>

// Prettier 2.8.2
SyntaxError: Only void and foreign elements can be self closed "app-test" (1:1)
> 1 | <app-test/>
    | ^^^^^^^^^
  2 |

// Prettier 2.8.3
<app-test />

v2.8.2

Compare Source

diff

Don't lowercase link references (#​13155 by @​DerekNonGeneric & @​fisker)

<!-- Input -->
We now don't strictly follow the release notes format suggested by [Keep a Changelog].

[Keep a Changelog]: https://example.com/

<!-- Prettier 2.8.1 -->
We now don't strictly follow the release notes format suggested by [Keep a Changelog].

[keep a changelog]: https://example.com/
<!--
^^^^^^^^^^^^^^^^^^ lowercased
-->

<!-- Prettier 2.8.2 -->
<Same as input>

Preserve self-closing tags (#​13691 by @​dcyriller)

{{! Input }}
<div />
<div></div>
<custom-component />
<custom-component></custom-component>
<i />
<i></i>
<Component />
<Component></Component>

{{! Prettier 2.8.1 }}
<div></div>
<div></div>
<custom-component></custom-component>
<custom-component></custom-component>
<i></i>
<i></i>
<Component />
<Component />

{{! Prettier 2.8.2 }}
<div />
<div></div>
<custom-component />
<custom-component></custom-component>
<i />
<i></i>
<Component />
<Component />

Allow custom "else if"-like blocks with block params (#​13930 by @​jamescdavis)

#​13507 added support for custom block keywords used with else, but failed to allow block params. This updates printer-glimmer to allow block params with custom "else if"-like blocks.

{{! Input }}
{{#when isAtWork as |work|}}
  Ship that
  {{work}}!
{{else when isReading as |book|}}
  You can finish
  {{book}}
  eventually...
{{else}}
  Go to bed!
{{/when}}

{{! Prettier 2.8.1 }}
{{#when isAtWork as |work|}}
  Ship that
  {{work}}!
{{else when isReading}}
  You can finish
  {{book}}
  eventually...
{{else}}
  Go to bed!
{{/when}}

{{! Prettier 2.8.2 }}
{{#when isAtWork as |work|}}
  Ship that
  {{work}}!
{{else when isReading as |book|}}
  You can finish
  {{book}}
  eventually...
{{else}}
  Go to bed!
{{/when}}

Preserve empty lines between nested SCSS maps (#​13931 by @​jneander)

/* Input */
$map: (
  'one': (
     'key': 'value',
  ),

  'two': (
     'key': 'value',
  ),
)

/* Prettier 2.8.1 */
$map: (
  'one': (
     'key': 'value',
  ),
  'two': (
     'key': 'value',
  ),
)

/* Prettier 2.8.2 */
$map: (
  'one': (
     'key': 'value',
  ),

  'two': (
     'key': 'value',
  ),
)

Fix missing parentheses when an expression statement starts with let[ (#​14000, #​14044 by @​fisker, @​thorn0)

// Input
(let[0] = 2);

// Prettier 2.8.1
let[0] = 2;

// Prettier 2.8.1 (second format)
SyntaxError: Unexpected token (1:5)
> 1 | let[0] = 2;
    |     ^
  2 |

// Prettier 2.8.2
(let)[0] = 2;

Fix semicolon duplicated at the end of LESS file (#​14007 by @​mvorisek)

// Input
@​variable: {
  field: something;
};

// Prettier 2.8.1
@​variable: {
  field: something;
}; ;

// Prettier 2.8.2
@​variable: {
  field: something;
};

Fix no space after unary minus when followed by opening parenthesis in LESS (#​14008 by @​mvorisek)

// Input
.unary_minus_single {
  margin: -(@​a);
}

.unary_minus_multi {
  margin: 0 -(@​a);
}

.binary_minus {
  margin: 0 - (@​a);
}

// Prettier 2.8.1
.unary_minus_single {
  margin: - (@​a);
}

.unary_minus_multi {
  margin: 0 - (@​a);
}

.binary_minus {
  margin: 0 - (@​a);
}

// Prettier 2.8.2
.unary_minus_single {
  margin: -(@​a);
}

.unary_minus_multi {
  margin: 0 -(@​a);
}

.binary_minus {
  margin: 0 - (@​a);
}

Do not change case of property name if inside a variable declaration in LESS (#​14034 by @​mvorisek)

// Input
@​var: {
  preserveCase: 0;
};

// Prettier 2.8.1
@​var: {
  preservecase: 0;
};

// Prettier 2.8.2
@​var: {
  preserveCase: 0;
};

Fix formatting for auto-accessors with comments (#​14038 by @​fisker)

// Input
class A {
  @​dec()
  // comment
  accessor b;
}

// Prettier 2.8.1
class A {
  @​dec()
  accessor // comment
  b;
}

// Prettier 2.8.1 (second format)
class A {
  @​dec()
  accessor; // comment
  b;
}

// Prettier 2.8.2
class A {
  @​dec()
  // comment
  accessor b;
}

Add parentheses for TSTypeQuery to improve readability (#​14042 by @​onishi-kohei)

// Input
a as (typeof node.children)[number]
a as (typeof node.children)[]
a as ((typeof node.children)[number])[]

// Prettier 2.8.1
a as typeof node.children[number];
a as typeof node.children[];
a as typeof node.children[number][];

// Prettier 2.8.2
a as (typeof node.children)[number];
a as (typeof node.children)[];
a as (typeof node.children)[number][];

Fix displacing of comments in default switch case (#​14047 by @​thorn0)

It was a regression in Prettier 2.6.0.

// Input
switch (state) {
  default:
    result = state; // no change
    break;
}

// Prettier 2.8.1
switch (state) {
  default: // no change
    result = state;
    break;
}

// Prettier 2.8.2
switch (state) {
  default:
    result = state; // no change
    break;
}

Support type annotations on auto accessors via babel-ts (#​14049 by @​sosukesuzuki)

The bug that @babel/parser cannot parse auto accessors with type annotations has been fixed. So we now support it via babel-ts parser.

class Foo {
  accessor prop: number;
}

Fix formatting of empty type parameters (#​14073 by @​fisker)

// Input
const foo: bar</* comment */> = () => baz;

// Prettier 2.8.1
Error: Comment "comment" was not printed. Please report this error!

// Prettier 2.8.2
const foo: bar</* comment */> = () => baz;

Add parentheses to head of ExpressionStatement instead of the whole statement (#​14077 by @​fisker)

// Input
({}).toString.call(foo) === "[object Array]"
  ? foo.forEach(iterateArray)
  : iterateObject(foo);

// Prettier 2.8.1
({}.toString.call(foo) === "[object Array]"
  ? foo.forEach(iterateArray)
  : iterateObject(foo));

// Prettier 2.8.2
({}).toString.call(foo.forEach) === "[object Array]"
  ? foo.forEach(iterateArray)
  : iterateObject(foo);

Fix comments after directive (#​14081 by @​fisker)

// Input
"use strict" /* comment */;

// Prettier 2.8.1 (with other js parsers except `babel`)
Error: Comment "comment" was not printed. Please report this error!

// Prettier 2.8.2
<Same as input>

Fix formatting for comments inside JSX attribute (#​14082 by @​fisker)

// Input
function MyFunctionComponent() {
  <button label=/*old*/"new">button</button>
}

// Prettier 2.8.1
Error: Comment "old" was not printed. Please report this error!

// Prettier 2.8.2
function MyFunctionComponent() {
  <button label=/*old*/ "new">button</button>;
}

Quote numeric keys for json-stringify parser (#​14083 by @​fisker)

// Input
{0: 'value'}

// Prettier 2.8.1
{
  0: "value"
}

// Prettier 2.8.2
{
  "0": "value"
}

Fix removing commas from function arguments in maps (#​14089 by @​sosukesuzuki)

/* Input */
$foo: map-fn(
  (
    "#{prop}": inner-fn($first, $second),
  )
);

/* Prettier 2.8.1 */
$foo: map-fn(("#{prop}": inner-fn($first $second)));

/* Prettier 2.8.2 */
$foo: map-fn(
  (
    "#{prop}": inner-fn($first, $second),
  )
);

Do not insert space in LESS property access (#​14103 by @​fisker)

// Input
a {
  color: @​colors[@​white];
}

// Prettier 2.8.1
a {
  color: @​colors[ @​white];
}

// Prettier 2.8.2
<Same as input>

v2.8.1

Compare Source

diff

Fix SCSS map in arguments (#​9184 by @​agamkrbit)

// Input
$display-breakpoints: map-deep-merge(
  (
    "print-only": "only print",
    "screen-only": "only screen",
    "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm")-1})",
  ),
  $display-breakpoints
);

// Prettier 2.8.0
$display-breakpoints: map-deep-merge(
  (
    "print-only": "only print",
    "screen-only": "only screen",
    "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, " sm
      ")-1})",
  ),
  $display-breakpoints
);

// Prettier 2.8.1
$display-breakpoints: map-deep-merge(
  (
    "print-only": "only print",
    "screen-only": "only screen",
    "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm")-1})",
  ),
  $display-breakpoints
);

Support auto accessors syntax (#​13919 by @​sosukesuzuki)

Support for Auto Accessors Syntax landed in TypeScript 4.9.

(Doesn't work well with babel-ts parser)

class Foo {
  accessor foo: number = 3;
}

v2.8.0

Compare Source

diff

🔗 Release Notes

v2.7.1

Compare Source

diff

Keep useful empty lines in description (#​13013 by @​chimurai)

v2.7.0

Compare Source

"""
First line
Second Line
"""
type Person {
name: String
}

v2.6.2

Compare Source

diff

Fix LESS/SCSS format error (#​12536 by @​fisker)

// Input
.background-gradient(@​cut) {
    background: linear-gradient(
        to right,
        @​white 0%,
        @​white (@​cut - 0.01%),
        @​portal-background @​cut,
        @​portal-background 100%
    );
}

// Prettier 2.6.1
TypeError: Cannot read properties of undefined (reading 'endOffset')

// Prettier 2.6.2
.background-gradient(@​cut) {
  background: linear-gradient(
    to right,
    @​white 0%,
    @​white (@​cut - 0.01%),
    @​portal-background @​cut,
    @​portal-background 100%
  );
}

Update meriyah to fix several bugs (#​12567 by @​fisker, fixes in meriyah by @​3cp)

Fixes bugs when parsing following valid code:

foo(await bar());

const regex = /.*/ms;

const element = <p>{/w/.test(s)}</p>;

class A extends B {
  #privateMethod() {
    super.method();
  }
}

v2.6.1

Compare Source

diff

Ignore loglevel when printing information (#​12477 by @​fisker)

v2.6.0

Compare Source

prettier --loglevel silent --find-config-path index.js

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.84.0

Compare Source

• Allow newlines in whitespace in the indented syntax.

• Potentially breaking bug fix: Selectors with unmatched brackets now always
  produce a parser error. Previously, some edge cases like [foo#{"]:is(bar"}) {a: b} would compile without error, but this was an unintentional bug.

• Fix a bug in which various Color Level 4 functions weren't allowed in plain
  CSS.

• Fix the error message for @extend without a selector and possibly other
  parsing edge-cases in contexts that allow interpolation.

Embedded Host

• Fixed the implementation of the SassBoolean type to adhere to the spec,
  now using a class instead of an interface.

v1.83.4

Compare Source

• No user-visible changes.

v1.83.3

Compare Source

• No user-visible changes.

v1.83.2

Compare Source

• Properly display deprecation IDs for the JS Sass API.

• Don't display deprecation IDs for user-defined deprecations.

v1.83.1

Compare Source

• Fix a bug where --quiet-deps would get deactivated for @content blocks,
  even when those blocks were entirely contained within dependencies.

• Include deprecation IDs in deprecation warnings to make it easier to determine
  what to pass to --silence-deprecation or --fatal-deprecation.

v1.83.0

Compare Source

• Allow trailing commas in all argument and parameter lists.

v1.82.0

Compare Source

Command-Line Interface

• Improve --watch mode reliability when making multiple changes at once, such
  as checking out a different Git branch.

• Parse the calc-size() function as a calculation now that it's supported in
  some browsers.

Dart API

• Add a SassCalculation.calcSize() function.

v1.81.1

Compare Source

• No user-visible changes.

v1.81.0

Compare Source

• Fix a few cases where deprecation warnings weren't being emitted for global
  built-in functions whose names overlap with CSS calculations.

• Add support for the CSS round() calculation with a single argument, as long
  as that argument might be a unitless number.

v1.80.7

Compare Source

Embedded Host

• Don't treat 0 as undefined for the green and blue channels in the
  LegacyColor constructor.

v1.80.6

Compare Source

Command-Line Interface

• Make @parcel/watcher an optional dependency so this can still be installed
  on operating systems where it's unavailable.

v1.80.5

Compare Source

Embedded Host

• Don't produce phantom @import deprecations when using an importer with the
  legacy API.

v1.80.4

Compare Source

• No user-visible changes.

v1.80.3

Compare Source

• Fix a bug where @import url("...") would crash in plain CSS files.

• Improve consistency of how warnings are emitted by different parts of the
  compiler. This should result in minimal user-visible changes, but different
  types of warnings should now respond more reliably to flags like --quiet,
  --verbose, and --silence-deprecation.

v1.80.2

Compare Source

• Fix a bug where deprecation warnings were incorrectly emitted for the
  plain-CSS invert() function.

v1.80.1

Compare Source

• Fix a bug where repeated deprecation warnings were not automatically limited.

v1.80.0

Compare Source

• @import is now officially deprecated, as are global built-in functions that
  are available within built-in modules. See the Sass blog post for more
  details on the deprecation process.

Embedded Host

• Fix an error that would sometimes occur when deprecation warnings were
  emitted when using a custom importer with the legacy API.

v1.79.6

Compare Source

• Fix a bug where Sass would add an extra */ after loud comments with
  whitespace after an explicit */ in the indented syntax.

• Potentially breaking bug fix: Adding text after an explicit */ in the
  indented syntax is now an error, rather than silently generating invalid CSS.

Embedded Host

• Properly export the SassBoolean type.

v1.79.5

Compare Source

• Changes to how selector.unify() and @extend combine selectors:

  • The relative order of pseudo-classes (like :hover) and pseudo-elements
    (like ::before) within each original selector is now preserved when
    they're combined.

  • Pseudo selectors are now consistently placed at the end of the combined
    selector, regardless of which selector they came from. Previously, this
    reordering only applied to pseudo-selectors in the second selector.

• Tweak the color transformation matrices for OKLab and OKLCH to match the
  newer, more accurate values in the CSS spec.

• Fix a slight inaccuracy case when converting to srgb-linear and
  display-p3.

• Potentially breaking bug fix: math.unit() now wraps multiple denominator
  units in parentheses. For example, px/(em*em) instead of px/em*em.

Command-Line Interface

• Use @parcel/watcher to watch the filesystem when running from JavaScript and
  not using --poll. This should mitigate more frequent failures users have
  been seeing since version 4.0.0 of Chokidar, our previous watching tool, was
  released.

JS API

• Fix SassColor.interpolate() to allow an undefined options parameter, as
  the types indicate.

Embedded Sass

• Properly pass missing color channel values to and from custom functions.

v1.79.4

Compare Source

JS API

• Fix a bug where passing green or blue to color.change() for legacy
  colors would fail.

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 SassScript value, with support for all the new color spaces
  defined in Color Level 4.

• Remove RgbColor, HslColor and HwbColor SassScript values.

v1.78.0

Compare Source

• The meta.feature-exists function is now deprecated. This deprecation is
  named feature-exists.

• Fix a crash when using @at-root without any queries or children in the
  indented syntax.

JS API

• Backport the deprecation options (`fatalDeprecations

---

Configuration

📅 Schedule: Branch creation - "on the first day of january" (UTC), 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.