@tbela99/css-parser 1.1.0 → 1.1.1

package/dist/index-umd-web.js

@@ -15,8 +15,17 @@
      */
     exports.ValidationLevel = void 0;
     (function (ValidationLevel) {
+        /**
+         * disable validation
+         */
         ValidationLevel[ValidationLevel["None"] = 0] = "None";
+        /**
+         * validate selectors and at-rules
+         */
         ValidationLevel[ValidationLevel["Default"] = 1] = "Default";
+        /**
+         * validate selectors, at-rules and declarations
+         */
         ValidationLevel[ValidationLevel["All"] = 2] = "All"; // selectors + at-rules + declarations
     })(exports.ValidationLevel || (exports.ValidationLevel = {}));
     /**
@@ -257,7 +266,7 @@
     const k = Math.pow(29, 3) / Math.pow(3, 3);
     const e = Math.pow(6, 3) / Math.pow(29, 3);
     // color module v4
-    const systemColors = new Set(['ActiveText', 'ButtonBorder', 'ButtonFace', 'ButtonText', 'Canvas', 'CanvasText', 'Field', 'FieldText', 'GrayText', 'Highlight', 'HighlightText', 'LinkText', 'Mark', 'MarkText', 'VisitedText'].map(m => m.toLowerCase()));
+    const systemColors = new Set(['ActiveText', 'ButtonBorder', 'ButtonFace', 'ButtonText', 'Canvas', 'CanvasText', 'Field', 'FieldText', 'GrayText', 'Highlight', 'HighlightText', 'LinkText', 'Mark', 'MarkText', 'VisitedText', '-webkit-focus-ring-color'].map(m => m.toLowerCase()));
     // deprecated
     const deprecatedSystemColors = new Set(['ActiveBorder', 'ActiveCaption', 'AppWorkspace', 'Background', 'ButtonFace', 'ButtonHighlight', 'ButtonShadow', 'ButtonText', 'CaptionText', 'GrayText', 'Highlight', 'HighlightText', 'InactiveBorder', 'InactiveCaption', 'InactiveCaptionText', 'InfoBackground', 'InfoText', 'Menu', 'MenuText', 'Scrollbar', 'ThreeDDarkShadow', 'ThreeDFace', 'ThreeDHighlight', 'ThreeDLightShadow', 'ThreeDShadow', 'Window', 'WindowFrame', 'WindowText'].map(t => t.toLowerCase()));
     // name to color
@@ -4286,6 +4295,8 @@
     // https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions
     // https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions
     const pseudoAliasMap = {
+        '-moz-center': 'center',
+        '-webkit-center': 'center',
         '-ms-grid-columns': 'grid-template-columns',
         '-ms-grid-rows': 'grid-template-rows',
         '-ms-grid-row': 'grid-row-start',
@@ -4298,6 +4309,7 @@
         '::-ms-input-placeholder': '::placeholder',
         ':-moz-any()': ':is',
         '-moz-user-modify': 'user-modify',
+        '-webkit-match-parent': 'match-parent',
         '-moz-background-clip': 'background-clip',
         '-moz-background-origin': 'background-origin',
         '-ms-input-placeholder': 'placeholder',
@@ -4454,6 +4466,7 @@
         '-webkit-min-logical-height',
         '-webkit-min-logical-width',
         '-webkit-nbsp-mode',
+        '-webkit-match-parent',
         '-webkit-perspective-origin-x',
         '-webkit-perspective-origin-y',
         '-webkit-rtl-ordering',
@@ -7455,7 +7468,7 @@
     		syntax: "auto | after"
     	},
     	"-ms-overflow-style": {
-    		syntax: "auto | none | scrollbar | -ms-autohiding-scrollbar"
+    		syntax: "auto | none | scrollbar | -ms-autohiding-scrollbar auto | none | scrollbar | -ms-autohiding-scrollbar"
     	},
     	"-ms-scroll-chaining": {
     		syntax: "chained | none"
@@ -7565,9 +7578,6 @@
     	"-moz-force-broken-image-icon": {
     		syntax: "0 | 1"
     	},
-    	"-moz-image-region": {
-    		syntax: "<shape> | auto"
-    	},
     	"-moz-orient": {
     		syntax: "inline | block | horizontal | vertical"
     	},
@@ -7608,7 +7618,7 @@
     		syntax: "default | menu | tooltip | sheet | none"
     	},
     	"-webkit-appearance": {
-    		syntax: "none | button | button-bevel | caret | checkbox | default-button | inner-spin-button | listbox | listitem | media-controls-background | media-controls-fullscreen-background | media-current-time-display | media-enter-fullscreen-button | media-exit-fullscreen-button | media-fullscreen-button | media-mute-button | media-overlay-play-button | media-play-button | media-seek-back-button | media-seek-forward-button | media-slider | media-sliderthumb | media-time-remaining-display | media-toggle-closed-captions-button | media-volume-slider | media-volume-slider-container | media-volume-sliderthumb | menulist | menulist-button | menulist-text | menulist-textfield | meter | progress-bar | progress-bar-value | push-button | radio | searchfield | searchfield-cancel-button | searchfield-decoration | searchfield-results-button | searchfield-results-decoration | slider-horizontal | slider-vertical | sliderthumb-horizontal | sliderthumb-vertical | square-button | textarea | textfield | -apple-pay-button"
+    		syntax: "none | button | button-bevel | caret | checkbox | default-button | inner-spin-button | listbox | listitem | media-controls-background | media-controls-fullscreen-background | media-current-time-display | media-enter-fullscreen-button | media-exit-fullscreen-button | media-fullscreen-button | media-mute-button | media-overlay-play-button | media-play-button | media-seek-back-button | media-seek-forward-button | media-slider | media-sliderthumb | media-time-remaining-display | media-toggle-closed-captions-button | media-volume-slider | media-volume-slider-container | media-volume-sliderthumb | menulist | menulist-button | menulist-text | menulist-textfield | meter | progress-bar | progress-bar-value | push-button | radio | searchfield | searchfield-cancel-button | searchfield-decoration | searchfield-results-button | searchfield-results-decoration | slider-horizontal | slider-vertical | sliderthumb-horizontal | sliderthumb-vertical | square-button | textarea | textfield | -apple-pay-button none | button | button-bevel | caps-lock-indicator | caret | checkbox | default-button | inner-spin-button | listbox | listitem | media-controls-background | media-controls-fullscreen-background | media-current-time-display | media-enter-fullscreen-button | media-exit-fullscreen-button | media-fullscreen-button | media-mute-button | media-overlay-play-button | media-play-button | media-seek-back-button | media-seek-forward-button | media-slider | media-sliderthumb | media-time-remaining-display | media-toggle-closed-captions-button | media-volume-slider | media-volume-slider-container | media-volume-sliderthumb | menulist | menulist-button | menulist-text | menulist-textfield | meter | progress-bar | progress-bar-value | push-button | radio | scrollbarbutton-down | scrollbarbutton-left | scrollbarbutton-right | scrollbarbutton-up | scrollbargripper-horizontal | scrollbargripper-vertical | scrollbarthumb-horizontal | scrollbarthumb-vertical | scrollbartrack-horizontal | scrollbartrack-vertical | searchfield | searchfield-cancel-button | searchfield-decoration | searchfield-results-button | searchfield-results-decoration | slider-horizontal | slider-vertical | sliderthumb-horizontal | sliderthumb-vertical | square-button | textarea | textfield | -apple-pay-button"
     	},
     	"-webkit-border-before": {
     		syntax: "<'border-width'> || <'border-style'> || <color>"
@@ -7692,7 +7702,7 @@
     		syntax: "read-only | read-write | read-write-plaintext-only"
     	},
     	"-webkit-user-select": {
-    		syntax: "auto | text | none | all"
+    		syntax: "auto | text | none | all auto | none | text | all"
     	},
     	"accent-color": {
     		syntax: "auto | <color>"
@@ -7710,7 +7720,7 @@
     		syntax: "[ normal | <baseline-position> | <content-distribution> | <overflow-position>? <content-position> ]#"
     	},
     	"alignment-baseline": {
-    		syntax: "baseline | alphabetic | ideographic | middle | central | mathematical | text-before-edge | text-after-edge"
+    		syntax: "baseline | alphabetic | ideographic | middle | central | mathematical | text-before-edge | text-after-edge auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical"
     	},
     	all: {
     		syntax: "initial | inherit | unset | revert | revert-layer"
@@ -7734,7 +7744,7 @@
     		syntax: "<single-animation-direction>#"
     	},
     	"animation-duration": {
-    		syntax: "<time>#"
+    		syntax: "[ auto | <time [0s,∞]> ]#"
     	},
     	"animation-fill-mode": {
     		syntax: "<single-animation-fill-mode>#"
@@ -7812,7 +7822,7 @@
     		syntax: "<bg-size>#"
     	},
     	"baseline-shift": {
-    		syntax: "<length-percentage> | sub | super | baseline"
+    		syntax: "<length-percentage> | sub | super | baseline baseline | sub | super | <svg-length>"
     	},
     	"block-size": {
     		syntax: "<'width'>"
@@ -8151,7 +8161,7 @@
     		syntax: "[ <counter-name> <integer>? ]+ | none"
     	},
     	cursor: {
-    		syntax: "[ [ <url> [ <x> <y> ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]"
+    		syntax: "[ [ <url> [ <x> <y> ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ] [ [ <url> [ <x> <y> ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing | hand | -webkit-grab | -webkit-grabbing | -webkit-zoom-in | -webkit-zoom-out | -moz-grab | -moz-grabbing | -moz-zoom-in | -moz-zoom-out ] ]"
     	},
     	cx: {
     		syntax: "<length> | <percentage>"
@@ -8166,10 +8176,10 @@
     		syntax: "ltr | rtl"
     	},
     	display: {
-    		syntax: "[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>| <-non-standard-display>"
+    		syntax: "[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> | <-non-standard-display>"
     	},
     	"dominant-baseline": {
-    		syntax: "auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top"
+    		syntax: "auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge"
     	},
     	"empty-cells": {
     		syntax: "show | hide"
@@ -8181,13 +8191,13 @@
     		syntax: "<paint>"
     	},
     	"fill-opacity": {
-    		syntax: "<'opacity'>"
+    		syntax: "<'opacity'> <number-zero-one>"
     	},
     	"fill-rule": {
     		syntax: "nonzero | evenodd"
     	},
     	filter: {
-    		syntax: "none | <filter-value-list>"
+    		syntax: "none | <filter-value-list> | <-ms-filter-function-list>"
     	},
     	flex: {
     		syntax: "none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]"
@@ -8220,7 +8230,7 @@
     		syntax: "<'opacity'>"
     	},
     	font: {
-    		syntax: "[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'># ] | <system-family-name>"
+    		syntax: "[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'># ] | <system-family-name> [ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'># ] | <system-family-name> | <-non-standard-font>"
     	},
     	"font-family": {
     		syntax: "[ <family-name> | <generic-family> ]#"
@@ -8367,7 +8377,7 @@
     		syntax: "none | [ first || [ force-end | allow-end ] || last ]"
     	},
     	height: {
-    		syntax: "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>"
+    		syntax: "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()> | stretch | <-non-standard-size>"
     	},
     	"hyphenate-character": {
     		syntax: "auto | <string>"
@@ -8382,7 +8392,7 @@
     		syntax: "from-image | <angle> | [ <angle>? flip ]"
     	},
     	"image-rendering": {
-    		syntax: "auto | crisp-edges | pixelated | smooth| optimizeSpeed | optimizeQuality | <-non-standard-image-rendering>"
+    		syntax: "auto | crisp-edges | pixelated | smooth | optimizeSpeed | optimizeQuality | <-non-standard-image-rendering>"
     	},
     	"image-resolution": {
     		syntax: "[ from-image || <resolution> ] && snap?"
@@ -8442,7 +8452,7 @@
     		syntax: "<length> | <percentage> | auto"
     	},
     	"letter-spacing": {
-    		syntax: "normal | <length>"
+    		syntax: "normal | <length> normal | <length-percentage>"
     	},
     	"lighting-color": {
     		syntax: "<color>"
@@ -8586,7 +8596,7 @@
     		syntax: "<'max-width'>"
     	},
     	"max-height": {
-    		syntax: "none | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>"
+    		syntax: "none | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()> | stretch | <-non-standard-size>"
     	},
     	"max-inline-size": {
     		syntax: "<'max-width'>"
@@ -8595,19 +8605,19 @@
     		syntax: "none | <integer>"
     	},
     	"max-width": {
-    		syntax: "none | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>"
+    		syntax: "none | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()> | stretch | <-non-standard-size>"
     	},
     	"min-block-size": {
     		syntax: "<'min-width'>"
     	},
     	"min-height": {
-    		syntax: "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>"
+    		syntax: "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()> | stretch | <-non-standard-size>"
     	},
     	"min-inline-size": {
     		syntax: "<'min-width'>"
     	},
     	"min-width": {
-    		syntax: "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>"
+    		syntax: "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()> | stretch | <-non-standard-size>"
     	},
     	"mix-blend-mode": {
     		syntax: "<blend-mode> | plus-lighter"
@@ -8664,7 +8674,7 @@
     		syntax: "<line-width>"
     	},
     	overflow: {
-    		syntax: "[ visible | hidden | clip | scroll | auto ]{1,2}"
+    		syntax: "[ visible | hidden | clip | scroll | auto ]{1,2} | <-non-standard-overflow>"
     	},
     	"overflow-anchor": {
     		syntax: "auto | none"
@@ -8685,10 +8695,10 @@
     		syntax: "normal | break-word | anywhere"
     	},
     	"overflow-x": {
-    		syntax: "visible | hidden | clip | scroll | auto"
+    		syntax: "visible | hidden | clip | scroll | auto | <-non-standard-overflow>"
     	},
     	"overflow-y": {
-    		syntax: "visible | hidden | clip | scroll | auto"
+    		syntax: "visible | hidden | clip | scroll | auto | <-non-standard-overflow>"
     	},
     	overlay: {
     		syntax: "none | auto"
@@ -8775,7 +8785,7 @@
     		syntax: "auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit"
     	},
     	position: {
-    		syntax: "static | relative | absolute | sticky | fixed| -webkit-sticky"
+    		syntax: "static | relative | absolute | sticky | fixed | -webkit-sticky"
     	},
     	"position-anchor": {
     		syntax: "auto | <anchor-name>"
@@ -8982,25 +8992,25 @@
     		syntax: "<color>"
     	},
     	"stroke-dasharray": {
-    		syntax: "none | <dasharray>"
+    		syntax: "none | <dasharray> none | [ <svg-length>+ ]#"
     	},
     	"stroke-dashoffset": {
-    		syntax: "<length-percentage> | <number>"
+    		syntax: "<length-percentage> | <number> <svg-length>"
     	},
     	"stroke-linecap": {
     		syntax: "butt | round | square"
     	},
     	"stroke-linejoin": {
-    		syntax: "miter | miter-clip | round | bevel | arcs"
+    		syntax: "miter | miter-clip | round | bevel | arcs miter | round | bevel"
     	},
     	"stroke-miterlimit": {
-    		syntax: "<number>"
+    		syntax: "<number> <number-one-or-greater>"
     	},
     	"stroke-opacity": {
     		syntax: "<'opacity'>"
     	},
     	"stroke-width": {
-    		syntax: "<length-percentage> | <number>"
+    		syntax: "<length-percentage> | <number> <svg-length>"
     	},
     	"tab-size": {
     		syntax: "<integer> | <length>"
@@ -9009,7 +9019,7 @@
     		syntax: "auto | fixed"
     	},
     	"text-align": {
-    		syntax: "start | end | left | right | center | justify | match-parent"
+    		syntax: "start | end | left | right | center | justify | match-parent | <-non-standard-text-align>"
     	},
     	"text-align-last": {
     		syntax: "auto | start | end | left | right | center | justify"
@@ -9147,7 +9157,7 @@
     		syntax: "none | <length-percentage> [ <length-percentage> <length>? ]?"
     	},
     	"unicode-bidi": {
-    		syntax: "normal | embed | isolate | bidi-override | isolate-override | plaintext"
+    		syntax: "normal | embed | isolate | bidi-override | isolate-override | plaintext | -moz-isolate | -moz-isolate-override | -moz-plaintext | -webkit-isolate | -webkit-isolate-override | -webkit-plaintext"
     	},
     	"user-select": {
     		syntax: "auto | text | none | all"
@@ -9189,7 +9199,7 @@
     		syntax: "<integer>"
     	},
     	width: {
-    		syntax: "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()>"
+    		syntax: "auto | <length-percentage [0,∞]> | min-content | max-content | fit-content | fit-content(<length-percentage [0,∞]>) | <calc-size()> | <anchor-size()> | stretch | <-non-standard-size>"
     	},
     	"will-change": {
     		syntax: "auto | <animateable-feature>#"
@@ -9204,7 +9214,7 @@
     		syntax: "normal | break-word"
     	},
     	"writing-mode": {
-    		syntax: "horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr"
+    		syntax: "horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr | <svg-writing-mode>"
     	},
     	x: {
     		syntax: "<length> | <percentage>"
@@ -9240,7 +9250,7 @@
     		syntax: "auto | grayscale"
     	},
     	"-moz-user-select": {
-    		syntax: "none | text | all | -moz-none"
+    		syntax: "none | text | all | -moz-none | auto"
     	},
     	"-ms-flex-align": {
     		syntax: "start | end | center | baseline | stretch"
@@ -9847,10 +9857,10 @@
     		syntax: "<url>"
     	},
     	color: {
-    		syntax: "<color-base> | currentColor | <system-color> | <light-dark()> | <deprecated-system-color>"
+    		syntax: "<color-base> | currentColor | <system-color> | <device-cmyk()>  | <light-dark()> | <-non-standard-color>"
     	},
     	"color()": {
-    		syntax: "color( [ from <color> ]? <colorspace-params> [ / [ <alpha-value> | none ] ]? )"
+    		syntax: "color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )"
     	},
     	"color-base": {
     		syntax: "<hex-color> | <color-function> | <named-color> | <color-mix()> | transparent"
@@ -9862,7 +9872,7 @@
     		syntax: "in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? | <custom-color-space> ]"
     	},
     	"color-mix()": {
-    		syntax: "color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2})"
+    		syntax: "color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2} )"
     	},
     	"color-stop": {
     		syntax: "<color-stop-length> | <color-stop-angle>"
@@ -9877,10 +9887,10 @@
     		syntax: "<linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#?"
     	},
     	"colorspace-params": {
-    		syntax: "[<custom-params> | <predefined-rgb-params> | <xyz-params>]"
+    		syntax: "[ <predefined-rgb-params> | <xyz-params>]"
     	},
     	combinator: {
-    		syntax: "'>' | '+' | '~' | [ '||' ]"
+    		syntax: "'>' | '+' | '~' | [ '|' '|' ]"
     	},
     	"common-lig-values": {
     		syntax: "[ common-ligatures | no-common-ligatures ]"
@@ -9889,7 +9899,7 @@
     		syntax: "searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar | button"
     	},
     	"complex-selector": {
-    		syntax: "<compound-selector> [ <combinator>? <compound-selector> ]*"
+    		syntax: "<complex-selector-unit> [ <combinator>? <complex-selector-unit> ]*"
     	},
     	"complex-selector-list": {
     		syntax: "<complex-selector>#"
@@ -9901,7 +9911,7 @@
     		syntax: "add | subtract | intersect | exclude"
     	},
     	"compound-selector": {
-    		syntax: "[ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!"
+    		syntax: "[ <type-selector>? <subclass-selector>* ]!"
     	},
     	"compound-selector-list": {
     		syntax: "<compound-selector>#"
@@ -9913,7 +9923,7 @@
     		syntax: "[ [ [ from [ <angle> | <zero> ] ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>"
     	},
     	"container-condition": {
-    		syntax: "[ <container-name>? <container-query>? ]!"
+    		syntax: "not <query-in-parens> | <query-in-parens> [ [ and <query-in-parens> ]* | [ or <query-in-parens> ]* ]"
     	},
     	"container-name": {
     		syntax: "<custom-ident>"
@@ -9925,7 +9935,7 @@
     		syntax: "space-between | space-around | space-evenly | stretch"
     	},
     	"content-list": {
-    		syntax: "[ <string> | contents | <image> | <counter> | <quote> | <target> | <leader()> ]+"
+    		syntax: "[ <string> | contents | <image> | <counter> | <quote> | <target> | <leader()> | <attr()> ]+"
     	},
     	"content-position": {
     		syntax: "center | start | end | flex-start | flex-end"
@@ -9940,7 +9950,7 @@
     		syntax: "contrast( [ <number> | <percentage> ]? )"
     	},
     	"coord-box": {
-    		syntax: "<paint-box> | view-box"
+    		syntax: "content-box | padding-box | border-box | fill-box | stroke-box | view-box"
     	},
     	"cos()": {
     		syntax: "cos( <calc-sum> )"
@@ -9970,7 +9980,7 @@
     		syntax: "cubic-bezier( [ <number [0,1]>, <number> ]#{2} )"
     	},
     	"cubic-bezier-easing-function": {
-    		syntax: "ease | ease-in | ease-out | ease-in-out | <cubic-bezier()>"
+    		syntax: "ease | ease-in | ease-out | ease-in-out | cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )"
     	},
     	"custom-color-space": {
     		syntax: "<dashed-ident>"
@@ -10021,7 +10031,7 @@
     		syntax: "[ full-width | proportional-width ]"
     	},
     	"element()": {
-    		syntax: "element( <id-selector> )"
+    		syntax: "element( <custom-ident> , [ first | start | last | first-except ]? ) | element( <id-selector> )"
     	},
     	"ellipse()": {
     		syntax: "ellipse( <radial-size>? [ at <position> ]? )"
@@ -10102,10 +10112,10 @@
     		syntax: "serif | sans-serif | system-ui | cursive | fantasy | math | monospace"
     	},
     	"general-enclosed": {
-    		syntax: "[ <function-token> <any-value> ) ] | ( <ident> <any-value> )"
+    		syntax: "[ <function-token> <any-value>? ) ] | [ ( <any-value>? ) ]"
     	},
     	"generic-family": {
-    		syntax: "<generic-complete> | <generic-incomplete> | emoji | fangsong"
+    		syntax: "<generic-script-specific>| <generic-complete> | <generic-incomplete> | <-non-standard-generic-family>"
     	},
     	"generic-incomplete": {
     		syntax: "ui-serif | ui-sans-serif | ui-monospace | ui-rounded"
@@ -10114,7 +10124,7 @@
     		syntax: "<shape-box> | fill-box | stroke-box | view-box"
     	},
     	gradient: {
-    		syntax: "<linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()> | <repeating-conic-gradient()>"
+    		syntax: "| <-legacy-gradient>"
     	},
     	"grayscale()": {
     		syntax: "grayscale( [ <number> | <percentage> ]? )"
@@ -10402,7 +10412,7 @@
     		syntax: "A5 | A4 | A3 | B5 | B4 | JIS-B5 | JIS-B4 | letter | legal | ledger"
     	},
     	paint: {
-    		syntax: "none | <color> | <url> [none | <color>]? | context-fill | context-stroke"
+    		syntax: "none | <color> | <url> [ none | <color> ]? | context-fill | context-stroke"
     	},
     	"paint()": {
     		syntax: "paint( <ident>, <declaration-value>? )"
@@ -10432,7 +10442,7 @@
     		syntax: "[ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]"
     	},
     	"position-area": {
-    		syntax: "[ left | center | right | span-left | span-right | x-start | x-end | span-x-start | span-x-end | x-self-start | x-self-end | span-x-self-start | span-x-self-end | span-all ] || [ top | center | bottom | span-top | span-bottom | y-start | y-end | span-y-start | span-y-end | y-self-start | y-self-end | span-y-self-start | span-y-self-end | span-all ] | [ block-start | center | block-end | span-block-start | span-block-end | span-all ] || [ inline-start | center | inline-end | span-inline-start | span-inline-end | span-all ] | [ self-block-start | center | self-block-end | span-self-block-start | span-self-block-end | span-all ] || [ self-inline-start | center | self-inline-end | span-self-inline-start | span-self-inline-end | span-all ] | [ start | center | end | span-start | span-end | span-all ]{1,2} | [ self-start | center | self-end | span-self-start | span-self-end | span-all ]{1,2}"
+    		syntax: "[ [ left | center | right | span-left | span-right | x-start | x-end | span-x-start | span-x-end | x-self-start | x-self-end | span-x-self-start | span-x-self-end | span-all ] || [ top | center | bottom | span-top | span-bottom | y-start | y-end | span-y-start | span-y-end | y-self-start | y-self-end | span-y-self-start | span-y-self-end | span-all ] | [ block-start | center | block-end | span-block-start | span-block-end | span-all ] || [ inline-start | center | inline-end | span-inline-start | span-inline-end | span-all ] | [ self-block-start | center | self-block-end | span-self-block-start | span-self-block-end | span-all ] || [ self-inline-start | center | self-inline-end | span-self-inline-start | span-self-inline-end | span-all ] | [ start | center | end | span-start | span-end | span-all ]{1,2} | [ self-start | center | self-end | span-self-start | span-self-end | span-all ]{1,2} ]"
     	},
     	"pow()": {
     		syntax: "pow( <calc-sum>, <calc-sum> )"
@@ -10447,13 +10457,13 @@
     		syntax: "':' <ident-token> | ':' <function-token> <any-value> ')'"
     	},
     	"pseudo-element-selector": {
-    		syntax: "':' <pseudo-class-selector>"
+    		syntax: "':' <pseudo-class-selector> | <legacy-pseudo-element-selector>"
     	},
     	"pseudo-page": {
     		syntax: ": [ left | right | first | blank ]"
     	},
     	"query-in-parens": {
-    		syntax: "( <container-query> ) | ( <size-feature> ) | style( <style-query> ) | scroll-state( <scroll-state-query> ) | <general-enclosed>"
+    		syntax: "( <container-condition> ) | ( <size-feature> ) | style( <style-query> ) | <general-enclosed>"
     	},
     	quote: {
     		syntax: "open-quote | close-quote | no-open-quote | no-close-quote"
@@ -10561,10 +10571,10 @@
     		syntax: "scaleZ( [ <number> | <percentage> ] )"
     	},
     	"scope-end": {
-    		syntax: "<selector-list>"
+    		syntax: "<forgiving-selector-list>"
     	},
     	"scope-start": {
-    		syntax: "<selector-list>"
+    		syntax: "<forgiving-selector-list>"
     	},
     	"scroll()": {
     		syntax: "scroll( [ <scroller> || <axis> ]? )"
@@ -10597,7 +10607,7 @@
     		syntax: "[ <length>{2,3} && <color>? ]"
     	},
     	shape: {
-    		syntax: "rect(<top>, <right>, <bottom>, <left>)"
+    		syntax: "rect( <top>, <right>, <bottom>, <left> ) | rect( <top> <right> <bottom> <left> )"
     	},
     	"shape-box": {
     		syntax: "<visual-box> | margin-box"
@@ -10648,7 +10658,7 @@
     		syntax: "closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}"
     	},
     	"size-feature": {
-    		syntax: "<media-query-list>"
+    		syntax: "<mf-plain> | <mf-boolean> | <mf-range>"
     	},
     	"skew()": {
     		syntax: "skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )"
@@ -10675,10 +10685,10 @@
     		syntax: "<declaration>"
     	},
     	"style-in-parens": {
-    		syntax: "( <style-query> ) | ( <style-feature> ) | <general-enclosed>"
+    		syntax: "( <style-condition> ) | ( <style-feature> ) | <general-enclosed>"
     	},
     	"style-query": {
-    		syntax: "not <style-in-parens> | <style-in-parens> [ [ and <style-in-parens> ]* | [ or <style-in-parens> ]* ] | <style-feature> "
+    		syntax: "<style-condition> | <style-feature>"
     	},
     	"subclass-selector": {
     		syntax: "<id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>"
@@ -10807,7 +10817,7 @@
     		syntax: "xyz | xyz-d50 | xyz-d65"
     	},
     	"xyz-params": {
-    		syntax: "<xyz> [ <number> | <percentage> | none ]{3}"
+    		syntax: "<xyz-space> [ <number> | <percentage> | none ]{3}"
     	},
     	"-legacy-gradient": {
     		syntax: "<-webkit-gradient()> | <-legacy-linear-gradient> | <-legacy-repeating-linear-gradient> | <-legacy-radial-gradient> | <-legacy-repeating-radial-gradient>"
@@ -11002,10 +11012,13 @@
     		syntax: "not <style-in-parens> | <style-in-parens> [ [ and <style-in-parens> ]* | [ or <style-in-parens> ]* ]"
     	},
     	"-non-standard-display": {
-    		syntax: "-ms-inline-flexbox | -ms-grid | -ms-inline-grid | -webkit-flex | -webkit-inline-flex | -webkit-box | -webkit-inline-box | -moz-inline-stack | -moz-box | -moz-inline-box"
+    		syntax: "-ms-inline-flexbox | -ms-grid | -ms-inline-grid | -webkit-flex | -webkit-inline-flex | -webkit-box | -webkit-inline-box | -moz-inline-stack | -moz-box | -moz-inline-box | -ms-flexbox"
     	},
     	"inset-area": {
     		syntax: "[ [ left | center | right | span-left | span-right | x-start | x-end | span-x-start | span-x-end | x-self-start | x-self-end | span-x-self-start | span-x-self-end | span-all ] || [ top | center | bottom | span-top | span-bottom | y-start | y-end | span-y-start | span-y-end | y-self-start | y-self-end | span-y-self-start | span-y-self-end | span-all ] | [ block-start | center | block-end | span-block-start | span-block-end | span-all ] || [ inline-start | center | inline-end | span-inline-start | span-inline-end | span-all ] | [ self-block-start | self-block-end | span-self-block-start | span-self-block-end | span-all ] || [ self-inline-start | self-inline-end | span-self-inline-start | span-self-inline-end | span-all ] | [ start | center | end | span-start | span-end | span-all ]{1,2} | [ self-start | center | self-end | span-self-start | span-self-end | span-all ]{1,2} ]"
+    	},
+    	"-non-standard-text-align": {
+    		syntax: "| -moz-center | -webkit-center | -webkit-match-parent"
     	}
     };
     var selectors = {
@@ -11654,20 +11667,6 @@
         ValidationSyntaxGroupEnum["AtRules"] = "atRules";
     })(ValidationSyntaxGroupEnum || (ValidationSyntaxGroupEnum = {}));
 
-    var WalkValidationTokenEnum;
-    (function (WalkValidationTokenEnum) {
-        WalkValidationTokenEnum[WalkValidationTokenEnum["IgnoreChildren"] = 0] = "IgnoreChildren";
-        WalkValidationTokenEnum[WalkValidationTokenEnum["IgnoreNode"] = 1] = "IgnoreNode";
-        WalkValidationTokenEnum[WalkValidationTokenEnum["IgnoreAll"] = 2] = "IgnoreAll";
-    })(WalkValidationTokenEnum || (WalkValidationTokenEnum = {}));
-    var WalkValidationTokenKeyTypeEnum;
-    (function (WalkValidationTokenKeyTypeEnum) {
-        WalkValidationTokenKeyTypeEnum["Array"] = "array";
-        WalkValidationTokenKeyTypeEnum["Children"] = "chi";
-        WalkValidationTokenKeyTypeEnum["Left"] = "l";
-        WalkValidationTokenKeyTypeEnum["Right"] = "r";
-        WalkValidationTokenKeyTypeEnum["Prelude"] = "prelude";
-    })(WalkValidationTokenKeyTypeEnum || (WalkValidationTokenKeyTypeEnum = {}));
     const skipped = [
         ValidationTokenEnum.Star,
         ValidationTokenEnum.HashMark,
@@ -11681,18 +11680,6 @@
         writable: true,
         configurable: true
     };
-    // syntaxes: keyword | <'property'> | <function>
-    // "none | [ [<dashed-ident> || <try-tactic>] | inset-area( <'inset-area'> ) ]#"
-    // ""
-    // : "<outline-radius>{1,4} [ / <outline-radius>{1,4} ]?
-    // ""
-    // false | true
-    // [ <mask-reference> || <position> [ / <bg-size> ]? || <repeat-style> || [ <box> | border | padding | content | text ] || [ <box> | border | padding | content ] ]#
-    // false | true | green | pipe
-    // keyword | <'property'> | <function>
-    // [<dashed-ident> || <try-tactic>]
-    // [ <mask-reference> || <position> [ / <bg-size> ]? || <repeat-style> || [ <box> | border | padding | content | text ] || [ <box> | border | padding | content ] ]#
-    // none | [ [<dashed-ident> || <try-tactic>] | inset-area( <'inset-area'> ) ]
     function* tokenize(syntax, position = { ind: 0, lin: 1, col: 0 }, currentPosition = {
         ind: -1,
         lin: 1,
@@ -11855,7 +11842,6 @@
         let items = [];
         let match = 0;
         while ((item = iterator.next()) && !item.done) {
-            // console.error(JSON.stringify({match, val: item.value,func}, null, 1));
             switch (item.value.typ) {
                 case ValidationTokenEnum.OpenParenthesis:
                     if (match > 0) {
@@ -12531,7 +12517,7 @@
         if (token.startsWith('<')) {
             // <number [1,1000]>
             // <length [0,∞]>
-            let match = token.match(/<([a-z0-9-]+)(\s+\[([0-9]+),(([0-9]+)|∞)\])?>/);
+            let match = token.match(/<([a-z0-9-]+)(\s+\[([0-9]+[a-zA-Z]*),(([0-9]+[a-zA-Z]*)|∞)\])?>/);
             if (match == null) {
                 let match = token.match(/<([a-zA-Z0-9-]+)\(\)>/);
                 if (match != null) {
@@ -12543,10 +12529,12 @@
                 throw new Error('invalid token at position: ' + position.lin + ':' + position.col + ' ' + token);
             }
             if (match[2] != null) {
+                const type = getTokenType(match[3]);
                 return Object.defineProperty({
                     typ: ValidationTokenEnum.PropertyType,
                     val: match[1],
-                    range: [+match[3], match[4] == '\u221e' ? Infinity : +match[4]]
+                    unit: exports.EnumToken[type.typ],
+                    range: [+type.val, match[4] == '\u221e' ? null : +match[4]]
                 }, 'pos', { ...objectProperties, value: pos });
             }
             return Object.defineProperty({
@@ -12617,7 +12605,7 @@
             case ValidationTokenEnum.Bracket:
                 return '[' + token.chi.reduce((acc, curr) => acc + renderSyntax(curr), '') + ']' + renderAttributes(token);
             case ValidationTokenEnum.PropertyType:
-                return '<' + token.val + '>' + renderAttributes(token);
+                return '<' + token.val + (Array.isArray(token.range) ? `[${token?.range?.[0]}, ${token?.range?.[1] ?? '\u221e'}]` : '') + '>' + renderAttributes(token);
             case ValidationTokenEnum.DeclarationType:
                 return "<'" + token.val + "'>" + renderAttributes(token);
             case ValidationTokenEnum.Number:
@@ -13375,12 +13363,25 @@
             update(context) {
                 // @ts-ignore
                 const newIndex = result.indexOf(context.current());
-                if (newIndex != -1) {
-                    // console.error({newIndex, v: result[newIndex]});
-                    // console.error(new Error('update'))
+                if (newIndex > this.index) {
                     this.index = newIndex;
                 }
             },
+            consume(token, howMany) {
+                let newIndex = result.indexOf(token, this.index + 1);
+                if (newIndex == -1 || newIndex < this.index) {
+                    return false;
+                }
+                howMany ??= 0;
+                let splice = 1;
+                if (result[newIndex - 1]?.typ == exports.EnumToken.WhitespaceTokenType) {
+                    splice++;
+                    newIndex--;
+                }
+                result.splice(this.index + 1, 0, ...result.splice(newIndex, splice + howMany));
+                this.index += howMany + splice;
+                return true;
+            },
             done() {
                 return this.index + 1 >= result.length;
             },
@@ -13405,13 +13406,21 @@
                 return result.slice(this.index + 1);
             },
             clone() {
-                const context = createContext(input.slice());
+                const context = createContext(result.slice());
                 context.index = this.index;
                 return context;
+            },
+            // @ts-ignore
+            toJSON() {
+                return {
+                    index: this.index,
+                    slice: this.slice(),
+                    tokens: this.tokens()
+                };
             }
         };
     }
-    function evaluateSyntax(node, options, parent) {
+    function evaluateSyntax(node, options) {
         let ast;
         let result;
         switch (node.typ) {
@@ -13547,7 +13556,8 @@
             }
             context.update(result.context);
         }
-        return {
+        // @ts-ignore
+        return result ?? {
             valid: SyntaxValidationResult.Valid,
             node: null,
             syntax: syntaxes[i - 1],
@@ -13689,7 +13699,7 @@
                 }
                 return {
                     valid: SyntaxValidationResult.Drop,
-                    node: context.next(),
+                    node: context.current(),
                     syntax,
                     error: `expected '${ValidationTokenEnum[syntax.typ].toLowerCase()}', got '${context.done() ? null : renderToken(context.peek())}'`,
                     context
@@ -13724,7 +13734,7 @@
         }
         switch (syntax.typ) {
             case ValidationTokenEnum.Keyword:
-                success = (token.typ == exports.EnumToken.IdenTokenType || token.typ == exports.EnumToken.DashedIdenTokenType) &&
+                success = (token.typ == exports.EnumToken.IdenTokenType || token.typ == exports.EnumToken.DashedIdenTokenType || isIdentColor(token)) &&
                     (token.val == syntax.val ||
                         syntax.val.localeCompare(token.val, undefined, { sensitivity: 'base' }) == 0 ||
                         // config.declarations.all
@@ -13753,19 +13763,11 @@
                         context
                     };
                 }
-                {
-                    result = doEvaluateSyntax((getParsedSyntax("syntaxes" /* ValidationSyntaxGroupEnum.Syntaxes */, syntax.val + '()')?.[0]).chi, createContext(token.chi), {
-                        ...options,
-                        isRepeatable: null,
-                        isList: null,
-                        occurence: null,
-                        atLeastOnce: null
-                    });
-                    if (result.valid == SyntaxValidationResult.Valid) {
-                        context.next();
-                        result.context = context;
-                        return result;
-                    }
+                result = match(getParsedSyntax("syntaxes" /* ValidationSyntaxGroupEnum.Syntaxes */, syntax.val + '()')?.[0], context, options);
+                if (result.valid == SyntaxValidationResult.Valid) {
+                    context.next();
+                    result.context = context;
+                    return result;
                 }
                 break;
             case ValidationTokenEnum.DeclarationType:
