modern hsl

csstools · Sep 1, 2024 · 53388e4 · 53388e4
1 parent d966fbb
commit 53388e4
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 10 deletions.
diff --git a/packages/css-syntax-patches-for-csstree/dist/index.json b/packages/css-syntax-patches-for-csstree/dist/index.json
@@ -31,11 +31,15 @@
 			"coord-box": "<paint-box> | view-box",
 			"custom-params": "<dashed-ident> [ <number> | <percentage> | none ]+",
 			"ellipse()": "ellipse( <radial-size>? [ at <position> ]? )",
+			"hsl()": "[ <legacy-hsl-syntax> | <modern-hsl-syntax> ]",
+			"hsla()": "[ <legacy-hsla-syntax> | <modern-hsla-syntax> ]",
 			"image": "<url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>",
 			"image-set-option": "[ <image> | <string> ] [ <resolution> || type( <string> ) ]?",
 			"left": "<length-percentage> | auto",
 			"legacy-hsl-syntax": "hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )",
 			"legacy-hsla-syntax": "hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )",
+			"modern-hsl-syntax": "hsl( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
+			"modern-hsla-syntax": "hsla( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
 			"offset-path": "<ray()> | <url> | <basic-shape>",
 			"paint-box": "<visual-box> | fill-box | stroke-box",
 			"position": "[ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right ] && [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]",

diff --git a/packages/css-syntax-patches-for-csstree/patches/webref-over-csstree-types.json b/packages/css-syntax-patches-for-csstree/patches/webref-over-csstree-types.json
@@ -1459,9 +1459,18 @@
 		"syntax-before": "hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )",
 		"syntax-after": "[ <legacy-hsl-syntax> | <modern-hsl-syntax> ]",
 		"comment": "",
-		"merged": false,
+		"merged": "[ <legacy-hsl-syntax> | <modern-hsl-syntax> ]",
 		"tests": {
-			"passing": [],
+			"passing": [
+				{
+					"property": "color",
+					"value": "hsl(20deg, 10%, 5%)"
+				},
+				{
+					"property": "color",
+					"value": "hsl(20deg 10 5)"
+				}
+			],
 			"failing": []
 		}
 	},
@@ -1470,9 +1479,18 @@
 		"syntax-before": "hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )",
 		"syntax-after": "[ <legacy-hsla-syntax> | <modern-hsla-syntax> ]",
 		"comment": "",
-		"merged": false,
+		"merged": "[ <legacy-hsla-syntax> | <modern-hsla-syntax> ]",
 		"tests": {
-			"passing": [],
+			"passing": [
+				{
+					"property": "color",
+					"value": "hsla(20deg, 10%, 5%)"
+				},
+				{
+					"property": "color",
+					"value": "hsla(20deg 10 5)"
+				}
+			],
 			"failing": []
 		}
 	},
@@ -1748,6 +1766,10 @@
 				{
 					"property": "color",
 					"value": "hsl(20deg, 10%, 5%, 2%, 1%)"
+				},
+				{
+					"property": "color",
+					"value": "hsl(20deg, 10%, 5% / 2%)"
 				}
 			]
 		}
@@ -2105,21 +2127,97 @@
 		"syntax-before": "",
 		"syntax-after": "hsl( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
 		"comment": "",
-		"merged": false,
+		"merged": "hsl( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
 		"tests": {
-			"passing": [],
-			"failing": []
+			"passing": [
+				{
+					"property": "color",
+					"value": "hsl(20deg 10% 5%)"
+				},
+				{
+					"property": "color",
+					"value": "hsl(20deg 10% 5% / 0.5)"
+				},
+				{
+					"property": "color",
+					"value": "hsl(20 10 5)"
+				},
+				{
+					"property": "color",
+					"value": "hsl(none none none)"
+				},
+				{
+					"property": "color",
+					"value": "hsl(20deg none none)"
+				},
+				{
+					"property": "color",
+					"value": "hsl(0.5turn 5 10)"
+				},
+				{
+					"property": "color",
+					"value": "hsl(from red 0.5turn 5 10)"
+				},
+				{
+					"property": "color",
+					"value": "hsl(from hsl(0.5turn 5 10) 0.5turn 5 10)"
+				}
+			],
+			"failing": [
+				{
+					"property": "color",
+					"value": "hsl(20deg 10 5, 0.5)"
+				}
+			]
 		}
 	},
 	"modern-hsla-syntax": {
 		"type": "added",
 		"syntax-before": "",
 		"syntax-after": "hsla( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
 		"comment": "",
-		"merged": false,
+		"merged": "hsla( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
 		"tests": {
-			"passing": [],
-			"failing": []
+			"passing": [
+				{
+					"property": "color",
+					"value": "hsla(20deg 10% 5%)"
+				},
+				{
+					"property": "color",
+					"value": "hsla(20deg 10% 5% / 0.5)"
+				},
+				{
+					"property": "color",
+					"value": "hsla(20 10 5)"
+				},
+				{
+					"property": "color",
+					"value": "hsla(none none none)"
+				},
+				{
+					"property": "color",
+					"value": "hsla(20deg none none)"
+				},
+				{
+					"property": "color",
+					"value": "hsla(0.5turn 5 10)"
+				},
+				{
+					"property": "color",
+					"value": "hsla(from red 0.5turn 5 10)"
+				},
+				{
+					"property": "color",
+					"value": "hsla(from hsla(0.5turn 5 10) 0.5turn 5 10)"
+				}
+			],
+			"failing": [
+				{
+					"property": "color",
+					"value": "hsla(20deg 10 5, 0.5)"
+				}
+			]
 		}
 	},
 	"modern-rgb-syntax": {