Skip to content

Commit bae493a

Browse files
nex3nazarepiedady
authored andcommitted
Document deprecating passing null as alpha in the JS/Dart APIs (sass#790)
See sass/sass#2831
1 parent 7c6c20a commit bae493a

File tree

2 files changed

+61
-0
lines changed

2 files changed

+61
-0
lines changed

source/documentation/breaking-changes/index.md

+4
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ time-sensitive, so they may be released with new minor version numbers instead.
2222

2323
These breaking changes are coming soon or have recently been released:
2424

25+
* [Passing `null` as an alpha channel to `new SassColor()` is changing
26+
behavior](/documentation/breaking-changes/null-alpha) beginning in Dart
27+
Sass 1.64.3.
28+
2529
* [Loading Sass as a default export in JS is no longer
2630
allowed](/documentation/breaking-changes/default-export) beginning in Dart
2731
Sass 1.63.0.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: "Breaking Change: Null Alpha Channel"
3+
introduction: |
4+
Prior to Dart Sass 1.64.3, in the JS and Dart APIs, if `null` was passed to
5+
the `SassColor` constructor it would be treated as 1. This is now deprecated.
6+
Users should explicitly pass 1 or `undefined` instead.
7+
---
8+
9+
Sass is working on adding support for the [CSS Color Module Level 4]. One of the
10+
changes in this module is the idea of ["missing components"]: if a color
11+
component like `alpha` is missing, it's mostly treated as 0, but if it's
12+
interpolated with another color (such as in a gradient or an animation) it will
13+
automatically take on the other color's value.
14+
15+
[CSS Color Module Level 4]: https://www.w3.org/TR/css-color-4/
16+
["missing components"]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#missing_color_components
17+
18+
We need a way for users of the JS and Dart APIs to access and set missing
19+
channels, and `null` is the most natural way to do that. In most cases, this
20+
isn't an issue; callers who intend to create opaque colors usually just leave
21+
out the `alpha` parameter anyway (or pass `undefined` in JS). But if callers are
22+
explicitly passing `null`, that will eventually be treated as a transparent
23+
color instead of an opaque one.
24+
25+
To preserve the current behavior, all you need to do is explicitly pass 1 if
26+
`alpha` is unset. In JS:
27+
28+
```js
29+
new sass.SassColor({
30+
red: 102,
31+
green: 51,
32+
blue: 153,
33+
alpha: alpha ?? 1,
34+
});
35+
```
36+
37+
And in Dart:
38+
39+
```dart
40+
sass.SassColor.rgb(102, 51, 153, alpha ?? 1);
41+
```
42+
43+
{% funFact %}
44+
The TypeScript types for the Sass API already forbid passing `null` as
45+
`alpha`; it's only allowed to be absent, `undefined`, or a `Number`. But prior
46+
to Dart Sass 1.64.3, if you weren't using TypeScript and you _did_ pass `null`
47+
it would still be treated as an opaque color.
48+
{% endfunFact %}
49+
50+
## Transition Period
51+
52+
{% compatibility 'dart: "1.64.3"', 'libsass: false', 'ruby: false' %}{% endcompatibility %}
53+
54+
Between Dart Sass 1.64.3 and the upcoming release of support for CSS Colors
55+
Level 4, Dart Sass will continue to interpret a `null` `alpha` value as an opaque
56+
color. However, it will emit a deprecation warning to encourage authors to
57+
explicitly pass `alpha` 1 instead.

0 commit comments

Comments
 (0)