Support var() in plain CSS color functions. (#69)

See sass/sass-spec#1002
See sass/sass#2175

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.0.0-alpha.6
+
+* Allow `var()` to be passed to `rgb()`, `rgba()`, `hsl()`, and `hsla()`.
+
 ## 1.0.0-alpha.5
 
 * Fix bounds-checking for `opacify()`, `fade-in()`, `transparentize()`, and

lib/src/functions.dart

@@ -41,7 +41,9 @@ void defineCoreFunctions(Environment environment) {
   // ### RGB
 
   environment.defineFunction("rgb", r"$red, $green, $blue", (arguments) {
-    if (arguments[0].isCalc || arguments[1].isCalc || arguments[2].isCalc) {
+    if (arguments[0].isSpecialNumber ||
+        arguments[1].isSpecialNumber ||
+        arguments[2].isSpecialNumber) {
       return _functionString('rgb', arguments);
     }
 
@@ -60,10 +62,10 @@ void defineCoreFunctions(Environment environment) {
     r"$color, $alpha",
   ], [
     (arguments) {
-      if (arguments[0].isCalc ||
-          arguments[1].isCalc ||
-          arguments[2].isCalc ||
-          arguments[3].isCalc) {
+      if (arguments[0].isSpecialNumber ||
+          arguments[1].isSpecialNumber ||
+          arguments[2].isSpecialNumber ||
+          arguments[3].isSpecialNumber) {
         return _functionString('rgba', arguments);
       }
 
@@ -81,7 +83,7 @@ void defineCoreFunctions(Environment environment) {
     (arguments) {
       var color = arguments[0].assertColor("color");
 
-      if (arguments[1].isCalc) {
+      if (arguments[1].isSpecialNumber) {
         return new SassString(
             "rgba(${color.red}, ${color.green}, ${color.blue}, "
             "${arguments[1].toCssString()})");
@@ -116,7 +118,9 @@ void defineCoreFunctions(Environment environment) {
 
   environment.defineFunction("hsl", r"$hue, $saturation, $lightness",
       (arguments) {
-    if (arguments[0].isCalc || arguments[1].isCalc || arguments[2].isCalc) {
+    if (arguments[0].isSpecialNumber ||
+        arguments[1].isSpecialNumber ||
+        arguments[2].isSpecialNumber) {
       return _functionString("hsl", arguments);
     }
 
@@ -129,10 +133,10 @@ void defineCoreFunctions(Environment environment) {
 
   environment.defineFunction("hsla", r"$hue, $saturation, $lightness, $alpha",
       (arguments) {
-    if (arguments[0].isCalc ||
-        arguments[1].isCalc ||
-        arguments[2].isCalc ||
-        arguments[3].isCalc) {
+    if (arguments[0].isSpecialNumber ||
+        arguments[1].isSpecialNumber ||
+        arguments[2].isSpecialNumber ||
+        arguments[3].isSpecialNumber) {
       return _functionString("hsla", arguments);
     }
 

lib/src/value.dart

@@ -53,11 +53,12 @@ abstract class Value {
   /// and all other values count as single-value lists.
   List<Value> get asList => [this];
 
-  /// Whether this is a `calc()` expression.
+  /// Whether this is a value that CSS may treate as a number, such as `calc()`
+  /// or `var()`.
   ///
   /// Functions that shadow plain CSS functions need to gracefully handle when
-  /// `calc()`-derived arguments are passed in.
-  bool get isCalc => false;
+  /// these arguments are passed in.
+  bool get isSpecialNumber => false;
 
   const Value();
 

lib/src/value/string.dart

@@ -4,6 +4,7 @@
 
 import 'package:charcode/charcode.dart';
 
+import '../util/character.dart';
 import '../visitor/interface/value.dart';
 import '../value.dart';
 
@@ -29,14 +30,23 @@ class SassString extends Value {
   /// Whether this string has quotes.
   final bool hasQuotes;
 
-  bool get isCalc {
+  bool get isSpecialNumber {
     if (hasQuotes) return false;
-    if (text.length < 6) return false;
-    if (text.codeUnitAt(0) != $c && text.codeUnitAt(0) != $C) return false;
-    if (text.codeUnitAt(1) != $a && text.codeUnitAt(1) != $A) return false;
-    if (text.codeUnitAt(2) != $l && text.codeUnitAt(2) != $L) return false;
-    if (text.codeUnitAt(3) != $c && text.codeUnitAt(3) != $C) return false;
-    return text.codeUnitAt(4) == $lparen;
+    if (text.length < "calc(_)".length) return false;
+
+    var first = text.codeUnitAt(0);
+    if (equalsLetterIgnoreCase($c, first)) {
+      if (!equalsLetterIgnoreCase($a, text.codeUnitAt(1))) return false;
+      if (!equalsLetterIgnoreCase($l, text.codeUnitAt(2))) return false;
+      if (!equalsLetterIgnoreCase($c, text.codeUnitAt(3))) return false;
+      return text.codeUnitAt(4) == $lparen;
+    } else if (equalsLetterIgnoreCase($v, first)) {
+      if (!equalsLetterIgnoreCase($a, text.codeUnitAt(1))) return false;
+      if (!equalsLetterIgnoreCase($r, text.codeUnitAt(2))) return false;
+      return text.codeUnitAt(3) == $lparen;
+    } else {
+      return false;
+    }
   }
 
   bool get isBlank => !hasQuotes && text.isEmpty;

pubspec.yaml

@@ -1,5 +1,5 @@
 name: sass
-version: 1.0.0-alpha.5
+version: 1.0.0-dev
 description: A Sass implementation in Dart.
 author: Dart Team <misc@dartlang.org>
 homepage: https://github.com/sass/dart-sass