Merge pull request MyIntervals#197 from digilist/fix_var_inside_color_functions

Author: sabberworm

lib/Sabberworm/CSS/Value/Color.php

@@ -39,16 +39,33 @@ public static function parse(ParserState $oParserState) {
 			$sColorMode = $oParserState->parseIdentifier(true);
 			$oParserState->consumeWhiteSpace();
 			$oParserState->consume('(');
+
+			$bContainsVar = false;
 			$iLength = $oParserState->strlen($sColorMode);
 			for ($i = 0; $i < $iLength; ++$i) {
 				$oParserState->consumeWhiteSpace();
-				$aColor[$sColorMode[$i]] = Size::parse($oParserState, true);
+				if ($oParserState->comes('var')) {
+					$aColor[$sColorMode[$i]] = CSSFunction::parseIdentifierOrFunction($oParserState);
+					$bContainsVar = true;
+				} else {
+					$aColor[$sColorMode[$i]] = Size::parse($oParserState, true);
+				}
+
+				if ($bContainsVar && $oParserState->comes(')')) {
+					// With a var argument the function can have fewer arguments
+					break;
+				}
+
 				$oParserState->consumeWhiteSpace();
 				if ($i < ($iLength - 1)) {
 					$oParserState->consume(',');
 				}
 			}
 			$oParserState->consume(')');
+
+			if ($bContainsVar) {
+				return new CSSFunction($sColorMode, array_values($aColor), ',', $oParserState->currentLine());
+			}
 		}
 		return new Color($aColor, $oParserState->currentLine());
 	}

tests/Sabberworm/CSS/ParserTest.php

@@ -76,7 +76,9 @@ function testColorParsing() {
 			$this->assertSame('red', $sColor);
 		}
 		$this->assertSame('#mine {color: red;border-color: #0a64e6;border-color: rgba(10,100,231,.3);outline-color: #222;background-color: #232323;}
-#yours {background-color: hsl(220,10%,220%);background-color: hsla(220,10%,220%,.3);}', $oDoc->render());
+#yours {background-color: hsl(220,10%,220%);background-color: hsla(220,10%,220%,.3);}
+#variables {background-color: rgb(var(--some-rgb));background-color: rgb(var(--r),var(--g),var(--b));background-color: rgb(255,var(--g),var(--b));background-color: rgb(255,255,var(--b));background-color: rgb(255,var(--rg));background-color: hsl(var(--some-hsl));}
+#variables-alpha {background-color: rgba(var(--some-rgb),.1);background-color: rgba(var(--some-rg),255,.1);background-color: hsla(var(--some-hsl),.1);}', $oDoc->render());
 	}
 
 	function testUnicodeParsing() {

tests/files/colortest.css

@@ -10,3 +10,19 @@
 	background-color: hsl(220, 10%, 220%);
 	background-color: hsla(220, 10%, 220%, 0.3);
 }
+
+#variables {
+	background-color: rgb(var(--some-rgb));
+	background-color: rgb(var(--r), var(--g), var(--b));
+	background-color: rgb(255, var(--g), var(--b));
+	background-color: rgb(255, 255, var(--b));
+	background-color: rgb(255, var(--rg));
+
+	background-color: hsl(var(--some-hsl));
+}
+
+#variables-alpha {
+	background-color: rgba(var(--some-rgb), 0.1);
+	background-color: rgba(var(--some-rg), 255, 0.1);
+	background-color: hsla(var(--some-hsl), 0.1);
+}