Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions packages/css-syntax-patches-for-csstree/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# Changes to CSS Syntax Patches For CSSTree

### Unreleased (patch)

- Patch `clip: rect()` to preserve legacy syntax
- Patch color functions to support relative color component keywords


### 1.0.17

_November 21, 2025_
Expand Down
24 changes: 12 additions & 12 deletions packages/css-syntax-patches-for-csstree/dist/index.json
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@
"caret": "<'caret-color'> || <'caret-animation'> || <'caret-shape'>",
"caret-animation": "auto | manual",
"clear": "| block-start | block-end | top | bottom | both-inline | both-block",
"clip": "rect( <top> , <right> , <bottom> , <left> ) | auto",
"clip": "rect( <top> , <right> , <bottom> , <left> ) | rect( <top> <right> <bottom> <left> ) | auto",
"color-adjust": "<'print-color-adjust'>",
"color-interpolation": "auto | sRGB | linearRGB",
"column-count": "auto | <integer [1,∞]>",
Expand Down Expand Up @@ -508,7 +508,7 @@
"types": {
"dashed-ident": "<custom-property-name>",
"unicode-range-token": "<urange>",
"alpha()": "alpha( [ from <color> ] [ / [ <alpha-value> | none ] ]? )",
"alpha()": "alpha( [ from <color> ] [ / [ <alpha-value> | alpha | none ] ]? )",
"anchor-size()": "anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )",
"anchor()": "anchor( <anchor-name>? && <anchor-side> , <length-percentage>? )",
"anchored-feature": "fallback : <'position-try-fallbacks'>",
Expand Down Expand Up @@ -561,7 +561,7 @@
"color-stop-angle": "[ <angle-percentage> | <zero> ]{1,2}",
"color-stop-list": "<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?",
"color-stripe": "<color> && [ <length-percentage> | <flex> ]?",
"color()": "color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )",
"color()": "color( [ from <color> ]? [ <custom-params> | [ <predefined-rgb> [ <number> | <percentage> | r | g | b | alpha | none ]{3} [ / [ <alpha-value> | r | g | b | alpha | none ] ]? ] | [ <xyz-space> [ <number> | <percentage> | x | y | z | alpha | none ]{3} [ / [ <alpha-value> | x | y | z | alpha | none ] ]? ] ] )",
"colorspace-params": "[ <custom-params> | <predefined-rgb-params> | <xyz-params> ]",
"command-end-point": "[ to <position> | by <coordinate-pair> ]",
"compat-special": "textfield | menulist-button",
Expand Down Expand Up @@ -632,7 +632,7 @@
"hsl()": "[ <legacy-hsl-syntax> | <modern-hsl-syntax> ]",
"hsla()": "[ <legacy-hsla-syntax> | <modern-hsla-syntax> ]",
"hue-rotate()": "hue-rotate( [ <angle> | <zero> ]? )",
"hwb()": "hwb( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
"hwb()": "hwb( [ from <color> ]? [ <hue> | h | w | b | alpha | none ] [ <percentage> | <number> | h | w | b | alpha | none ] [ <percentage> | <number> | h | w | b | alpha | none ] [ / [ <alpha-value> | h | w | b | alpha | none ] ]? )",
"ictcp()": "ictcp( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
"ident-arg": "<string> | <integer> | <ident>",
"ident()": "ident( <ident-arg>+ )",
Expand All @@ -658,9 +658,9 @@
"jzazbz()": "jzazbz( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
"jzczhz()": "jzczhz( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )",
"keyframe-selector": "from | to | <percentage [0,100]> | <timeline-range-name> <percentage>",
"lab()": "lab( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
"lab()": "lab( [ from <color> ]? [ <percentage> | <number> | l | a | b | alpha | none ] [ <percentage> | <number> | l | a | b | alpha | none ] [ <percentage> | <number> | l | a | b | alpha | none ] [ / [ <alpha-value> | l | a | b | alpha | none ] ]? )",
"layout-box": "<visual-box> | margin-box",
"lch()": "lch( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )",
"lch()": "lch( [ from <color> ]? [ <percentage> | <number> | l | c | h | alpha | none ] [ <percentage> | <number> | l | c | h | alpha | none ] [ <hue> | l | c | h | alpha | none ] [ / [ <alpha-value> | l | c | h | alpha | none ] ]? )",
"legacy-border-radius-syntax": "<length-percentage [0,∞]>{1,2}",
"legacy-hsl-syntax": "hsl( <hue> , <percentage> , <percentage> , <alpha-value>? )",
"legacy-hsla-syntax": "hsla( <hue> , <percentage> , <percentage> , <alpha-value>? )",
Expand Down Expand Up @@ -691,15 +691,15 @@
"mf-gt": "'>' '='?",
"mf-lt": "'<' '='?",
"mf-range": "<mf-name> <mf-comparison> <mf-value> | <mf-value> <mf-comparison> <mf-name> | <mf-value> <mf-lt> <mf-name> <mf-lt> <mf-value> | <mf-value> <mf-gt> <mf-name> <mf-gt> <mf-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 ] ]? )",
"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 ] ]? )",
"modern-hsl-syntax": "hsl( [ from <color> ]? [ <hue> | h | s | l | alpha | none ] [ <percentage> | <number> | h | s | l | alpha | none ] [ <percentage> | <number> | h | s | l | alpha | none ] [ / [ <alpha-value> | h | s | l | alpha | none ] ]? )",
"modern-hsla-syntax": "hsla( [ from <color> ]? [ <hue> | h | s | l | alpha | none ] [ <percentage> | <number> | h | s | l | alpha | none ] [ <percentage> | <number> | h | s | l | alpha | none ] [ / [ <alpha-value> | h | s | l | alpha | none ] ]? )",
"modern-rgb-syntax": "rgb( [ from <color> ]? [ <number> | <percentage> | r | g | b | alpha | none ]{3} [ / [ <alpha-value> | r | g | b | alpha | none ] ]? )",
"modern-rgba-syntax": "rgba( [ from <color> ]? [ <number> | <percentage> | r | g | b | alpha | none ]{3} [ / [ <alpha-value> | r | g | b | alpha | none ] ]? )",
"move-command": "move <command-end-point>",
"mq-boolean": "<integer [0,1]>",
"number-optional-number": "<number> <number>?",
"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 ] ]? )",
"oklab()": "oklab( [ from <color> ]? [ <percentage> | <number> | l | a | b | alpha | none ] [ <percentage> | <number> | l | a | b | alpha | none ] [ <percentage> | <number> | l | a | b | alpha | none ] [ / [ <alpha-value> | l | a | b | alpha | none ] ]? )",
"oklch()": "oklch( [ from <color> ]? [ <percentage> | <number> | l | c | h | alpha | none ] [ <percentage> | <number> | l | c | h | alpha | none ] [ <hue> | l | c | h | alpha | none ] [ / [ <alpha-value> | l | c | h | alpha | none ] ]? )",
"opacity-value": "<number> | <percentage>",
"opacity()": "opacity( [ <number> | <percentage> ]? )",
"opentype-tag": "<string>",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -1678,12 +1678,15 @@
"type": "modified",
"comment": "",
"syntax-b": "<shape> | auto",
"syntax-a": "rect( <top> , <right> , <bottom> , <left> ) | auto",
"syntax-m": "rect( <top> , <right> , <bottom> , <left> ) | auto",
"syntax-a": "rect( <top> , <right> , <bottom> , <left> ) | rect( <top> <right> <bottom> <left> ) | auto",
"syntax-m": "rect( <top> , <right> , <bottom> , <left> ) | rect( <top> <right> <bottom> <left> ) | auto",
"tests": {
"passing": [
{
"value": "rect(1px, 2px, 3px, 4px)"
},
{
"value": "rect(1px 2px 3px 4px)"
}
],
"failing": []
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,28 @@
"comment": "",
"syntax-b": "",
"syntax-a": "alpha( [ from <color> ] [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "alpha( [ from <color> ] [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "alpha( [ from <color> ] [ / [ <alpha-value> | alpha | none ] ]? )",
"tests": {
"passing": [],
"failing": []
"passing": [
{
"property": "color",
"value": "alpha(from oklch(60% 0.25 315 / 0.3) / 80%)"
},
{
"property": "color",
"value": "alpha(from oklch(60% 0.25 315 / 0.3) / alpha)"
},
{
"property": "color",
"value": "alpha(from oklch(60% 0.25 315 / 0.3) / calc(alpha / 2))"
}
],
"failing": [
{
"property": "color",
"value": "alpha(from oklch(60% 0.25 315 / 0.3) / a)"
}
]
}
},
"an+b": {
Expand Down Expand Up @@ -908,7 +926,7 @@
"comment": "",
"syntax-b": "color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )",
"syntax-a": "color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "color( [ from <color> ]? [ <custom-params> | [ <predefined-rgb> [ <number> | <percentage> | r | g | b | alpha | none ]{3} [ / [ <alpha-value> | r | g | b | alpha | none ] ]? ] | [ <xyz-space> [ <number> | <percentage> | x | y | z | alpha | none ]{3} [ / [ <alpha-value> | x | y | z | alpha | none ] ]? ] ] )",
"tests": {
"passing": [
{
Expand All @@ -918,12 +936,28 @@
{
"property": "color",
"value": "color(from red xyz 0 0 0)"
},
{
"property": "color",
"value": "color(from red xyz x y z / alpha)"
},
{
"property": "color",
"value": "color(from red srgb r g b / alpha)"
}
],
"failing": [
{
"property": "color",
"value": "color(red from xyz 0 0 0)"
},
{
"property": "color",
"value": "color(from red xyz r g b)"
},
{
"property": "color",
"value": "color(from red srgb x y z)"
}
]
}
Expand Down Expand Up @@ -1935,7 +1969,7 @@
"comment": "",
"syntax-b": "hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )",
"syntax-a": "hwb( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "hwb( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "hwb( [ from <color> ]? [ <hue> | h | w | b | alpha | none ] [ <percentage> | <number> | h | w | b | alpha | none ] [ <percentage> | <number> | h | w | b | alpha | none ] [ / [ <alpha-value> | h | w | b | alpha | none ] ]? )",
"tests": {
"passing": [
{
Expand Down Expand Up @@ -2304,7 +2338,7 @@
"comment": "",
"syntax-b": "lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
"syntax-a": "lab( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "lab( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "lab( [ from <color> ]? [ <percentage> | <number> | l | a | b | alpha | none ] [ <percentage> | <number> | l | a | b | alpha | none ] [ <percentage> | <number> | l | a | b | alpha | none ] [ / [ <alpha-value> | l | a | b | alpha | none ] ]? )",
"tests": {
"passing": [
{
Expand Down Expand Up @@ -2356,7 +2390,7 @@
"comment": "",
"syntax-b": "lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )",
"syntax-a": "lch( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "lch( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "lch( [ from <color> ]? [ <percentage> | <number> | l | c | h | alpha | none ] [ <percentage> | <number> | l | c | h | alpha | none ] [ <hue> | l | c | h | alpha | none ] [ / [ <alpha-value> | l | c | h | alpha | none ] ]? )",
"tests": {
"passing": [
{
Expand Down Expand Up @@ -2892,7 +2926,7 @@
"comment": "",
"syntax-b": "",
"syntax-a": "hsl( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "hsl( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "hsl( [ from <color> ]? [ <hue> | h | s | l | alpha | none ] [ <percentage> | <number> | h | s | l | alpha | none ] [ <percentage> | <number> | h | s | l | alpha | none ] [ / [ <alpha-value> | h | s | l | alpha | none ] ]? )",
"tests": {
"passing": [
{
Expand Down Expand Up @@ -2926,6 +2960,10 @@
{
"property": "color",
"value": "hsl(from hsl(0.5turn 5 10) 0.5turn 5 10)"
},
{
"property": "color",
"value": "hsl(from hsl(0.5turn 5 10) h s l / alpha)"
}
],
"failing": [
Expand All @@ -2941,7 +2979,7 @@
"comment": "",
"syntax-b": "",
"syntax-a": "hsla( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "hsla( [ from <color> ]? [ <hue> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "hsla( [ from <color> ]? [ <hue> | h | s | l | alpha | none ] [ <percentage> | <number> | h | s | l | alpha | none ] [ <percentage> | <number> | h | s | l | alpha | none ] [ / [ <alpha-value> | h | s | l | alpha | none ] ]? )",
"tests": {
"passing": [
{
Expand Down Expand Up @@ -2975,6 +3013,10 @@
{
"property": "color",
"value": "hsla(from hsla(0.5turn 5 10) 0.5turn 5 10)"
},
{
"property": "color",
"value": "hsla(from hsla(0.5turn 5 10) h s l / alpha)"
}
],
"failing": [
Expand All @@ -2990,7 +3032,7 @@
"comment": "",
"syntax-b": "",
"syntax-a": "rgb( [ from <color> ]? [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "rgb( [ from <color> ]? [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "rgb( [ from <color> ]? [ <number> | <percentage> | r | g | b | alpha | none ]{3} [ / [ <alpha-value> | r | g | b | alpha | none ] ]? )",
"tests": {
"passing": [
{
Expand Down Expand Up @@ -3024,12 +3066,32 @@
{
"property": "color",
"value": "rgb(from rgb(20% 5 10) 20% 5 10)"
},
{
"property": "color",
"value": "rgb(from rgb(20% 5 10) r g b / alpha)"
},
{
"property": "color",
"value": "rgb(from rgb(20% 5 10) alpha alpha alpha / alpha)"
},
{
"property": "color",
"value": "rgb(from rgb(20% 5 10) r r r / r)"
},
{
"property": "color",
"value": "rgb(from rgb(20% 5 10) calc(r / 2) calc(g / 2) calc(b / 2) / calc(alpha / 2))"
}
],
"failing": [
{
"property": "color",
"value": "rgb(20% 10 5, 0.5)"
},
{
"property": "color",
"value": "rgb(from rgb(20% 5 10) red green blue / a)"
}
]
}
Expand All @@ -3039,7 +3101,7 @@
"comment": "",
"syntax-b": "",
"syntax-a": "rgba( [ from <color> ]? [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "rgba( [ from <color> ]? [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "rgba( [ from <color> ]? [ <number> | <percentage> | r | g | b | alpha | none ]{3} [ / [ <alpha-value> | r | g | b | alpha | none ] ]? )",
"tests": {
"passing": [
{
Expand Down Expand Up @@ -3073,12 +3135,32 @@
{
"property": "color",
"value": "rgba(from rgba(20% 5 10) 20% 5 10)"
},
{
"property": "color",
"value": "rgba(from rgb(20% 5 10) r g b / alpha)"
},
{
"property": "color",
"value": "rgba(from rgb(20% 5 10) alpha alpha alpha / alpha)"
},
{
"property": "color",
"value": "rgba(from rgb(20% 5 10) r r r / r)"
},
{
"property": "color",
"value": "rgba(from rgb(20% 5 10) calc(r / 2) calc(g / 2) calc(b / 2) / calc(alpha / 2))"
}
],
"failing": [
{
"property": "color",
"value": "rgba(20% 10 5, 0.5)"
},
{
"property": "color",
"value": "rgb(from rgb(20% 5 10) red green blue / a)"
}
]
}
Expand Down Expand Up @@ -3121,7 +3203,7 @@
"comment": "",
"syntax-b": "oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
"syntax-a": "oklab( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "oklab( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "oklab( [ from <color> ]? [ <percentage> | <number> | l | a | b | alpha | none ] [ <percentage> | <number> | l | a | b | alpha | none ] [ <percentage> | <number> | l | a | b | alpha | none ] [ / [ <alpha-value> | l | a | b | alpha | none ] ]? )",
"tests": {
"passing": [
{
Expand Down Expand Up @@ -3162,7 +3244,7 @@
"comment": "",
"syntax-b": "oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )",
"syntax-a": "oklch( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "oklch( [ from <color> ]? [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )",
"syntax-m": "oklch( [ from <color> ]? [ <percentage> | <number> | l | c | h | alpha | none ] [ <percentage> | <number> | l | c | h | alpha | none ] [ <hue> | l | c | h | alpha | none ] [ / [ <alpha-value> | l | c | h | alpha | none ] ]? )",
"tests": {
"passing": [
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -632,7 +632,7 @@
"clip": {
"type": "modified",
"syntax-b": "<shape> | auto",
"syntax-a": "rect( <top> , <right> , <bottom> , <left> ) | auto",
"syntax-a": "rect( <top> , <right> , <bottom> , <left> ) | rect( <top> <right> <bottom> <left> ) | auto",
"comment": ""
},
"color-adjust": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -573,7 +573,7 @@
"syntax": "inline-start | inline-end | block-start | block-end | left | right | top | bottom | both-inline | both-block | both | none"
},
"clip": {
"syntax": "rect( <top> , <right> , <bottom> , <left> ) | auto"
"syntax": "rect( <top> , <right> , <bottom> , <left> ) | rect( <top> <right> <bottom> <left> ) | auto"
},
"clip-path": {
"syntax": "<clip-source> | [ <basic-shape> || <geometry-box> ] | none"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ export async function generate_webref_sets() {
}

if (property.name === 'clip') {
property.syntax = 'rect( <top>, <right>, <bottom>, <left> ) | auto';
property.syntax = 'rect( <top> , <right> , <bottom> , <left> ) | rect( <top> <right> <bottom> <left> ) | auto';
}

if (!property.syntax) {
Expand Down
Loading