danog/dart-sass
1
0
Fork 0
mirror of https://github.com/danog/dart-sass.git synced 2024-11-26 20:24:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

Allow global Sass function colliding with CSS native functions to use CSS variables (#1926)

Browse Source 
* Allow global Sass function colliding with CSS native functions to use CSS variables

Many Sass functions are available globally even without loading their module. Some of these are also valid CSS native functions. Sass performs validations which disallow the use of CSS variables because the arguments are asserted a given type of value. For these collisions allow the use of CSS variables and in such cases assume the entire function call is meant to be the CSS native function rather than the global Sass function.

Fixes https://github.com/sass/sass/issues/3507

* Also allow for special numbers, not only for var()

* add changelog oops
This commit is contained in:
Goodwine 2023-04-10 16:58:55 -07:00 committed by GitHub
parent 283bdc0063
commit e68818a86e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@ -3,6 +3,11 @@
* Deprecate the use of multiple `!global` or `!default` flags on the same
variable. This deprecation is named `duplicate-var-flags`.
* Allow special numbers like `var()` or `calc()` in the global functions:
`grayscale()`, `invert()`, `saturate()`, and `opacity()`. These are also
native CSS `filter` functions. This is in addition to number values which were
already allowed.
## 1.61.0
* **Potentially breaking change:** Drop support for End-of-Life Node.js 12.

13
lib/src/functions/color.dart
View File

@ -51,12 +51,13 @@ final global = UnmodifiableListView([
_function("invert", r"$color, $weight: 100%", (arguments) {
var weight = arguments[1].assertNumber("weight");
if (arguments[0] is SassNumber) {
if (arguments[0] is SassNumber || arguments[0].isSpecialNumber) {
if (weight.value != 100 || !weight.hasUnit("%")) {
throw "Only one argument may be passed to the plain-CSS invert() "
"function.";
}
// Use the native CSS `invert` filter function.
return _functionString("invert", arguments.take(1));
}
@ -111,7 +112,8 @@ final global = UnmodifiableListView([
}),
_function("grayscale", r"$color", (arguments) {
if (arguments[0] is SassNumber) {
if (arguments[0] is SassNumber || arguments[0].isSpecialNumber) {
// Use the native CSS `grayscale` filter function.
return _functionString('grayscale', arguments);
}
@ -143,6 +145,10 @@ final global = UnmodifiableListView([
BuiltInCallable.overloadedFunction("saturate", {
r"$amount": (arguments) {
if (arguments[0] is SassNumber || arguments[0].isSpecialNumber) {
// Use the native CSS `saturate` filter function.
return _functionString("saturate", arguments);
}
var number = arguments[0].assertNumber("amount");
return SassString("saturate(${number.toCssString()})", quotes: false);
},
@ -204,7 +210,8 @@ final global = UnmodifiableListView([
}),
_function("opacity", r"$color", (arguments) {
if (arguments[0] is SassNumber) {
if (arguments[0] is SassNumber || arguments[0].isSpecialNumber) {
// Use the native CSS `opacity` filter function.
return _functionString("opacity", arguments);
}