wip

csstools · Sep 15, 2024 · 15338df · 15338df
1 parent 772154a
commit 15338df
Show file tree

Hide file tree

Showing 9 changed files with 339 additions and 188 deletions.
diff --git a/packages/css-syntax-patches-for-csstree/dist/index.json b/packages/css-syntax-patches-for-csstree/dist/index.json
@@ -14,9 +14,8 @@
 		},
 		"types": {
 			"axis": "block | inline | x | y",
-			"basic-shape": "inset( <length-percentage>{1,4} [ round <'border-radius'> ]? ) | xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? ) | rect( [ <length-percentage> | auto ]{4} [ round <'border-radius'> ]? ) | circle( <radial-size>? [ at <position> ]? ) | ellipse( [ <radial-size>{2} ]? [ at <position> ]? ) | polygon( <'fill-rule'>? , [ <length-percentage> <length-percentage> ]# ) | path( <'fill-rule'>? , <string> )",
+			"basic-shape": "inset( <length-percentage>{1,4} [ round <'border-radius'> ]? ) | xywh( <length-percentage>{2} <length-percentage [0,∞]>{2} [ round <'border-radius'> ]? ) | rect( [ <length-percentage> | auto ]{4} [ round <'border-radius'> ]? ) | circle( <radial-size>? [ at <position> ]? ) | ellipse( [ <radial-size>{2} ]? [ at <position> ]? ) | polygon( <'fill-rule'>? [ round <length> ]? , [ <length-percentage> <length-percentage> ]# ) | path( <'fill-rule'>? , <string> )",
 			"bottom": "<length-percentage> | auto",
-			"color": "<color-base> | currentColor | <system-color> | <device-cmyk()> | <light-dark()> | <-non-standard-color>",
 			"color()": "color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )",
 			"colorspace-params": "[ <custom-params> | <predefined-rgb-params> | <predefined-polar-params> | <predefined-rectangular-params> | <xyz-params> ]",
 			"compat-special": "textfield | menulist-button",
@@ -25,7 +24,6 @@
 			"hsl()": "[ <legacy-hsl-syntax> | <modern-hsl-syntax> ]",
 			"hsla()": "[ <legacy-hsla-syntax> | <modern-hsla-syntax> ]",
 			"hwb()": "hwb( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
-			"image": "<url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>",
 			"image-set-option": "[ <image> | <string> ] [ <resolution> || type( <string> ) ]?",
 			"lab()": "lab( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
 			"lch()": "lch( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )",
@@ -38,7 +36,6 @@
 			"modern-hsla-syntax": "hsla( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
 			"modern-rgb-syntax": "rgb( [ from <color> ]? [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )",
 			"modern-rgba-syntax": "rgba( [ from <color> ]? [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )",
-			"named-color": "transparent | aliceblue | antiquewhite | aqua | aquamarine | azure | beige | bisque | black | blanchedalmond | blue | blueviolet | brown | burlywood | cadetblue | chartreuse | chocolate | coral | cornflowerblue | cornsilk | crimson | cyan | darkblue | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey | dodgerblue | firebrick | floralwhite | forestgreen | fuchsia | gainsboro | ghostwhite | gold | goldenrod | gray | green | greenyellow | grey | honeydew | hotpink | indianred | indigo | ivory | khaki | lavender | lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow | lightgray | lightgreen | lightgrey | lightpink | lightsalmon | lightseagreen | lightskyblue | lightslategray | lightslategrey | lightsteelblue | lightyellow | lime | limegreen | linen | magenta | maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | midnightblue | mintcream | mistyrose | moccasin | navajowhite | navy | oldlace | olive | olivedrab | orange | orangered | orchid | palegoldenrod | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru | pink | plum | powderblue | purple | rebeccapurple | red | rosybrown | royalblue | saddlebrown | salmon | sandybrown | seagreen | seashell | sienna | silver | skyblue | slateblue | slategray | slategrey | snow | springgreen | steelblue | tan | teal | thistle | tomato | turquoise | violet | wheat | white | whitesmoke | yellow | yellowgreen",
 			"oklab()": "oklab( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
 			"oklch()": "oklch( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )",
 			"paint-box": "<visual-box> | fill-box | stroke-box",

diff --git a/packages/css-syntax-patches-for-csstree/patches/webref-over-csstree-properties.json b/packages/css-syntax-patches-for-csstree/patches/webref-over-csstree-properties.json
@@ -1028,7 +1028,7 @@
 	"bottom": {
 		"type": "modified",
 		"syntax-before": "<length> | <percentage> | auto",
-		"syntax-after": "auto | <length-percentage>",
+		"syntax-after": "auto | <length-percentage> | <anchor()> | <anchor-size()>",
 		"comment": "",
 		"merged": false,
 		"tests": {
@@ -1285,7 +1285,7 @@
 	"container-type": {
 		"type": "modified",
 		"syntax-before": "normal || [ size | inline-size ]",
-		"syntax-after": "normal | size | inline-size",
+		"syntax-after": "normal | [ [ size | inline-size ] || scroll-state ]",
 		"comment": "",
 		"merged": false,
 		"tests": {
@@ -1417,7 +1417,7 @@
 	"display": {
 		"type": "modified",
 		"syntax-before": "[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> | <-non-standard-display>",
-		"syntax-after": "[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> | <display-outside> || [ <display-inside> | math ]",
+		"syntax-after": "[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> | masonry | inline-masonry | <display-outside> || [ <display-inside> | math ]",
 		"comment": "",
 		"merged": false,
 		"tests": {
@@ -1670,7 +1670,7 @@
 	"font": {
 		"type": "modified",
 		"syntax-before": "[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'># ] | <system-family-name> | <-non-standard-font>",
-		"syntax-after": "[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | <system-family-name>",
+		"syntax-after": "[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'># ] | <system-family-name>",
 		"comment": "",
 		"merged": false,
 		"tests": {
@@ -1799,6 +1799,17 @@
 			"failing": []
 		}
 	},
+	"grid-auto-flow": {
+		"type": "modified",
+		"syntax-before": "[ row | column ] || dense",
+		"syntax-after": "[ row | column | row-reverse | column-reverse ] || dense || wrap-reverse",
+		"comment": "",
+		"merged": false,
+		"tests": {
+			"passing": [],
+			"failing": []
+		}
+	},
 	"grid-template-columns": {
 		"type": "modified",
 		"syntax-before": "none | <track-list> | <auto-track-list> | subgrid <line-name-list>?",
@@ -1824,7 +1835,7 @@
 	"height": {
 		"type": "modified",
 		"syntax-before": "auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content( <length-percentage> ) | stretch | <-non-standard-size>",
-		"syntax-after": "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content( <length-percentage [0,∞]> ) | <calc-size()> | stretch | fit-content | contain",
+		"syntax-after": "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content( <length-percentage [0,∞]> ) | <calc-size()> | stretch | fit-content | contain | <anchor-size()>",
 		"comment": "",
 		"merged": false,
 		"tests": {
@@ -2040,7 +2051,7 @@
 	"left": {
 		"type": "modified",
 		"syntax-before": "<length> | <percentage> | auto",
-		"syntax-after": "auto | <length-percentage>",
+		"syntax-after": "auto | <length-percentage> | <anchor()> | <anchor-size()>",
 		"comment": "",
 		"merged": false,
 		"tests": {
@@ -2216,7 +2227,7 @@
 	"margin-bottom": {
 		"type": "modified",
 		"syntax-before": "<length> | <percentage> | auto",
-		"syntax-after": "<length-percentage> | auto",
+		"syntax-after": "<length-percentage> | auto | <anchor-size()>",
 		"comment": "",
 		"merged": false,
 		"tests": {
@@ -2271,7 +2282,7 @@
 	"margin-left": {
 		"type": "modified",
 		"syntax-before": "<length> | <percentage> | auto",
-		"syntax-after": "<length-percentage> | auto",
+		"syntax-after": "<length-percentage> | auto | <anchor-size()>",
 		"comment": "",
 		"merged": false,
 		"tests": {
@@ -2282,7 +2293,7 @@
 	"margin-right": {
 		"type": "modified",
 		"syntax-before": "<length> | <percentage> | auto",
-		"syntax-after": "<length-percentage> | auto",
+		"syntax-after": "<length-percentage> | auto | <anchor-size()>",
 		"comment": "",
 		"merged": false,
 		"tests": {
@@ -2293,7 +2304,7 @@
 	"margin-top": {
 		"type": "modified",
 		"syntax-before": "<length> | <percentage> | auto",
-		"syntax-after": "<length-percentage> | auto",
+		"syntax-after": "<length-percentage> | auto | <anchor-size()>",
 		"comment": "",
 		"merged": false,
 		"tests": {
@@ -2400,6 +2411,94 @@
 			"failing": []
 		}
 	},
+	"masonry": {
+		"type": "added",
+		"syntax-before": "",
+		"syntax-after": "<'masonry-template-areas'> || <'masonry-template-tracks'> || <'masonry-direction'> || <'masonry-fill'>",
+		"comment": "",
+		"merged": false,
+		"tests": {
+			"passing": [],
+			"failing": []
+		}
+	},
+	"masonry-auto-tracks": {
+		"type": "added",
+		"syntax-before": "",
+		"syntax-after": "<'grid-auto-columns'>",
+		"comment": "",
+		"merged": false,
+		"tests": {
+			"passing": [],
+			"failing": []
+		}
+	},
+	"masonry-direction": {
+		"type": "added",
+		"syntax-before": "",
+		"syntax-after": "row | column | row-reverse | column-reverse",
+		"comment": "",
+		"merged": false,
+		"tests": {
+			"passing": [],
+			"failing": []
+		}
+	},
+	"masonry-fill": {
+		"type": "added",
+		"syntax-before": "",
+		"syntax-after": "normal | reverse",
+		"comment": "",
+		"merged": false,
+		"tests": {
+			"passing": [],
+			"failing": []
+		}
+	},
+	"masonry-flow": {
+		"type": "added",
+		"syntax-before": "",
+		"syntax-after": "<'masonry-direction'> || <'masonry-fill'>",
+		"comment": "",
+		"merged": false,
+		"tests": {
+			"passing": [],
+			"failing": []
+		}
+	},
+	"masonry-slack": {
+		"type": "added",
+		"syntax-before": "",
+		"syntax-after": "<length-percentage>",
+		"comment": "",
+		"merged": false,
+		"tests": {
+			"passing": [],
+			"failing": []
+		}
+	},
+	"masonry-template-areas": {
+		"type": "added",
+		"syntax-before": "",
+		"syntax-after": "none | <string>",
+		"comment": "",
+		"merged": false,
+		"tests": {
+			"passing": [],
+			"failing": []
+		}
+	},
+	"masonry-template-tracks": {
+		"type": "added",
+		"syntax-before": "",
+		"syntax-after": "<'grid-template-columns'>",
+		"comment": "",
+		"merged": false,
+		"tests": {
+			"passing": [],
+			"failing": []
+		}
+	},
 	"max-block-size": {
 		"type": "modified",
 		"syntax-before": "<'max-width'>",
@@ -2414,7 +2513,7 @@
 	"max-height": {
 		"type": "modified",
 		"syntax-before": "none | <length-percentage> | min-content | max-content | fit-content | fit-content( <length-percentage> ) | stretch | <-non-standard-size>",
-		"syntax-after": "none | <length-percentage [0,∞]> | min-content | max-content | fit-content( <length-percentage [0,∞]> ) | <calc-size()> | stretch | fit-content | contain",
+		"syntax-after": "none | <length-percentage [0,∞]> | min-content | max-content | fit-content( <length-percentage [0,∞]> ) | <calc-size()> | stretch | fit-content | contain | <anchor-size()>",
 		"comment": "",
 		"merged": false,
 		"tests": {
@@ -2447,7 +2546,7 @@
 	"max-width": {
 		"type": "modified",
 		"syntax-before": "none | <length-percentage> | min-content | max-content | fit-content | fit-content( <length-percentage> ) | stretch | <-non-standard-size>",
-		"syntax-after": "none | <length-percentage [0,∞]> | min-content | max-content | fit-content( <length-percentage [0,∞]> ) | <calc-size()> | stretch | fit-content | contain",
+		"syntax-after": "none | <length-percentage [0,∞]> | min-content | max-content | fit-content( <length-percentage [0,∞]> ) | <calc-size()> | stretch | fit-content | contain | <anchor-size()>",
 		"comment": "",
 		"merged": false,
 		"tests": {
@@ -2469,7 +2568,7 @@
 	"min-height": {
 		"type": "modified",
 		"syntax-before": "auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content( <length-percentage> ) | stretch | <-non-standard-size>",
-		"syntax-after": "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content( <length-percentage [0,∞]> ) | <calc-size()> | stretch | fit-content | contain",
+		"syntax-after": "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content( <length-percentage [0,∞]> ) | <calc-size()> | stretch | fit-content | contain | <anchor-size()>",
 		"comment": "",
 		"merged": false,
 		"tests": {
@@ -2502,7 +2601,7 @@
 	"min-width": {
 		"type": "modified",
 		"syntax-before": "auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content( <length-percentage> ) | stretch | <-non-standard-size>",
-		"syntax-after": "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content( <length-percentage [0,∞]> ) | <calc-size()> | stretch | fit-content | contain",
+		"syntax-after": "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content( <length-percentage [0,∞]> ) | <calc-size()> | stretch | fit-content | contain | <anchor-size()>",
 		"comment": "",
 		"merged": false,
 		"tests": {
@@ -3049,7 +3148,7 @@
 	"right": {
 		"type": "modified",
 		"syntax-before": "<length> | <percentage> | auto",
-		"syntax-after": "auto | <length-percentage>",
+		"syntax-after": "auto | <length-percentage> | <anchor()> | <anchor-size()>",
 		"comment": "",
 		"merged": false,
 		"tests": {
@@ -3984,7 +4083,7 @@
 	"top": {
 		"type": "modified",
 		"syntax-before": "<length> | <percentage> | auto",
-		"syntax-after": "auto | <length-percentage>",
+		"syntax-after": "auto | <length-percentage> | <anchor()> | <anchor-size()>",
 		"comment": "",
 		"merged": false,
 		"tests": {
@@ -4149,7 +4248,7 @@
 	"width": {
 		"type": "modified",
 		"syntax-before": "auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content( <length-percentage> ) | stretch | <-non-standard-size>",
-		"syntax-after": "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content( <length-percentage [0,∞]> ) | <calc-size()> | stretch | fit-content | contain",
+		"syntax-after": "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content( <length-percentage [0,∞]> ) | <calc-size()> | stretch | fit-content | contain | <anchor-size()>",
 		"comment": "",
 		"merged": false,
 		"tests": {