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