Allow global Sass function colliding with CSS native functions to use…

… CSS variables (#1926)

* 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 sass/sass#3507

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

* add changelog oops

CHANGELOG.md

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

lib/src/functions/color.dart

@@ -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);
     }