@@ -13863,6 +13865,7 @@
     }
     function matchPropertyType(syntax, context, options) {
         if (![
+            'bg-position',
             'length-percentage', 'flex', 'calc-sum', 'color', 'color-base', 'system-color', 'deprecated-system-color',
             'pseudo-class-selector', 'pseudo-element-selector'
         ].includes(syntax.val)) {
@@ -13892,6 +13895,96 @@
             return { ...result, context };
         }
         switch (syntax.val) {
+            case 'bg-position': {
+                let val;
+                let keyworkMatchCount = 0;
+                let lengthMatchCount = 0;
+                let functionMatchCount = 0;
+                let isBGX = false;
+                let isBGY = false;
+                while (token != null && keyworkMatchCount + lengthMatchCount + functionMatchCount < 3) {
+                    // match one value: keyword or length
+                    success = (token.typ == exports.EnumToken.FunctionTokenType && wildCardFuncs.includes(token.val));
+                    if (success) {
+                        functionMatchCount++;
+                        context.next();
+                        token = context.peek();
+                        continue;
+                    }
+                    if (token.typ == exports.EnumToken.WhitespaceTokenType) {
+                        context.next();
+                        token = context.peek();
+                        continue;
+                    }
+                    if (token.typ == exports.EnumToken.IdenTokenType) {
+                        val = token.val.toLowerCase();
+                        success = ['left', 'center', 'right', 'top', 'center', 'bottom'].includes(val);
+                        if (!success) {
+                            break;
+                        }
+                        keyworkMatchCount++;
+                        if (keyworkMatchCount > 2) {
+                            return {
+                                valid: SyntaxValidationResult.Drop,
+                                node: token,
+                                syntax,
+                                error: `expected <length-percentage>`,
+                                context
+                            };
+                        }
+                        if (val == 'left' || val == 'right') {
+                            if (isBGX) {
+                                return {
+                                    valid: SyntaxValidationResult.Drop,
+                                    node: token,
+                                    syntax,
+                                    error: `top | bottom | <length-percentage>`,
+                                    context
+                                };
+                            }
+                            isBGX = true;
+                        }
+                        if (val == 'top' || val == 'bottom') {
+                            if (isBGY) {
+                                return {
+                                    valid: SyntaxValidationResult.Drop,
+                                    node: token,
+                                    syntax,
+                                    error: `expected left | right | <length-percentage>`,
+                                    context
+                                };
+                            }
+                            isBGY = true;
+                        }
+                        context.next();
+                        token = context.peek();
+                        continue;
+                    }
+                    success = token.typ == exports.EnumToken.LengthTokenType || token.typ == exports.EnumToken.PercentageTokenType || (token.typ == exports.EnumToken.NumberTokenType && token.val == '0');
+                    if (!success) {
+                        break;
+                    }
+                    lengthMatchCount++;
+                    context.next();
+                    token = context.peek();
+                }
+                if (keyworkMatchCount + lengthMatchCount + functionMatchCount == 0) {
+                    return {
+                        valid: SyntaxValidationResult.Drop,
+                        node: token,
+                        syntax,
+                        error: `expected <bg-position>`,
+                        context
+                    };
+                }
+                return {
+                    valid: SyntaxValidationResult.Valid,
+                    node: token,
+                    syntax,
+                    error: '',
+                    context
+                };
+            }
             case 'calc-sum':
                 success = (token.typ == exports.EnumToken.FunctionTokenType && mathFuncs.includes(token.val)) ||
                     // @ts-ignore
@@ -13960,8 +14053,8 @@
             case 'number':
             case 'number-token':
                 success = token.typ == exports.EnumToken.NumberTokenType;
-                if ('range' in syntax) {
-                    success = success && +token.val >= +syntax.range[0] && +token.val <= +syntax.range[1];
+                if (success && 'range' in syntax) {
+                    success = +token.val >= +syntax.range[0] && (syntax.range[1] == null || +token.val <= +syntax.range[1]);
                 }
                 break;
             case 'angle':
@@ -14018,7 +14111,6 @@
             ['length-percentage', 'length', 'number', 'number-token', 'angle', 'percentage', 'dimension'].includes(syntax.val)) {
             if (!success) {
                 success = mathFuncs.includes(token.val.toLowerCase()) &&
-                    // (token as FunctionToken).val + '()' in config[ValidationSyntaxGroupEnum.Syntaxes] &&
                     doEvaluateSyntax(getParsedSyntax("syntaxes" /* ValidationSyntaxGroupEnum.Syntaxes */, token.val + '()')?.[0]?.chi ?? [], createContext(token.chi), {
                         ...options,
                         isRepeatable: null,
@@ -14099,24 +14191,28 @@
     function allOf(syntax, context, options) {
         let result;
         let i;
-        // sort tokens -> wildCard -> last
-        // 1px var(...) 2px => 1px 2px var(...)
-        const slice = context.slice();
+        let slice = context.slice();
         const vars = [];
         const tokens = [];
+        const repeatable = [];
+        // match optional syntax first
+        // <length>{2,3}&&<color>? => <color>?&&<length>{2,3}
+        for (i = 0; i < syntax.length; i++) {
+            if (syntax[i].length == 1 && syntax[i][0].occurence != null) {
+                repeatable.push(syntax[i]);
+                syntax.splice(i--, 1);
+            }
+        }
+        if (repeatable.length > 0) {
+            syntax.push(...repeatable);
+        }
+        // sort tokens -> wildCard -> last
+        // 1px var(...) 2px => 1px 2px var(...)
         for (i = 0; i < slice.length; i++) {
             if (slice[i].typ == exports.EnumToken.FunctionTokenType && wildCardFuncs.includes(slice[i].val.toLowerCase())) {
                 vars.push(slice[i]);
-                slice.splice(i, 1);
-                if (slice[i]?.typ == exports.EnumToken.WhitespaceTokenType) {
-                    vars.push(slice[i]);
-                    slice.splice(i, 1);
-                    if (i > 0) {
-                        i--;
-                    }
-                }
-                if (i > 0) {
-                    i--;
+                if (slice[i + 1]?.typ == exports.EnumToken.WhitespaceTokenType) {
+                    vars.push(slice[++i]);
                 }
                 continue;
             }
@@ -14130,7 +14226,44 @@
             tokens.push(...vars);
         }
         const con = createContext(tokens);
+        let cp;
+        let j;
         for (i = 0; i < syntax.length; i++) {
+            if (syntax[i].length == 1 && syntax[i][0].isOptional) {
+                syntax[i][0].isOptional = false;
+                j = 0;
+                cp = con.clone();
+                slice = cp.slice();
+                if (cp.done()) {
+                    syntax[i][0].isOptional = true;
+                    syntax.splice(i, 1);
+                    i = -1;
+                    continue;
+                }
+                while (!cp.done()) {
+                    result = doEvaluateSyntax(syntax[i], cp.clone(), options);
+                    if (result.valid == SyntaxValidationResult.Valid) {
+                        let end = slice.indexOf(cp.current());
+                        if (end == -1) {
+                            end = 0;
+                        }
+                        else {
+                            end -= j - 1;
+                        }
+                        con.consume(slice[j], end < 0 ? 0 : end);
+                        break;
+                    }
+                    cp.next();
+                    j++;
+                }
+                syntax[i][0].isOptional = true;
+                // @ts-ignore
+                if (result?.valid == SyntaxValidationResult.Valid) {
+                    syntax.splice(i, 1);
+                    i = -1;
+                }
+                continue;
+            }
             result = doEvaluateSyntax(syntax[i], con.clone(), options);
             if (result.valid == SyntaxValidationResult.Valid) {
                 con.update(result.context);
@@ -16075,11 +16208,13 @@
         const src = options.src;
         const stack = [];
         const stats = {
+            src: options.src ?? '',
             bytesIn: 0,
             importedBytesIn: 0,
             parse: `0ms`,
             minify: `0ms`,
-            total: `0ms`
+            total: `0ms`,
+            imports: []
         };
         let ast = {
             typ: exports.EnumToken.StyleSheetNodeType,
@@ -16125,7 +16260,7 @@
                 ast.loc.end = item.end;
             }
             if (item.token == ';' || item.token == '{') {
-                node = parseNode(tokens, context, stats, options, errors, src, map, rawTokens);
+                node = parseNode(tokens, context, options, errors, src, map, rawTokens);
                 rawTokens.length = 0;
                 if (node != null) {
                     if ('chi' in node) {
@@ -16164,7 +16299,7 @@
                 map = new Map;
             }
             else if (item.token == '}') {
-                parseNode(tokens, context, stats, options, errors, src, map, rawTokens);
+                parseNode(tokens, context, options, errors, src, map, rawTokens);
                 rawTokens.length = 0;
                 if (context.loc != null) {
                     context.loc.end = item.end;
@@ -16185,7 +16320,7 @@
             }
         }
         if (tokens.length > 0) {
-            node = parseNode(tokens, context, stats, options, errors, src, map, rawTokens);
+            node = parseNode(tokens, context, options, errors, src, map, rawTokens);
             rawTokens.length = 0;
             if (node != null) {
                 if (node.typ == exports.EnumToken.AtRuleNodeType && node.nam == 'import') {
@@ -16210,7 +16345,6 @@
                 const url = token.typ == exports.EnumToken.StringTokenType ? token.val.slice(1, -1) : token.val;
                 try {
                     const root = await options.load(url, options.src).then((src) => {
-                        // console.error({url, src: options.src, resolved: options.resolve!(url, options.src as string)})
                         return doParse(src, Object.assign({}, options, {
                             minify: false,
                             setParent: false,
@@ -16218,6 +16352,7 @@
                         }));
                     });
                     stats.importedBytesIn += root.stats.bytesIn;
+                    stats.imports.push(root.stats);
                     node.parent.chi.splice(node.parent.chi.indexOf(node), 1, ...root.ast.chi);
                     if (root.errors.length > 0) {
                         errors.push(...root.errors);
@@ -16309,7 +16444,7 @@
         }
         return null;
     }
-    function parseNode(results, context, stats, options, errors, src, map, rawTokens) {
+    function parseNode(results, context, options, errors, src, map, rawTokens) {
         let tokens = [];
         for (const t of results) {
             const node = getTokenType(t.token, t.hint);
@@ -16537,9 +16672,11 @@
                     removeComments: true
                 }), '');
             }
-            // }
             context.chi.push(node);
-            Object.defineProperties(node, { parent: { ...definedPropertySettings, value: context }, validSyntax: { ...definedPropertySettings, value: valid.valid == SyntaxValidationResult.Valid } });
+            Object.defineProperties(node, {
+                parent: { ...definedPropertySettings, value: context },
+                validSyntax: { ...definedPropertySettings, value: valid.valid == SyntaxValidationResult.Valid }
+            });
             return node;
         }
         else {
@@ -16577,11 +16714,9 @@
                             let t = renderToken(curr, { minify: false });
                             if (t == ',') {
                                 acc.push([]);
-                                // uniqTokens.push([]);
                             }
                             else {
                                 acc[acc.length - 1].push(t);
-                                // uniqTokens[uniqTokens.length - 1].push(curr);
                             }
                             return acc;
                         }, [[]]).reduce((acc, curr) => {
@@ -16613,7 +16748,6 @@
                 // @ts-ignore
                 context.chi.push(node);
                 Object.defineProperty(node, 'parent', { ...definedPropertySettings, value: context });
-                // if (options.validation) {
                 // @ts-ignore
                 const valid = options.validation == exports.ValidationLevel.None ? {
                     valid: SyntaxValidationResult.Valid,
@@ -16630,24 +16764,10 @@
                         location
                     });
                 }
-                // } else {
-                //
-                //     Object.defineProperty(node, 'tokens', {
-                //         ...definedPropertySettings,
-                //         enumerable: false,
-                //         value: tokens.slice()
-                //     });
-                //
-                //     let raw: string[][] = [...uniq.values()];
-                //
-                //     Object.defineProperty(node, 'raw', {
-                //         enumerable: false,
-                //         configurable: true,
-                //         writable: true,
-                //         value: raw
-                //     });
-                // }
-                Object.defineProperty(node, 'validSyntax', { ...definedPropertySettings, value: valid.valid == SyntaxValidationResult.Valid });
+                Object.defineProperty(node, 'validSyntax', {
+                    ...definedPropertySettings,
+                    value: valid.valid == SyntaxValidationResult.Valid
+                });
                 return node;
             }
             else {
@@ -16697,9 +16817,7 @@
                                     parseColor(tokens[i]);
                                 }
                             }
-                            tokens.splice(i, 0, { typ: exports.EnumToken.ColonTokenType });
-                            // i++;
-                            i--;
+                            tokens.splice(i--, 0, { typ: exports.EnumToken.ColonTokenType });
                             continue;
                         }
                         if ('chi' in tokens[i]) {
@@ -16784,11 +16902,15 @@
                 const result = parseDeclarationNode(node, errors, location);
                 Object.defineProperty(result, 'parent', { ...definedPropertySettings, value: context });
                 if (result != null) {
-                    // console.error(doRender(result), result.val, location);
                     if (options.validation == exports.ValidationLevel.All) {
                         const valid = evaluateSyntax(result, options);
-                        Object.defineProperty(result, 'validSyntax', { ...definedPropertySettings, value: valid.valid == SyntaxValidationResult.Valid });
+                        Object.defineProperty(result, 'validSyntax', {
+                            ...definedPropertySettings,
+                            value: valid.valid == SyntaxValidationResult.Valid
+                        });
                         if (valid.valid == SyntaxValidationResult.Drop) {
+                            // console.error({result, valid});
+                            // console.error(JSON.stringify({result, options, valid}, null, 1));
                             errors.push({
                                 action: 'drop',
                                 message: valid.error,
@@ -17582,12 +17704,6 @@
                         if (t.chi[0].val.slice(1, 5) != 'data:' && urlTokenMatcher.test(value)) {
                             // @ts-ignore
                             t.chi[0].typ = exports.EnumToken.UrlTokenTokenType;
-                            // console.error({t, v: t.chi[0], value,
-                            //     src: options.src,
-                            //     resolved: options.src !== '' && options.resolveUrls ? options.resolve(value, options.src).absolute : null,
-                            //     val2: options.src !== '' && options.resolveUrls ? options.resolve(value, options.src).absolute : value});
-                            //
-                            // console.error(new Error('resolved'));
                             // @ts-ignore
                             t.chi[0].val = options.src !== '' && options.resolveUrls ? options.resolve(value, options.src).absolute : value;
                         }
@@ -20923,8 +21039,7 @@
                         }
                         let rule = selector.map(s => {
                             if (s[0] == '&') {
-                                // @ts-ignore
-                                s[0] = node.optimized.optimized[0];
+                                s.splice(0, 1, ...node.optimized.optimized);
                             }
                             return s.join('');
                         }).join(',');