Add support for CSS4 #RRGGBBAA colors

This fixes hex colors compiling to invalid syntax when using 4-char
or 8-char notations with an alpha channel.

A major change in this patch was matching Less.js 3.13 output of hsl
and hsla functions in CSS output, instead of converting to hex or rgb
format.

All browsers we support, including Grade C browsers, support this as they have been part of browsers for a long time.
See https://caniuse.com/?search=hsla

Bug: T403056
Change-Id: I3022d677f2f99ccb2f78e105928ae178acc41f68

Author: anny21

lib/Less/Functions.php

@@ -20,6 +20,18 @@ private static function _clamp( $val, $max = 1 ) {
 		return min( max( $val, 0 ), $max );
 	}
 
+	private function _hsla( $origColor, $hsl ) {
+		$color = $this->hsla( $hsl["h"], $hsl["s"], $hsl["l"], $hsl["a"] );
+		if ( $color ) {
+			if ( $origColor->value && preg_match( '/^(rgb|hsl)/', $origColor->value ) ) {
+				$color->value = $origColor->value;
+			} else {
+				$color->value = 'rgb';
+			}
+			return $color;
+		}
+	}
+
 	private static function _number( $n ) {
 		if ( $n instanceof Less_Tree_Dimension ) {
 			return floatval( $n->unit->is( '%' ) ? $n->value / 100 : $n->value );
@@ -42,7 +54,11 @@ public function rgb( $r = null, $g = null, $b = null ) {
 		if ( $r === null || $g === null || $b === null ) {
 			throw new Less_Exception_Compiler( "rgb expects three parameters" );
 		}
-		return $this->rgba( $r, $g, $b, 1.0 );
+		$color = $this->rgba( $r, $g, $b, 1.0 );
+		if ( $color ) {
+			  $color->value = 'rgb';
+			  return $color;
+		}
 	}
 
 	public function rgba( $r = null, $g = null, $b = null, $a = null ) {
@@ -53,11 +69,15 @@ public function rgba( $r = null, $g = null, $b = null, $a = null ) {
 		];
 
 		$a = self::_number( $a );
-		return new Less_Tree_Color( $rgb, $a );
+		return new Less_Tree_Color( $rgb, $a, 'rgba' );
 	}
 
 	public function hsl( $h, $s, $l ) {
-		return $this->hsla( $h, $s, $l, 1.0 );
+		$color = $this->hsla( $h, $s, $l, 1.0 );
+		if ( $color ) {
+			$color->value = "hsl";
+			return $color;
+		}
 	}
 
 	public function hsla( $h, $s, $l, $a ) {
@@ -70,12 +90,13 @@ public function hsla( $h, $s, $l, $a ) {
 
 		$m1 = $l * 2 - $m2;
 
-		return $this->rgba(
+		$rgb = [
 			self::hsla_hue( $h + 1 / 3, $m1, $m2 ) * 255,
 			self::hsla_hue( $h, $m1, $m2 ) * 255,
 			self::hsla_hue( $h - 1 / 3, $m1, $m2 ) * 255,
-			$a
-		);
+		];
+		$a = self::_number( $a );
+		return new Less_Tree_Color( $rgb, $a, 'hsla' );
 	}
 
 	/**
@@ -297,7 +318,7 @@ public function saturate( $color = null, $amount = null, $method = null ) {
 			$hsl['s'] += $amount->value / 100;
 		}		$hsl['s'] = self::_clamp( $hsl['s'] );
 
-		return $this->hsla( $hsl['h'], $hsl['s'], $hsl['l'], $hsl['a'] );
+		return $this->_hsla( $color, $hsl );
 	}
 
 	/**
@@ -327,7 +348,7 @@ public function desaturate( $color = null, $amount = null, $method = null ) {
 
 		$hsl['s'] = self::_clamp( $hsl['s'] );
 
-		return $this->hsla( $hsl['h'], $hsl['s'], $hsl['l'], $hsl['a'] );
+		return $this->_hsla( $color, $hsl );
 	}
 
 	public function lighten( $color = null, $amount = null, $method = null ) {
@@ -351,8 +372,7 @@ public function lighten( $color = null, $amount = null, $method = null ) {
 		}
 
 		$hsl['l'] = self::_clamp( $hsl['l'] );
-
-		return $this->hsla( $hsl['h'], $hsl['s'], $hsl['l'], $hsl['a'] );
+		return $this->_hsla( $color, $hsl );
 	}
 
 	public function darken( $color = null, $amount = null, $method = null ) {
@@ -374,8 +394,7 @@ public function darken( $color = null, $amount = null, $method = null ) {
 			$hsl['l'] -= $amount->value / 100;
 		}
 		$hsl['l'] = self::_clamp( $hsl['l'] );
-
-		return $this->hsla( $hsl['h'], $hsl['s'], $hsl['l'], $hsl['a'] );
+		return $this->_hsla( $color, $hsl );
 	}
 
 	public function fadein( $color = null, $amount = null, $method = null ) {
@@ -399,7 +418,7 @@ public function fadein( $color = null, $amount = null, $method = null ) {
 		}
 
 		$hsl['a'] = self::_clamp( $hsl['a'] );
-		return $this->hsla( $hsl['h'], $hsl['s'], $hsl['l'], $hsl['a'] );
+		return $this->_hsla( $color, $hsl );
 	}
 
 	public function fadeout( $color = null, $amount = null, $method = null ) {
@@ -423,7 +442,7 @@ public function fadeout( $color = null, $amount = null, $method = null ) {
 		}
 
 		$hsl['a'] = self::_clamp( $hsl['a'] );
-		return $this->hsla( $hsl['h'], $hsl['s'], $hsl['l'], $hsl['a'] );
+		return $this->_hsla( $color, $hsl );
 	}
 
 	public function fade( $color = null, $amount = null ) {
@@ -442,7 +461,7 @@ public function fade( $color = null, $amount = null ) {
 
 		$hsl['a'] = $amount->value / 100;
 		$hsl['a'] = self::_clamp( $hsl['a'] );
-		return $this->hsla( $hsl['h'], $hsl['s'], $hsl['l'], $hsl['a'] );
+		return $this->_hsla( $color, $hsl );
 	}
 
 	public function spin( $color = null, $amount = null ) {
@@ -462,7 +481,7 @@ public function spin( $color = null, $amount = null ) {
 
 		$hsl['h'] = $hue < 0 ? 360 + $hue : $hue;
 
-		return $this->hsla( $hsl['h'], $hsl['s'], $hsl['l'], $hsl['a'] );
+		return $this->_hsla( $color, $hsl );
 	}
 
 	//
@@ -863,15 +882,16 @@ public function percentage( $n ) {
 	}
 
 	/**
-	 * @see less-2.5.3.js#colorFunctions.color
+	 * @see less-3.13.1.js#colorFunctions.color
 	 * @param Less_Tree_Quoted|Less_Tree_Color|Less_Tree_Keyword $c
 	 * @return Less_Tree_Color
 	 */
 	public function color( $c ) {
 		if ( ( $c instanceof Less_Tree_Quoted ) &&
-			preg_match( '/^#([a-f0-9]{6}|[a-f0-9]{3})/', $c->value )
+			preg_match( '/^#([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3,4})$/', $c->value )
 		) {
-			return new Less_Tree_Color( substr( $c->value, 1 ) );
+			$value = substr( $c->value, 1 );
+			return new Less_Tree_Color( $value, null, '#' . $value );
 		}
 
 		// phpcs:ignore Generic.CodeAnalysis.AssignmentInCondition
@@ -880,7 +900,7 @@ public function color( $c ) {
 			return $c;
 		}
 
-		throw new Less_Exception_Compiler( "argument must be a color keyword or 3/6 digit hex e.g. #FFF" );
+		throw new Less_Exception_Compiler( "argument must be a color keyword or 3|4|6|8 digit hex e.g. #FFF" );
 	}
 
 	public function isruleset( $n ) {

lib/Less/Parser.php

@@ -1556,12 +1556,15 @@ private function parseEntitiesPropertyCurly() {
 	 * @return Less_Tree_Color|null
 	 */
 	private function parseEntitiesColor() {
+		$this->save();
 		if ( $this->peekChar( '#' ) ) {
-			$rgb = $this->matchReg( '/\\G#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/' );
-			if ( $rgb ) {
-				return new Less_Tree_Color( $rgb[1], 1, $rgb[0] );
+			$rgb = $this->matchReg( '/\\G#([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3,4})([\w.#\[])?/' );
+			if ( $rgb && !isset( $rgb[2] ) ) {
+				$this->forget();
+				return new Less_Tree_Color( $rgb[1], null, $rgb[0] );
 			}
 		}
+		$this->restore();
 	}
 
 	/**

lib/Less/Tree/Color.php

@@ -14,21 +14,26 @@ class Less_Tree_Color extends Less_Tree {
 	public function __construct( $rgb, $a = null, ?string $originalForm = null ) {
 		if ( is_array( $rgb ) ) {
 			$this->rgb = $rgb;
-		} elseif ( strlen( $rgb ) == 6 ) {
-			// TODO: Less.js 3.13 supports 8-digit rgba as #RRGGBBAA
+		} elseif ( strlen( $rgb ) >= 6 ) {
 			$this->rgb = [];
-			foreach ( str_split( $rgb, 2 ) as $c ) {
-				$this->rgb[] = hexdec( $c );
+			foreach ( str_split( $rgb, 2 ) as $i => $c ) {
+				if ( $i < 3 ) {
+					$this->rgb[] = hexdec( $c );
+				} else {
+					$this->alpha = hexdec( $c ) / 255;
+				}
 			}
 		} else {
 			$this->rgb = [];
-			// TODO: Less.js 3.13 supports 4-digit short rgba as #RGBA
-			foreach ( str_split( $rgb, 1 ) as $c ) {
-				$this->rgb[] = hexdec( $c . $c );
+			foreach ( str_split( $rgb, 1 ) as $i => $c ) {
+				if ( $i < 3 ) {
+					$this->rgb[] = hexdec( $c . $c );
+				} else {
+					$this->alpha = hexdec( $c . $c ) / 255;
+				}
 			}
 		}
-
-		$this->alpha = is_numeric( $a ) ? $a : 1;
+		$this->alpha ??= ( is_numeric( $a ) ? $a : 1 );
 
 		if ( $originalForm !== null ) {
 			$this->value = $originalForm;
@@ -58,28 +63,56 @@ public function toCSS( $doNotCompress = false ) {
 		$compress = Less_Parser::$options['compress'] && !$doNotCompress;
 		$alpha = $this->fround( $this->alpha );
 
-		// `value` is set if this color was originally
-		// converted from a named color string so we need
-		// to respect this and try to output named color too.
-		if ( $this->value ) {
-			return $this->value;
-		}
-
 		// If we have alpha transparency other than 1.0, the only way to represent it
 		// is via rgba(). Otherwise, we use the hex representation,
 		// which has better compatibility with older browsers.
 		// Values are capped between `0` and `255`, rounded and zero-padded.
-		//
-		// TODO: Less.js 3.13 supports hsla() and hsl() as well
-		if ( $alpha < 1 ) {
-			$values = [];
-			foreach ( $this->rgb as $c ) {
-				$values[] = $this->clamp( round( $c ), 255 );
+		$colorFunction = null;
+		$args = [];
+		if ( $this->value ) {
+			if ( strpos( $this->value, 'rgb' ) === 0 ) {
+				if ( $alpha < 1 ) {
+					$colorFunction = 'rgba';
+
+				}
+			} elseif ( strpos( $this->value, 'hsl' ) === 0 ) {
+				if ( $alpha < 1 ) {
+					$colorFunction = 'hsla';
+				} else {
+					$colorFunction = 'hsl';
+				}
+			} else {
+				return $this->value;
 			}
-			$values[] = $alpha;
 
+		} else {
+			if ( $alpha < 1 ) {
+				$colorFunction = 'rgba';
+			}
+		}
+
+		switch ( $colorFunction ) {
+			case 'rgba':
+				foreach ( $this->rgb as $c ) {
+					$args[] = $this->clamp( round( $c ), 255 );
+				}
+				$args[] = $this->clamp( $alpha, 1 );
+				break;
+			case 'hsla':
+				$args[] = $this->clamp( $alpha, 1 );
+				// fall through
+			case 'hsl':
+				$color = $this->toHSL();
+				$args = [ $this->fround( $color["h"] ),
+					$this->fround( $color["s"] * 100 ) . "%",
+					$this->fround( $color["l"] * 100 ) . "%",
+					...$args
+				];
+
+		}
+		if ( $colorFunction ) {
 			$glue = ( $compress ? ',' : ', ' );
-			return "rgba(" . implode( $glue, $values ) . ")";
+			return $colorFunction . "(" . implode( $glue, $args ) . ")";
 		}
 
 		$color = $this->toRGB();

test/Fixtures/less.php/css/T403056-hex-color.css

@@ -0,0 +1,6 @@
+.test {
+  background-color: #00000014;
+}
+div {
+  background: rgba(41, 14, 39, 0.07843137);
+}

test/Fixtures/less.php/css/T403056-invalid-color.css

@@ -0,0 +1,4 @@
+ParseError: Unexpected input in T403056-invalid-color.less on line 2, column 29
+1| .invalid-input {
+2|   background-color: #1234567;
+3| }

test/Fixtures/less.php/css/oyejorge-210-complex-colors.css

@@ -23,10 +23,10 @@ body .color-definitions .argb {
   color: #e6336699;
 }
 body .color-definitions .hsl {
-  color: #336699;
+  color: hsl(210, 50%, 40%);
 }
 body .color-definitions .hsla {
-  color: rgba(51, 102, 153, 0.9);
+  color: hsla(210, 50%, 40%, 0.9);
 }
 body .color-definitions .hsv {
   color: #336699;

test/Fixtures/less.php/less/T403056-hex-color.less

@@ -0,0 +1,6 @@
+.test {
+    background-color: #00000014;
+}
+div {
+  background: darken(#9C349314, 30%);
+}

test/Fixtures/less.php/less/T403056-invalid-color.less

@@ -0,0 +1,3 @@
+.invalid-input {
+  background-color: #1234567;
+}

test/Fixtures/lessjs-2.5.3/css/colors.css

@@ -23,7 +23,7 @@
   color: #1a0000ff;
 }
 #alpha #hsla {
-  color: rgba(61, 45, 41, 0.6);
+  color: hsla(11, 20%, 20%, 0.6);
 }
 #overflow .a {
   color: #000000;
@@ -47,10 +47,10 @@
   color: #333333;
 }
 #808080 {
-  color: #808080;
+  color: hsl(0, 0%, 50%);
 }
 #00ff00 {
-  color: #00ff00;
+  color: hsl(120, 100%, 50%);
 }
 .lightenblue {
   color: #3333ff;

test/Fixtures/lessjs-2.5.3/css/functions.css

@@ -156,7 +156,7 @@
   case-insensitive-2: true;
 }
 #alpha {
-  alpha: rgba(153, 94, 51, 0.6);
+  alpha: hsla(25, 50%, 40%, 0.6);
   alpha2: 0.5;
   alpha3: 0;
 }