From a770c97978a363576bda4eaa696d4c63161c27d4 Mon Sep 17 00:00:00 2001
From: Thierry Bela Nanga <bnanga@gmail.com>
Date: Tue, 15 Jul 2025 21:22:03 -0400
Subject: [PATCH 1/7] update comments

---
 src/@types/index.d.ts          | 3 ++-
 src/lib/ast/features/values.ts | 0
 src/lib/ast/types.ts           | 9 +++++++++
 src/lib/ast/utils/index.ts     | 0
 src/lib/ast/utils/utils.ts     | 0
 5 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/ast/features/values.ts
 create mode 100644 src/lib/ast/utils/index.ts
 create mode 100644 src/lib/ast/utils/utils.ts

diff --git a/src/@types/index.d.ts b/src/@types/index.d.ts
index c0322f82..827bb874 100644
--- a/src/@types/index.d.ts
+++ b/src/@types/index.d.ts
@@ -50,6 +50,8 @@ export interface ValidationOptions {
 export interface MinifyOptions {
 
     minify?: boolean;
+    parseColor?: boolean;
+    convertColor?: boolean;
     nestingRules?: boolean;
     expandNestingRules?: boolean;
     removeDuplicateDeclarations?: boolean;
@@ -69,7 +71,6 @@ export declare interface ParserOptions extends MinifyOptions, MinifyFeatureOptio
     resolveUrls?: boolean;
     resolveImport?: boolean;
     cwd?: string;
-    parseColor?: boolean;
     removePrefix?: boolean;
     load?: (url: string, currentUrl: string) => Promise<string>;
     dirname?: (path: string) => string;
diff --git a/src/lib/ast/features/values.ts b/src/lib/ast/features/values.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/lib/ast/types.ts b/src/lib/ast/types.ts
index 75a7c49a..c7d94478 100644
--- a/src/lib/ast/types.ts
+++ b/src/lib/ast/types.ts
@@ -10,8 +10,17 @@ export enum SyntaxValidationResult {
  */
 export enum ValidationLevel {
 
+    /**
+     * disable validation
+     */
     None,
+    /**
+     * validate selectors and at-rules
+     */
     Default, // selectors + at-rules
+    /**
+     * validate selectors, at-rules and declarations
+     */
     All // selectors + at-rules + declarations
 }
 
diff --git a/src/lib/ast/utils/index.ts b/src/lib/ast/utils/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/lib/ast/utils/utils.ts b/src/lib/ast/utils/utils.ts
new file mode 100644
index 00000000..e69de29b

From e6be00c6ea0135948d4426bc43ff538628c02b36 Mon Sep 17 00:00:00 2001
From: Thierry Bela Nanga <bnanga@gmail.com>
Date: Thu, 17 Jul 2025 19:07:28 -0400
Subject: [PATCH 2/7] update validation syntax #87

---
 dist/index-umd-web.js               | 172 +++++++++++------
 dist/index.cjs                      | 172 +++++++++++------
 dist/index.d.ts                     |  32 +++-
 dist/lib/ast/features/values.js     | 287 ++++++++++++++++++++++++++++
 dist/lib/ast/types.js               |   9 +
 dist/lib/ast/utils/utils.js         | 104 ++++++++++
 dist/lib/parser/parse.js            |  63 +++---
 dist/lib/validation/config.json.js  |  21 +-
 dist/lib/validation/parser/parse.js |  16 +-
 dist/lib/validation/syntax.js       |  73 ++++++-
 jsr.json                            |   2 +-
 package.json                        |   2 +-
 src/@types/index.d.ts               |  20 +-
 src/@types/validation.d.ts          |   2 +
 src/lib/parser/parse.ts             | 194 ++++++++-----------
 src/lib/validation/config.json      |  21 +-
 src/lib/validation/parser/parse.ts  |  12 +-
 src/lib/validation/parser/types.ts  |   3 +
 src/lib/validation/syntax.ts        | 108 ++++++++++-
 test/specs/code/validation.js       |  12 ++
 tools/validation.ts                 |   9 +-
 21 files changed, 1005 insertions(+), 329 deletions(-)
 create mode 100644 dist/lib/ast/features/values.js
 create mode 100644 dist/lib/ast/utils/utils.js

diff --git a/dist/index-umd-web.js b/dist/index-umd-web.js
index 7bd72388..ed555f78 100644
--- a/dist/index-umd-web.js
+++ b/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 = {}));
     /**
@@ -7565,9 +7574,6 @@
     	"-moz-force-broken-image-icon": {
     		syntax: "0 | 1"
     	},
-    	"-moz-image-region": {
-    		syntax: "<shape> | auto"
-    	},
     	"-moz-orient": {
     		syntax: "inline | block | horizontal | vertical"
     	},
@@ -7734,7 +7740,7 @@
     		syntax: "<single-animation-direction>#"
     	},
     	"animation-duration": {
-    		syntax: "<time>#"
+    		syntax: "[ auto | <time [0s,∞]> ]#"
     	},
     	"animation-fill-mode": {
     		syntax: "<single-animation-fill-mode>#"
@@ -8187,7 +8193,7 @@
     		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'> ]"
@@ -8586,7 +8592,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,7 +8601,7 @@
     		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'>"
@@ -8607,7 +8613,7 @@
     		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 +8670,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 +8691,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"
@@ -9204,7 +9210,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>"
@@ -12531,7 +12537,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 +12549,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]]
+                    val: type.val,
+                    unit: exports.EnumToken[type.typ],
+                    range: [+type.val, match[4] == '\u221e' ? Infinity : +match[4]]
                 }, 'pos', { ...objectProperties, value: pos });
             }
             return Object.defineProperty({
@@ -13376,11 +13384,24 @@
                 // @ts-ignore
                 const newIndex = result.indexOf(context.current());
                 if (newIndex != -1) {
-                    // console.error({newIndex, v: result[newIndex]});
-                    // console.error(new Error('update'))
                     this.index = newIndex;
                 }
             },
+            consume(token, howMany) {
+                let newIndex = result.indexOf(token, this.index + 1);
+                if (newIndex == -1) {
+                    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;
             },
@@ -13497,6 +13518,8 @@
         let i = 0;
         let result;
         let token = null;
+        // console.error(`doEvaluateSyntax: ${syntaxes.reduce((acc, curr) => acc + renderSyntax(curr), '')}`, context.peek());
+        // console.error(new Error('anyOf'));
         for (; i < syntaxes.length; i++) {
             syntax = syntaxes[i];
             if (context.done()) {
@@ -14099,11 +14122,23 @@
     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]);
@@ -14130,7 +14165,43 @@
             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.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 +16146,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 +16198,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 +16237,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 +16258,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 +16283,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 +16290,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 +16382,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 +16610,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 +16652,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 +16686,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 +16702,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 +16755,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,10 +16840,12 @@
                 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) {
                             errors.push({
                                 action: 'drop',
@@ -17582,12 +17640,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;
                         }
diff --git a/dist/index.cjs b/dist/index.cjs
index 123f50fe..26fa087b 100644
--- a/dist/index.cjs
+++ b/dist/index.cjs
@@ -14,8 +14,17 @@ var SyntaxValidationResult;
  */
 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 = {}));
 /**
@@ -7564,9 +7573,6 @@ var declarations = {
 	"-moz-force-broken-image-icon": {
 		syntax: "0 | 1"
 	},
-	"-moz-image-region": {
-		syntax: "<shape> | auto"
-	},
 	"-moz-orient": {
 		syntax: "inline | block | horizontal | vertical"
 	},
@@ -7733,7 +7739,7 @@ var declarations = {
 		syntax: "<single-animation-direction>#"
 	},
 	"animation-duration": {
-		syntax: "<time>#"
+		syntax: "[ auto | <time [0s,∞]> ]#"
 	},
 	"animation-fill-mode": {
 		syntax: "<single-animation-fill-mode>#"
@@ -8186,7 +8192,7 @@ var declarations = {
 		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'> ]"
@@ -8585,7 +8591,7 @@ var declarations = {
 		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'>"
@@ -8594,7 +8600,7 @@ var declarations = {
 		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'>"
@@ -8606,7 +8612,7 @@ var declarations = {
 		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"
@@ -8663,7 +8669,7 @@ var declarations = {
 		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"
@@ -8684,10 +8690,10 @@ var declarations = {
 		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"
@@ -9203,7 +9209,7 @@ var declarations = {
 		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>"
@@ -12530,7 +12536,7 @@ function getTokenType$1(token, position, currentPosition) {
     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) {
@@ -12542,10 +12548,12 @@ function getTokenType$1(token, position, currentPosition) {
             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]]
+                val: type.val,
+                unit: exports.EnumToken[type.typ],
+                range: [+type.val, match[4] == '\u221e' ? Infinity : +match[4]]
             }, 'pos', { ...objectProperties, value: pos });
         }
         return Object.defineProperty({
@@ -13485,11 +13493,24 @@ function createContext(input) {
             // @ts-ignore
             const newIndex = result.indexOf(context.current());
             if (newIndex != -1) {
-                // console.error({newIndex, v: result[newIndex]});
-                // console.error(new Error('update'))
                 this.index = newIndex;
             }
         },
+        consume(token, howMany) {
+            let newIndex = result.indexOf(token, this.index + 1);
+            if (newIndex == -1) {
+                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;
         },
@@ -13606,6 +13627,8 @@ function doEvaluateSyntax(syntaxes, context, options) {
     let i = 0;
     let result;
     let token = null;
+    // console.error(`doEvaluateSyntax: ${syntaxes.reduce((acc, curr) => acc + renderSyntax(curr), '')}`, context.peek());
+    // console.error(new Error('anyOf'));
     for (; i < syntaxes.length; i++) {
         syntax = syntaxes[i];
         if (context.done()) {
@@ -14208,11 +14231,23 @@ function anyOf(syntaxes, context, options) {
 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]);
@@ -14239,7 +14274,43 @@ function allOf(syntax, context, options) {
         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.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);
@@ -16184,11 +16255,13 @@ async function doParse(iterator, options = {}) {
     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,
@@ -16234,7 +16307,7 @@ async function doParse(iterator, options = {}) {
             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) {
@@ -16273,7 +16346,7 @@ async function doParse(iterator, options = {}) {
             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;
@@ -16294,7 +16367,7 @@ async function doParse(iterator, options = {}) {
         }
     }
     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') {
@@ -16319,7 +16392,6 @@ async function doParse(iterator, options = {}) {
             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,
@@ -16327,6 +16399,7 @@ async function doParse(iterator, options = {}) {
                     }));
                 });
                 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);
@@ -16418,7 +16491,7 @@ function getLastNode(context) {
     }
     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);
@@ -16646,9 +16719,11 @@ function parseNode(results, context, stats, options, errors, src, map, rawTokens
                 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 {
@@ -16686,11 +16761,9 @@ function parseNode(results, context, stats, options, errors, src, map, rawTokens
                         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) => {
@@ -16722,7 +16795,6 @@ function parseNode(results, context, stats, options, errors, src, map, rawTokens
             // @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,
@@ -16739,24 +16811,10 @@ function parseNode(results, context, stats, options, errors, src, map, rawTokens
                     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 {
@@ -16806,9 +16864,7 @@ function parseNode(results, context, stats, options, errors, src, map, rawTokens
                                 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]) {
@@ -16893,10 +16949,12 @@ function parseNode(results, context, stats, options, errors, src, map, rawTokens
             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) {
                         errors.push({
                             action: 'drop',
@@ -17691,12 +17749,6 @@ function parseTokens(tokens, options = {}) {
                     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;
                     }
diff --git a/dist/index.d.ts b/dist/index.d.ts
index ee5c6d49..ec8c3485 100644
--- a/dist/index.d.ts
+++ b/dist/index.d.ts
@@ -2,8 +2,17 @@
  * validation level enum
  */
 declare enum ValidationLevel {
+    /**
+     * disable validation
+     */
     None = 0,
+    /**
+     * validate selectors and at-rules
+     */
     Default = 1,// selectors + at-rules
+    /**
+     * validate selectors, at-rules and declarations
+     */
     All = 2
 }
 /**
@@ -1160,6 +1169,8 @@ interface ValidationOptions {
 interface MinifyOptions {
 
     minify?: boolean;
+    parseColor?: boolean;
+    convertColor?: boolean;
     nestingRules?: boolean;
     expandNestingRules?: boolean;
     removeDuplicateDeclarations?: boolean;
@@ -1179,7 +1190,6 @@ export declare interface ParserOptions extends MinifyOptions, MinifyFeatureOptio
     resolveUrls?: boolean;
     resolveImport?: boolean;
     cwd?: string;
-    parseColor?: boolean;
     removePrefix?: boolean;
     load?: (url: string, currentUrl: string) => Promise<string>;
     dirname?: (path: string) => string;
@@ -1248,15 +1258,20 @@ export declare interface TransformOptions extends ParserOptions, RenderOptions {
 
 }
 
+export declare interface ParseResultStats {
+    src: string;
+    bytesIn: number;
+    importedBytesIn: number;
+    parse: string;
+    minify: string;
+    total: string;
+    imports: ParseResultStats[]
+}
+
 export declare interface ParseResult {
     ast: AstRuleStyleSheet;
     errors: ErrorDescription[];
-    stats: {
-        bytesIn: number;
-        parse: string;
-        minify: string;
-        total: string;
-    }
+    stats: ParseResultStats
 }
 
 export declare interface RenderResult {
@@ -1271,12 +1286,15 @@ export declare interface RenderResult {
 export declare interface TransformResult extends ParseResult, RenderResult {
 
     stats: {
+        src: string;
         bytesIn: number;
         bytesOut: number;
+        importedBytesIn: number;
         parse: string;
         minify: string;
         render: string;
         total: string;
+        imports: ParseResultStats[];
     }
 }
 
diff --git a/dist/lib/ast/features/values.js b/dist/lib/ast/features/values.js
new file mode 100644
index 00000000..0d6b0c15
--- /dev/null
+++ b/dist/lib/ast/features/values.js
@@ -0,0 +1,287 @@
+import { EnumToken } from '../types.js';
+import { renderToken } from '../../renderer/render.js';
+import { colorsFunc, colorFuncColorSpace, ColorKind, COLORS_NAMES } from '../../renderer/color/utils/constants.js';
+import { getComponents } from '../../renderer/color/utils/components.js';
+import { isColor, parseColor } from '../../syntax/syntax.js';
+import { walkValues } from '../walk.js';
+import { clamp, reduceNumber, filterValues } from '../utils/utils.js';
+import { color2srgbvalues } from '../../renderer/color/color.js';
+import { reduceHexValue, srgb2hexvalues, rgb2hex, hsl2hex, hwb2hex, cmyk2hex, oklab2hex, oklch2hex, lab2hex, lch2hex } from '../../renderer/color/hex.js';
+import '../minify.js';
+import '../../parser/parse.js';
+import '../../parser/tokenize.js';
+import '../../parser/utils/config.js';
+import { colorMix } from '../../renderer/color/color-mix.js';
+import { parseRelativeColor } from '../../renderer/color/relativecolor.js';
+
+function replaceNode(node, replacement, parent) {
+    if ('chi' in parent || 'val' in parent) {
+        // @ts-ignore
+        const chi = parent.chi ?? parent.val;
+        for (let i = 0; i < chi.length; i++) {
+            // @ts-ignore
+            if (chi[i] == node) {
+                // @ts-ignore
+                chi.splice(i, 1, replacement);
+                break;
+            }
+        }
+    }
+    else if ('l' in parent && node == parent.l) {
+        // @ts-ignore
+        parent.l = replacement;
+    }
+    else if ('r' in parent) {
+        if (node == parent.r) {
+            // @ts-ignore
+            parent.r = replacement;
+        }
+        else if (Array.isArray(parent.r)) {
+            for (let i = 0; i < parent.r.length; i++) {
+                if (parent.r[i] == node) {
+                    // @ts-ignore
+                    parent.r.splice(i, 1, replacement);
+                    break;
+                }
+            }
+        }
+    }
+}
+class ValuesFeature {
+    get ordering() {
+        return 6;
+    }
+    get preProcess() {
+        return false;
+    }
+    get postProcess() {
+        return true;
+    }
+    static register(options) {
+        if (options.minify) {
+            // @ts-ignore
+            options.features.push(new ValuesFeature());
+        }
+    }
+    run(ast, options = {}, parent, context) {
+        if (ast.typ != EnumToken.DeclarationNodeType) {
+            return;
+        }
+        for (const { value: token, parent } of walkValues(ast.val, ast)) {
+            if (options.parseColor) {
+                if (token.typ == EnumToken.FunctionTokenType && colorsFunc.includes(token.val)) {
+                    if (isColor(token)) {
+                        parseColor(token);
+                        // // @ts-ignore
+                        // token.typ = EnumToken.ColorTokenType;
+                        //
+                        // // @ts-ignore
+                        // if ((token as ColorToken)!.chi[0]!.typ == EnumToken.IdenTokenType && ((token as ColorToken)!.chi[0] as IdentToken).val == 'from') {
+                        //
+                        //     // @ts-ignore
+                        //     (<ColorToken>token).cal = 'rel';
+                        // } else { // @ts-ignore
+                        //     if ((token as ColorToken).val == 'color-mix' && (token as ColorToken).chi[0].typ == EnumToken.IdenTokenType && ((token as ColorToken).chi[0] as IdentToken).val == 'in') {
+                        //
+                        //         // @ts-ignore
+                        //         (<ColorToken>token).cal = 'mix';
+                        //     } else {
+                        //
+                        //         // @ts-ignore
+                        //         if ((token as ColorToken).val == 'color') {
+                        //             // @ts-ignore
+                        //             token.cal = 'col';
+                        //         }
+                        //
+                        //         // @ts-ignore
+                        //         (token as ColorToken).chi = (token as ColorToken).chi!.filter((t: Token) => ![EnumToken.WhitespaceTokenType, EnumToken.CommaTokenType, EnumToken.CommentTokenType].includes(t.typ));
+                        //     }
+                        // }
+                    }
+                }
+            }
+            switch (token.typ) {
+                case EnumToken.FractionTokenType:
+                    const fraction = renderToken(token.l) + '/' + renderToken(token.r);
+                    if (+token.r.val != 0) {
+                        const value = reduceNumber(+token.l.val / +token.r.val);
+                        if (value.length <= fraction.length) {
+                            replaceNode(token, {
+                                typ: EnumToken.NumberTokenType,
+                                val: value
+                            }, parent);
+                        }
+                    }
+                    break;
+                case EnumToken.ColorTokenType:
+                    if (!options.convertColor) {
+                        break;
+                    }
+                    if ('light-dark'.localeCompare(token.val, undefined, { sensitivity: 'base' }) == 0) {
+                        break;
+                    }
+                    if (token.cal == 'mix' && token.val == 'color-mix') {
+                        const children = token.chi.reduce((acc, t) => {
+                            if (t.typ == EnumToken.ColorTokenType) {
+                                acc.push([t]);
+                            }
+                            else {
+                                if (![EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType, EnumToken.CommaTokenType].includes(t.typ)) {
+                                    acc[acc.length - 1].push(t);
+                                }
+                            }
+                            return acc;
+                        }, [[]]);
+                        const value = colorMix(children[0][1], children[0][2], children[1][0], children[1][1], children[2][0], children[2][1]);
+                        if (value != null) {
+                            Object.assign(token, value);
+                            delete token.cal;
+                        }
+                        else if (!token.chi.some(t => t.typ == EnumToken.CommaTokenType)) {
+                            token.chi = children.reduce((acc, curr, index) => {
+                                if (acc.length > 0) {
+                                    acc.push({ typ: EnumToken.CommaTokenType });
+                                }
+                                acc.push(...curr);
+                                return acc;
+                            }, []);
+                        }
+                    }
+                    if (token.cal == 'rel' && ['rgb', 'hsl', 'hwb', 'lab', 'lch', 'oklab', 'oklch', 'color'].includes(token.val.toLowerCase())) {
+                        const chi = getComponents(token);
+                        const offset = token.val == 'color' ? 2 : 1;
+                        if (chi != null) {
+                            // @ts-ignore
+                            const color = chi[1];
+                            const components = parseRelativeColor(token.val == 'color' ? chi[offset].val : token.val, color, chi[offset + 1], chi[offset + 2], chi[offset + 3], chi[offset + 4]);
+                            if (components != null) {
+                                token.chi = [...(token.val == 'color' ? [chi[offset]] : []), ...Object.values(components)];
+                                delete token.cal;
+                            }
+                        }
+                    }
+                    if ('color'.localeCompare(token.val, undefined, { sensitivity: 'base' }) == 0) {
+                        if (token.chi[0].typ == EnumToken.IdenTokenType && colorFuncColorSpace.includes(token.chi[0].val.toLowerCase())) {
+                            const values = color2srgbvalues(token);
+                            if (Array.isArray(values) && values.every(t => !Number.isNaN(t))) {
+                                const replacement = {
+                                    typ: EnumToken.ColorTokenType,
+                                    // @ts-ignore
+                                    val: reduceHexValue(srgb2hexvalues(...values)),
+                                    kin: ColorKind.HEX
+                                };
+                                if (replacement.val.at(0) != '#') {
+                                    replacement.kin = ColorKind.LIT;
+                                }
+                                replaceNode(token, replacement, parent);
+                            }
+                        }
+                    }
+                    if (token.cal != null) {
+                        let slice = false;
+                        if (token.cal == 'rel') {
+                            const last = token.chi.at(-1);
+                            if ((last.typ == EnumToken.NumberTokenType && last.val == '1') || (last.typ == EnumToken.IdenTokenType && last.val == 'none')) {
+                                const prev = token.chi.at(-2);
+                                if (prev.typ == EnumToken.LiteralTokenType && prev.val == '/') {
+                                    slice = true;
+                                }
+                            }
+                        }
+                        clamp(token);
+                        token.chi = (slice ? token.chi.slice(0, -2) : token.chi).reduce((acc, curr) => {
+                            if (curr.typ == EnumToken.LiteralTokenType || curr.typ == EnumToken.CommaTokenType || curr.typ == EnumToken.WhitespaceTokenType) {
+                                if (acc.at(-1)?.typ == EnumToken.WhitespaceTokenType) {
+                                    acc.pop();
+                                }
+                                if (curr.typ == EnumToken.WhitespaceTokenType && [EnumToken.LiteralTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType].includes(acc.at(-1)?.typ)) {
+                                    return acc;
+                                }
+                                return acc.concat([curr]);
+                            }
+                            if (acc.length > 0 && ![EnumToken.LiteralTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType].includes(acc.at(-1)?.typ)) {
+                                acc.push({ typ: EnumToken.WhitespaceTokenType });
+                            }
+                            return acc.concat([curr]);
+                        }, []);
+                    }
+                    if (token.kin == ColorKind.LIT && token.val.localeCompare('currentcolor', undefined, { sensitivity: 'base' }) == 0) {
+                        break;
+                    }
+                    clamp(token);
+                    if (Array.isArray(token.chi) && token.chi.some((t) => t.typ == EnumToken.FunctionTokenType || (t.typ == EnumToken.ColorTokenType && Array.isArray(t.chi)))) {
+                        const replaceSemiColon = /^((rgba?)|(hsla?)|(hwb)|((ok)?lab)|((ok)?lch))$/i.test(token.val);
+                        if (/a$/i.test(token.val)) {
+                            token.val = token.val.slice(0, -1);
+                        }
+                        token.chi = token.chi.reduce((acc, curr, index, array) => {
+                            if (curr.typ == EnumToken.LiteralTokenType || curr.typ == EnumToken.CommaTokenType || curr.typ == EnumToken.WhitespaceTokenType) {
+                                if (acc.at(-1)?.typ == EnumToken.WhitespaceTokenType) {
+                                    acc.pop();
+                                }
+                                if (curr.typ == EnumToken.WhitespaceTokenType && [EnumToken.LiteralTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType].includes(acc.at(-1)?.typ)) {
+                                    return acc;
+                                }
+                                return acc.concat([curr.typ == EnumToken.CommaTokenType && replaceSemiColon ? { typ: EnumToken.WhitespaceTokenType } : curr]);
+                            }
+                            if (acc.length > 0 && ![EnumToken.LiteralTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType].includes(acc.at(-1)?.typ)) {
+                                acc.push({ typ: EnumToken.WhitespaceTokenType });
+                            }
+                            return acc.concat([curr]);
+                        }, []);
+                        // break;
+                    }
+                    let value = token.kin == ColorKind.HEX ? token.val.toLowerCase() : (token.kin == ColorKind.LIT ? COLORS_NAMES[token.val.toLowerCase()] : '');
+                    const val = token.val.toLowerCase();
+                    if (/rgba?/i.test(val)) {
+                        value = rgb2hex(token);
+                    }
+                    else if (/hsla?/i.test(val)) {
+                        value = hsl2hex(token);
+                    }
+                    else if (val == 'hwb') {
+                        value = hwb2hex(token);
+                    }
+                    else if (val == 'device-cmyk') {
+                        value = cmyk2hex(token);
+                    }
+                    else if (val == 'oklab') {
+                        value = oklab2hex(token);
+                    }
+                    else if (val == 'oklch') {
+                        value = oklch2hex(token);
+                    }
+                    else if (val == 'lab') {
+                        value = lab2hex(token);
+                    }
+                    else if (val == 'lch') {
+                        value = lch2hex(token);
+                    }
+                    if (value !== '' && value != null) {
+                        const replacement = {
+                            typ: EnumToken.ColorTokenType,
+                            kin: ColorKind.HEX,
+                            val: value
+                        };
+                        if (replacement.val.at(0) != '#') {
+                            replacement.kin = ColorKind.LIT;
+                        }
+                        else {
+                            replacement.val = reduceHexValue(replacement.val);
+                        }
+                        replaceNode(token, replacement, parent);
+                        break;
+                    }
+                    if (Array.isArray(token.chi)) {
+                        if (/a$/.test(token.val)) {
+                            token.val = token.val.slice(0, -1);
+                        }
+                    }
+                    break;
+            }
+        }
+        filterValues(ast.val);
+    }
+}
+
+export { ValuesFeature };
diff --git a/dist/lib/ast/types.js b/dist/lib/ast/types.js
index 9f98fe16..a01f04dd 100644
--- a/dist/lib/ast/types.js
+++ b/dist/lib/ast/types.js
@@ -9,8 +9,17 @@ var SyntaxValidationResult;
  */
 var ValidationLevel;
 (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
 })(ValidationLevel || (ValidationLevel = {}));
 /**
diff --git a/dist/lib/ast/utils/utils.js b/dist/lib/ast/utils/utils.js
new file mode 100644
index 00000000..359a5b8f
--- /dev/null
+++ b/dist/lib/ast/utils/utils.js
@@ -0,0 +1,104 @@
+import { funcLike, ColorKind } from '../../renderer/color/utils/constants.js';
+import { EnumToken } from '../types.js';
+import '../minify.js';
+import '../walk.js';
+import '../../parser/parse.js';
+import '../../parser/tokenize.js';
+import '../../parser/utils/config.js';
+import '../../renderer/sourcemap/lib/encode.js';
+import { minmax } from '../../renderer/color/color.js';
+
+function reduceNumber(val) {
+    val = String(+val);
+    if (val === '0') {
+        return '0';
+    }
+    const chr = val.charAt(0);
+    if (chr == '-') {
+        const slice = val.slice(0, 2);
+        if (slice == '-0') {
+            return val.length == 2 ? '0' : '-' + val.slice(2);
+        }
+    }
+    if (chr == '0') {
+        return val.slice(1);
+    }
+    return val;
+}
+/**
+ * clamp color values
+ * @param token
+ */
+function clamp(token) {
+    if (token.kin == ColorKind.RGB || token.kin == ColorKind.RGBA) {
+        token.chi.filter((token) => ![EnumToken.LiteralTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType].includes(token.typ)).forEach((token, index) => {
+            if (index <= 2) {
+                if (token.typ == EnumToken.NumberTokenType) {
+                    token.val = String(minmax(+token.val, 0, 255));
+                }
+                else if (token.typ == EnumToken.PercentageTokenType) {
+                    token.val = String(minmax(+token.val, 0, 100));
+                }
+            }
+            else {
+                if (token.typ == EnumToken.NumberTokenType) {
+                    token.val = String(minmax(+token.val, 0, 1));
+                }
+                else if (token.typ == EnumToken.PercentageTokenType) {
+                    token.val = String(minmax(+token.val, 0, 100));
+                }
+            }
+        });
+    }
+    return token;
+}
+function getNumber(token) {
+    if (token.typ == EnumToken.IdenTokenType && token.val == 'none') {
+        return 0;
+    }
+    // @ts-ignore
+    return token.typ == EnumToken.PercentageTokenType ? token.val / 100 : +token.val;
+}
+/**
+ * convert angle to turn
+ * @param token
+ */
+function getAngle(token) {
+    if (token.typ == EnumToken.IdenTokenType) {
+        if (token.val == 'none') {
+            return 0;
+        }
+    }
+    if (token.typ == EnumToken.AngleTokenType) {
+        switch (token.unit) {
+            case 'deg':
+                // @ts-ignore
+                return token.val / 360;
+            case 'rad':
+                // @ts-ignore
+                return token.val / (2 * Math.PI);
+            case 'grad':
+                // @ts-ignore
+                return token.val / 400;
+            case 'turn':
+                // @ts-ignore
+                return +token.val;
+        }
+    }
+    // @ts-ignore
+    return token.val / 360;
+}
+function filterValues(values) {
+    let i = 0;
+    for (; i < values.length; i++) {
+        if (values[i].typ == EnumToken.ImportantTokenType && values[i - 1]?.typ == EnumToken.WhitespaceTokenType) {
+            values.splice(i - 1, 1);
+        }
+        else if (funcLike.includes(values[i].typ) && !['var', 'calc'].includes(values[i].val) && values[i + 1]?.typ == EnumToken.WhitespaceTokenType) {
+            values.splice(i + 1, 1);
+        }
+    }
+    return values;
+}
+
+export { clamp, filterValues, getAngle, getNumber, reduceNumber };
diff --git a/dist/lib/parser/parse.js b/dist/lib/parser/parse.js
index c5908505..4b7e860b 100644
--- a/dist/lib/parser/parse.js
+++ b/dist/lib/parser/parse.js
@@ -83,11 +83,13 @@ async function doParse(iterator, options = {}) {
     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: EnumToken.StyleSheetNodeType,
@@ -133,7 +135,7 @@ async function doParse(iterator, options = {}) {
             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) {
@@ -172,7 +174,7 @@ async function doParse(iterator, options = {}) {
             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;
@@ -193,7 +195,7 @@ async function doParse(iterator, options = {}) {
         }
     }
     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 == EnumToken.AtRuleNodeType && node.nam == 'import') {
@@ -218,7 +220,6 @@ async function doParse(iterator, options = {}) {
             const url = token.typ == 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,
@@ -226,6 +227,7 @@ async function doParse(iterator, options = {}) {
                     }));
                 });
                 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);
@@ -317,7 +319,7 @@ function getLastNode(context) {
     }
     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);
@@ -545,9 +547,11 @@ function parseNode(results, context, stats, options, errors, src, map, rawTokens
                 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 {
@@ -585,11 +589,9 @@ function parseNode(results, context, stats, options, errors, src, map, rawTokens
                         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) => {
@@ -621,7 +623,6 @@ function parseNode(results, context, stats, options, errors, src, map, rawTokens
             // @ts-ignore
             context.chi.push(node);
             Object.defineProperty(node, 'parent', { ...definedPropertySettings, value: context });
-            // if (options.validation) {
             // @ts-ignore
             const valid = options.validation == ValidationLevel.None ? {
                 valid: SyntaxValidationResult.Valid,
@@ -638,24 +639,10 @@ function parseNode(results, context, stats, options, errors, src, map, rawTokens
                     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 {
@@ -705,9 +692,7 @@ function parseNode(results, context, stats, options, errors, src, map, rawTokens
                                 parseColor(tokens[i]);
                             }
                         }
-                        tokens.splice(i, 0, { typ: EnumToken.ColonTokenType });
-                        // i++;
-                        i--;
+                        tokens.splice(i--, 0, { typ: EnumToken.ColonTokenType });
                         continue;
                     }
                     if ('chi' in tokens[i]) {
@@ -792,10 +777,12 @@ function parseNode(results, context, stats, options, errors, src, map, rawTokens
             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 == 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) {
                         errors.push({
                             action: 'drop',
@@ -1590,12 +1577,6 @@ function parseTokens(tokens, options = {}) {
                     if (t.chi[0].val.slice(1, 5) != 'data:' && urlTokenMatcher.test(value)) {
                         // @ts-ignore
                         t.chi[0].typ = 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;
                     }
@@ -1648,4 +1629,4 @@ function parseTokens(tokens, options = {}) {
     return tokens;
 }
 
-export { doParse, parseAtRulePrelude, parseSelector, parseString, parseTokens, urlTokenMatcher };
+export { doParse, getTokenType, parseAtRulePrelude, parseSelector, parseString, parseTokens, urlTokenMatcher };
diff --git a/dist/lib/validation/config.json.js b/dist/lib/validation/config.json.js
index 29bdf40d..bafedcf6 100644
--- a/dist/lib/validation/config.json.js
+++ b/dist/lib/validation/config.json.js
@@ -170,9 +170,6 @@ var declarations = {
 	"-moz-force-broken-image-icon": {
 		syntax: "0 | 1"
 	},
-	"-moz-image-region": {
-		syntax: "<shape> | auto"
-	},
 	"-moz-orient": {
 		syntax: "inline | block | horizontal | vertical"
 	},
@@ -339,7 +336,7 @@ var declarations = {
 		syntax: "<single-animation-direction>#"
 	},
 	"animation-duration": {
-		syntax: "<time>#"
+		syntax: "[ auto | <time [0s,∞]> ]#"
 	},
 	"animation-fill-mode": {
 		syntax: "<single-animation-fill-mode>#"
@@ -792,7 +789,7 @@ var declarations = {
 		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'> ]"
@@ -1191,7 +1188,7 @@ var declarations = {
 		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'>"
@@ -1200,7 +1197,7 @@ var declarations = {
 		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'>"
@@ -1212,7 +1209,7 @@ var declarations = {
 		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"
@@ -1269,7 +1266,7 @@ var declarations = {
 		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"
@@ -1290,10 +1287,10 @@ var declarations = {
 		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"
@@ -1809,7 +1806,7 @@ var declarations = {
 		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>"
diff --git a/dist/lib/validation/parser/parse.js b/dist/lib/validation/parser/parse.js
index 632df9a4..2c27199b 100644
--- a/dist/lib/validation/parser/parse.js
+++ b/dist/lib/validation/parser/parse.js
@@ -1,5 +1,13 @@
 import { ValidationTokenEnum } from './types.js';
 import { isIdent, isPseudo } from '../../syntax/syntax.js';
+import { getTokenType as getTokenType$1 } from '../../parser/parse.js';
+import '../../parser/tokenize.js';
+import '../../parser/utils/config.js';
+import { EnumToken } from '../../ast/types.js';
+import '../../ast/minify.js';
+import '../../ast/walk.js';
+import '../../renderer/color/utils/constants.js';
+import '../../renderer/sourcemap/lib/encode.js';
 
 var WalkValidationTokenEnum;
 (function (WalkValidationTokenEnum) {
@@ -878,7 +886,7 @@ function getTokenType(token, position, currentPosition) {
     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) {
@@ -890,10 +898,12 @@ function getTokenType(token, position, currentPosition) {
             throw new Error('invalid token at position: ' + position.lin + ':' + position.col + ' ' + token);
         }
         if (match[2] != null) {
+            const type = getTokenType$1(match[3]);
             return Object.defineProperty({
                 typ: ValidationTokenEnum.PropertyType,
-                val: match[1],
-                range: [+match[3], match[4] == '\u221e' ? Infinity : +match[4]]
+                val: type.val,
+                unit: EnumToken[type.typ],
+                range: [+type.val, match[4] == '\u221e' ? Infinity : +match[4]]
             }, 'pos', { ...objectProperties, value: pos });
         }
         return Object.defineProperty({
diff --git a/dist/lib/validation/syntax.js b/dist/lib/validation/syntax.js
index d8dfb85a..6381a11b 100644
--- a/dist/lib/validation/syntax.js
+++ b/dist/lib/validation/syntax.js
@@ -37,11 +37,24 @@ function createContext(input) {
             // @ts-ignore
             const newIndex = result.indexOf(context.current());
             if (newIndex != -1) {
-                // console.error({newIndex, v: result[newIndex]});
-                // console.error(new Error('update'))
                 this.index = newIndex;
             }
         },
+        consume(token, howMany) {
+            let newIndex = result.indexOf(token, this.index + 1);
+            if (newIndex == -1) {
+                return false;
+            }
+            howMany ??= 0;
+            let splice = 1;
+            if (result[newIndex - 1]?.typ == 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;
         },
@@ -158,6 +171,8 @@ function doEvaluateSyntax(syntaxes, context, options) {
     let i = 0;
     let result;
     let token = null;
+    // console.error(`doEvaluateSyntax: ${syntaxes.reduce((acc, curr) => acc + renderSyntax(curr), '')}`, context.peek());
+    // console.error(new Error('anyOf'));
     for (; i < syntaxes.length; i++) {
         syntax = syntaxes[i];
         if (context.done()) {
@@ -760,11 +775,23 @@ function anyOf(syntaxes, context, options) {
 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 == EnumToken.FunctionTokenType && wildCardFuncs.includes(slice[i].val.toLowerCase())) {
             vars.push(slice[i]);
@@ -791,7 +818,43 @@ function allOf(syntax, context, options) {
         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.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);
diff --git a/jsr.json b/jsr.json
index 3448d58a..639c6208 100644
--- a/jsr.json
+++ b/jsr.json
@@ -1,6 +1,6 @@
 {
   "name": "@tbela99/css-parser",
-  "version": "1.1.0",
+  "version": "1.1.1-alpha1",
   "publish": {
     "include": [
       "src",
diff --git a/package.json b/package.json
index ac277fd9..e7ddb76e 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@tbela99/css-parser",
   "description": "CSS parser for node and the browser",
-  "version": "v1.1.0",
+  "version": "v1.1.1-alpha1",
   "exports": {
     ".": "./dist/node/index.js",
     "./node": "./dist/node/index.js",
diff --git a/src/@types/index.d.ts b/src/@types/index.d.ts
index 827bb874..d7864b3d 100644
--- a/src/@types/index.d.ts
+++ b/src/@types/index.d.ts
@@ -128,15 +128,20 @@ export declare interface TransformOptions extends ParserOptions, RenderOptions {
 
 }
 
+export declare interface ParseResultStats {
+    src: string;
+    bytesIn: number;
+    importedBytesIn: number;
+    parse: string;
+    minify: string;
+    total: string;
+    imports: ParseResultStats[]
+}
+
 export declare interface ParseResult {
     ast: AstRuleStyleSheet;
     errors: ErrorDescription[];
-    stats: {
-        bytesIn: number;
-        parse: string;
-        minify: string;
-        total: string;
-    }
+    stats: ParseResultStats
 }
 
 export declare interface RenderResult {
@@ -151,12 +156,15 @@ export declare interface RenderResult {
 export declare interface TransformResult extends ParseResult, RenderResult {
 
     stats: {
+        src: string;
         bytesIn: number;
         bytesOut: number;
+        importedBytesIn: number;
         parse: string;
         minify: string;
         render: string;
         total: string;
+        imports: ParseResultStats[];
     }
 }
 
diff --git a/src/@types/validation.d.ts b/src/@types/validation.d.ts
index 099f457e..08a104e7 100644
--- a/src/@types/validation.d.ts
+++ b/src/@types/validation.d.ts
@@ -55,6 +55,8 @@ export interface Context<Type> {
 
     tokens<Type>(): Type[];
 
+    consume<Type>(token: Type, howMany?: number): boolean;
+
     slice<Type>(): Type[];
 
     clone<Type>(): Context<Type>;
diff --git a/src/lib/parser/parse.ts b/src/lib/parser/parse.ts
index a59b1ae1..33cc8d1e 100644
--- a/src/lib/parser/parse.ts
+++ b/src/lib/parser/parse.ts
@@ -88,6 +88,7 @@ import type {
     ParensStartToken,
     ParensToken,
     ParseResult,
+    ParseResultStats,
     ParserOptions,
     ParseTokenOptions,
     PercentageToken,
@@ -191,12 +192,14 @@ export async function doParse(iterator: string, options: ParserOptions = {}): Pr
     const errors: ErrorDescription[] = [];
     const src: string = <string>options.src;
     const stack: Array<AstNode | AstComment> = [];
-    const stats = {
+    const stats: ParseResultStats = {
+        src: options.src ?? '',
         bytesIn: 0,
         importedBytesIn: 0,
         parse: `0ms`,
         minify: `0ms`,
-        total: `0ms`
+        total: `0ms`,
+        imports: []
     };
 
     let ast: AstRuleStyleSheet = {
@@ -258,7 +261,7 @@ export async function doParse(iterator: string, options: ParserOptions = {}): Pr
 
         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) {
@@ -315,7 +318,7 @@ export async function doParse(iterator: string, options: ParserOptions = {}): Pr
             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) {
@@ -349,7 +352,7 @@ export async function doParse(iterator: string, options: ParserOptions = {}): Pr
 
     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) {
@@ -387,8 +390,6 @@ export async function doParse(iterator: string, options: ParserOptions = {}): Pr
 
                 const root: ParseResult = await options.load!(url, <string>options.src).then((src: string) => {
 
-                    // console.error({url, src: options.src, resolved: options.resolve!(url, options.src as string)})
-
                     return doParse(src, Object.assign({}, options, {
                         minify: false,
                         setParent: false,
@@ -397,9 +398,12 @@ export async function doParse(iterator: string, options: ParserOptions = {}): Pr
                 });
 
                 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);
                 }
 
@@ -534,10 +538,7 @@ function getLastNode(context: AstRuleList | AstInvalidRule | AstInvalidAtRule):
     return null;
 }
 
-function parseNode(results: TokenizeResult[], context: AstRuleList | AstInvalidRule | AstInvalidAtRule, stats: {
-    bytesIn: number;
-    importedBytesIn: number;
-}, options: ParserOptions, errors: ErrorDescription[], src: string, map: Map<Token, Location>, rawTokens: TokenizeResult[]): AstRule | AstAtRule | AstKeyFrameRule | AstKeyframAtRule | AstInvalidRule | AstDeclaration | AstComment | null {
+function parseNode(results: TokenizeResult[], context: AstRuleList | AstInvalidRule | AstInvalidAtRule, options: ParserOptions, errors: ErrorDescription[], src: string, map: Map<Token, Location>, rawTokens: TokenizeResult[]): AstRule | AstAtRule | AstKeyFrameRule | AstKeyframAtRule | AstInvalidRule | AstDeclaration | AstComment | null {
 
     let tokens: Token[] = [] as Token[];
 
@@ -804,62 +805,64 @@ function parseNode(results: TokenizeResult[], context: AstRuleList | AstInvalidR
 
         // if (options.validation) {
 
-            let isValid: boolean = true;
+        let isValid: boolean = true;
 
-            if (node.nam == 'else') {
+        if (node.nam == 'else') {
 
-                const prev = getLastNode(context);
+            const prev = getLastNode(context);
 
-                if (prev != null && prev.typ == EnumToken.AtRuleNodeType && ['when', 'else'].includes((<AstAtRule>prev).nam)) {
+            if (prev != null && prev.typ == EnumToken.AtRuleNodeType && ['when', 'else'].includes((<AstAtRule>prev).nam)) {
 
-                    if ((<AstAtRule>prev).nam == 'else') {
+                if ((<AstAtRule>prev).nam == 'else') {
 
-                        isValid = Array.isArray((<AstAtRule>prev).tokens) && ((<AstAtRule>prev).tokens as Token[]).length > 0;
-                    }
-                } else {
-
-                    isValid = false;
+                    isValid = Array.isArray((<AstAtRule>prev).tokens) && ((<AstAtRule>prev).tokens as Token[]).length > 0;
                 }
-            }
-
-            // @ts-ignore
-            const valid: ValidationResult = options.validation == ValidationLevel.None ? {
-                valid: SyntaxValidationResult.Valid,
-                error: '',
-                matches: [] ,
-                node,
-                syntax: '@' + node.nam
-            } as ValidationResult : isValid ? (node.typ == EnumToken.KeyframeAtRuleNodeType ? validateAtRuleKeyframes(<AstKeyframAtRule>node, options, context as AstNode) : validateAtRule(node, options, context as AstNode)) : {
-                valid: SyntaxValidationResult.Drop,
-                node,
-                matches: [] as Token[],
-                syntax: '@' + node.nam,
-                error: '@' + node.nam + ' not allowed here',
-                tokens
-            } as ValidationResult;
-
-            if (valid.valid == SyntaxValidationResult.Drop) {
+            } else {
 
-                errors.push({
-                    action: 'drop',
-                    message: valid.error + ' - "' + tokens.reduce((acc, curr) => acc + renderToken(curr, {minify: false}), '') + '"',
-                    // @ts-ignore
-                    location: {src, ...(map.get(valid.node) ?? location)}
-                });
+                isValid = false;
+            }
+        }
 
+        // @ts-ignore
+        const valid: ValidationResult = options.validation == ValidationLevel.None ? {
+            valid: SyntaxValidationResult.Valid,
+            error: '',
+            matches: [],
+            node,
+            syntax: '@' + node.nam
+        } as ValidationResult : isValid ? (node.typ == EnumToken.KeyframeAtRuleNodeType ? validateAtRuleKeyframes(<AstKeyframAtRule>node, options, context as AstNode) : validateAtRule(node, options, context as AstNode)) : {
+            valid: SyntaxValidationResult.Drop,
+            node,
+            matches: [] as Token[],
+            syntax: '@' + node.nam,
+            error: '@' + node.nam + ' not allowed here',
+            tokens
+        } as ValidationResult;
+
+        if (valid.valid == SyntaxValidationResult.Drop) {
+
+            errors.push({
+                action: 'drop',
+                message: valid.error + ' - "' + tokens.reduce((acc, curr) => acc + renderToken(curr, {minify: false}), '') + '"',
                 // @ts-ignore
-                node.typ = EnumToken.InvalidAtRuleTokenType;
-            } else {
+                location: {src, ...(map.get(valid.node) ?? location)}
+            });
 
-                node.val = (node.tokens as Token[]).reduce((acc, curr) => acc + renderToken(curr, {
-                    minify: false,
-                    removeComments: true
-                }), '');
-            }
-        // }
+            // @ts-ignore
+            node.typ = EnumToken.InvalidAtRuleTokenType;
+        } else {
+
+            node.val = (node.tokens as Token[]).reduce((acc, curr) => acc + renderToken(curr, {
+                minify: false,
+                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 {
@@ -915,11 +918,9 @@ function parseNode(results: TokenizeResult[], context: AstRuleList | AstInvalidR
                     if (t == ',') {
 
                         acc.push([]);
-                        // uniqTokens.push([]);
                     } else {
 
                         acc[acc.length - 1].push(t);
-                        // uniqTokens[uniqTokens.length - 1].push(curr);
                     }
                     return acc;
                 }, [[]]).reduce((acc: Map<string, string[]>, curr: string[]) => {
@@ -964,48 +965,32 @@ function parseNode(results: TokenizeResult[], context: AstRuleList | AstInvalidR
             context.chi.push(node);
             Object.defineProperty(node, 'parent', {...definedPropertySettings, value: context});
 
-            // if (options.validation) {
+            // @ts-ignore
+            const valid: ValidationResult = options.validation == ValidationLevel.None ? {
+                valid: SyntaxValidationResult.Valid,
+                node,
+                matches: [], syntax: null,
+                error: null
+            } as ValidationResult : ruleType == EnumToken.KeyFrameRuleNodeType ? validateKeyframeSelector(tokens, options) : validateSelector(tokens, options, context as AstNode);
+
+            if (valid.valid != SyntaxValidationResult.Valid) {
 
                 // @ts-ignore
-                const valid: ValidationResult = options.validation == ValidationLevel.None ? {
-                    valid: SyntaxValidationResult.Valid,
-                    node,
-                    matches: [], syntax: null,
-                    error: null
-                } as ValidationResult : ruleType == EnumToken.KeyFrameRuleNodeType ? validateKeyframeSelector(tokens, options) : validateSelector(tokens, options, context as AstNode);
-
-                if (valid.valid != SyntaxValidationResult.Valid) {
+                node.typ = EnumToken.InvalidRuleTokenType;
+                node.sel = tokens.reduce((acc: string, curr: Token) => acc + renderToken(curr, {minify: false}), '');
 
+                errors.push({
+                    action: 'drop',
+                    message: valid.error + ' - "' + tokens.reduce((acc, curr) => acc + renderToken(curr, {minify: false}), '') + '"',
                     // @ts-ignore
-                    node.typ = EnumToken.InvalidRuleTokenType;
-                    node.sel = tokens.reduce((acc: string, curr: Token) => acc + renderToken(curr, {minify: false}), '');
+                    location
+                });
+            }
 
-                    errors.push({
-                        action: 'drop',
-                        message: valid.error + ' - "' + tokens.reduce((acc, curr) => acc + renderToken(curr, {minify: false}), '') + '"',
-                        // @ts-ignore
-                        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 {
 
@@ -1074,9 +1059,7 @@ function parseNode(results: TokenizeResult[], context: AstRuleList | AstInvalidR
                             }
                         }
 
-                        tokens.splice(i, 0, {typ: EnumToken.ColonTokenType});
-                        // i++;
-                        i--;
+                        tokens.splice(i--, 0, {typ: EnumToken.ColonTokenType});
                         continue;
                     }
 
@@ -1199,13 +1182,14 @@ function parseNode(results: TokenizeResult[], context: AstRuleList | AstInvalidR
 
             if (result != null) {
 
-                // console.error(doRender(result), result.val, location);
-
                 if (options.validation == ValidationLevel.All) {
 
                     const valid: ValidationSyntaxResult = evaluateSyntax(result, options, context as AstNode);
 
-                    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) {
 
@@ -1718,7 +1702,7 @@ export function parseString(src: string, options: { location: boolean } = {locat
     }, [] as Token[]));
 }
 
-function getTokenType(val: string, hint?: EnumToken): Token {
+export function getTokenType(val: string, hint?: EnumToken): Token {
 
     if (hint != null) {
 
@@ -2266,14 +2250,6 @@ export function parseTokens(tokens: Token[], options: ParseTokenOptions = {}): T
                         // @ts-ignore
                         (t as FunctionURLToken).chi[0].typ = 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 as FunctionURLToken).chi[0].val = options.src !== '' && options.resolveUrls ? options.resolve(value, options.src).absolute : value;
                     }
diff --git a/src/lib/validation/config.json b/src/lib/validation/config.json
index 391ea5d5..5696257c 100644
--- a/src/lib/validation/config.json
+++ b/src/lib/validation/config.json
@@ -171,9 +171,6 @@
   "-moz-force-broken-image-icon": {
    "syntax": "0 | 1"
   },
-  "-moz-image-region": {
-   "syntax": "<shape> | auto"
-  },
   "-moz-orient": {
    "syntax": "inline | block | horizontal | vertical"
   },
@@ -340,7 +337,7 @@
    "syntax": "<single-animation-direction>#"
   },
   "animation-duration": {
-   "syntax": "<time>#"
+   "syntax": "[ auto | <time [0s,∞]> ]#"
   },
   "animation-fill-mode": {
    "syntax": "<single-animation-fill-mode>#"
@@ -793,7 +790,7 @@
    "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'> ]"
@@ -1192,7 +1189,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'>"
@@ -1201,7 +1198,7 @@
    "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'>"
@@ -1213,7 +1210,7 @@
    "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"
@@ -1270,7 +1267,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"
@@ -1291,10 +1288,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"
@@ -1810,7 +1807,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>"
diff --git a/src/lib/validation/parser/parse.ts b/src/lib/validation/parser/parse.ts
index 9c5ae4e1..41d484b8 100644
--- a/src/lib/validation/parser/parse.ts
+++ b/src/lib/validation/parser/parse.ts
@@ -45,6 +45,9 @@ import {
     ValidationWhitespaceToken
 } from "./index.ts";
 import {isIdent, isPseudo} from '../../syntax/index.ts';
+import {getTokenType as getTokenType$1} from '../../parser/index.ts';
+import type {DimensionToken} from "../../../@types/token.d.ts";
+import {EnumToken} from "../../ast/index.ts";
 
 export enum WalkValidationTokenEnum {
 
@@ -1310,7 +1313,7 @@ function getTokenType(token: string, position: Position, currentPosition: Positi
 
         // <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) {
 
@@ -1329,10 +1332,13 @@ function getTokenType(token: string, position: Position, currentPosition: Positi
 
         if (match[2] != null) {
 
+            const type = getTokenType$1(match[3]) as DimensionToken;
+
             return <ValidationPropertyToken>Object.defineProperty({
                 typ: ValidationTokenEnum.PropertyType,
-                val: match[1],
-                range: [+match[3], match[4] == '\u221e' ? Infinity : +match[4]]
+                val: type.val,
+                unit: EnumToken[type.typ],
+                range: [+type.val, match[4] == '\u221e' ? Infinity : +match[4]]
             }, 'pos', {...objectProperties, value: pos});
         }
 
diff --git a/src/lib/validation/parser/types.ts b/src/lib/validation/parser/types.ts
index 5244f659..de8a3820 100644
--- a/src/lib/validation/parser/types.ts
+++ b/src/lib/validation/parser/types.ts
@@ -1,3 +1,5 @@
+import {EnumToken} from "../../ast/index.ts";
+
 export enum ValidationTokenEnum {
 
     Root,
@@ -253,6 +255,7 @@ export interface ValidationDeclarationToken extends ValidationToken {
 export interface ValidationPropertyToken extends ValidationToken {
 
     typ: ValidationTokenEnum.PropertyType;
+    unit?: keyof EnumToken;
     range?: [number, number];
     val: string;
 }
diff --git a/src/lib/validation/syntax.ts b/src/lib/validation/syntax.ts
index c36f0ba9..ae0b66ae 100644
--- a/src/lib/validation/syntax.ts
+++ b/src/lib/validation/syntax.ts
@@ -77,11 +77,29 @@ export function createContext(input: Token[]): Context<Token> {
 
             if (newIndex != -1) {
 
-                // console.error({newIndex, v: result[newIndex]});
-                // console.error(new Error('update'))
                 this.index = newIndex;
             }
         },
+        consume<Type>(token: Type, howMany?: number): boolean {
+
+            let newIndex: number = result.indexOf(token as Token, this.index + 1);
+            if (newIndex == -1) {
+                return false;
+            }
+
+            howMany ??= 0;
+
+            let splice: number = 1;
+
+            if (result[newIndex - 1]?.typ == EnumToken.WhitespaceTokenType) {
+                splice++;
+                newIndex--;
+            }
+
+            result.splice(this.index + 1, 0, ...result.splice(newIndex, splice + howMany));
+            this.index += howMany + splice;
+            return true;
+        },
         done(): boolean {
 
             return this.index + 1 >= result.length;
@@ -253,6 +271,9 @@ export function doEvaluateSyntax(syntaxes: ValidationToken[], context: Context<T
     let result: ValidationSyntaxResult;
     let token: Token | null = null;
 
+    // console.error(`doEvaluateSyntax: ${syntaxes.reduce((acc, curr) => acc + renderSyntax(curr), '')}`, context.peek());
+    // console.error(new Error('anyOf'));
+
     for (; i < syntaxes.length; i++) {
 
         syntax = syntaxes[i];
@@ -756,7 +777,7 @@ function match(syntax: ValidationToken, context: Context<Token>, options: Valida
                 break;
             }
 
-            // throw new Error(`Not implemented: ${ValidationTokenEnum[syntax.typ] ?? syntax.typ} : ${renderSyntax(syntax)} : ${renderToken(context.peek() as Token)} : ${JSON.stringify(syntax, null, 1)} | ${JSON.stringify(context.peek(), null, 1)}`);
+        // throw new Error(`Not implemented: ${ValidationTokenEnum[syntax.typ] ?? syntax.typ} : ${renderSyntax(syntax)} : ${renderToken(context.peek() as Token)} : ${JSON.stringify(syntax, null, 1)} | ${JSON.stringify(context.peek(), null, 1)}`);
     }
 
     if (!success && token.typ == EnumToken.IdenTokenType && allValues.includes((token as IdentToken).val.toLowerCase())) {
@@ -1024,7 +1045,7 @@ function matchPropertyType(syntax: ValidationPropertyToken, context: Context<Tok
     if (!success && token.typ == EnumToken.IdenTokenType) {
 
         success = allValues.includes((token as IdentToken).val.toLowerCase());
-   }
+    }
 
     if (success) {
 
@@ -1123,12 +1144,30 @@ function allOf(syntax: ValidationToken[][], context: Context<Token>, options: Va
     let result: ValidationSyntaxResult;
     let i: number;
 
-    // sort tokens -> wildCard -> last
-    // 1px var(...) 2px => 1px 2px var(...)
-    const slice: Token[] = context.slice<Token>();
+    let slice: Token[] = context.slice<Token>();
     const vars: Token[] = [];
     const tokens: Token[] = [];
 
+    const repeatable: ValidationToken[][] = [];
+
+    // 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 == EnumToken.FunctionTokenType && wildCardFuncs.includes((slice[i] as FunctionToken).val.toLowerCase())) {
@@ -1170,9 +1209,64 @@ function allOf(syntax: ValidationToken[][], context: Context<Token>, options: Va
     }
 
     const con: Context<Token> = createContext(tokens);
+    let cp: Context<Token>;
+    let j: number;
 
     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<Token>();
+
+            if (cp.done()) {
+
+                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() as Token);
+
+                    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) {
diff --git a/test/specs/code/validation.js b/test/specs/code/validation.js
index 1c384f86..5e783f61 100644
--- a/test/specs/code/validation.js
+++ b/test/specs/code/validation.js
@@ -496,6 +496,18 @@ html, body, div, span, applet, object, iframe,
 `, {validation: true}).then(result => expect(result.code).equals(`@supports (color:color-mix(in oklab,black,black)){.hsl{color:#00bfff}}`));
         });
 
+        it('supports validation #20', function () {
+            return transform(`a {
+
+  text-shadow: 1px 2px 3px var(--bs-body-color);
+   box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
+
+`, {validation: true, beautify: true}).then(result => expect(result.code).equals(`a {
+ text-shadow: 1px 2px 3px var(--bs-body-color);
+ box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state,var(--bs-table-bg-type,var(--bs-table-accent-bg)))
+}`));
+        });
+
         // failing the CI because of timeout
 //         it('validation #20',  function (done) {
 //
diff --git a/tools/validation.ts b/tools/validation.ts
index fef46f18..1f6f0461 100644
--- a/tools/validation.ts
+++ b/tools/validation.ts
@@ -40,6 +40,7 @@ for (const [key, value] of Object.entries(patches.atrules)) {
 
     if (!(key in json.atRules)) {
 
+        console.error(`>> adding at-rule declarations >> ${key}`);
         json.atRules[key] = {syntax: value.prelude};
     }
 }
@@ -48,11 +49,13 @@ for (const [key, value] of Object.entries(patches.properties)) {
 
     if (!(key in json.declarations)) {
 
+        console.error(`>> adding declarations >> ${key}`);
         json.declarations[key] = {syntax: value.syntax};
     }
 
-    else if (value.comment?.startsWith?.('extended')) {
+    else if (value.comment?.startsWith?.('extend')) {
 
+        console.error(`>> extending declarations >> ${key}`);
         json.declarations[key].syntax += value.syntax;
     }
 }
@@ -61,11 +64,13 @@ for (const [key, value] of Object.entries(patches.types)) {
 
     if (!(key in json.syntaxes)) {
 
+        console.error(`>> adding syntax >> ${key}`);
         json.syntaxes[key] = {syntax: value.syntax};
     }
 
-    else if (value.comment?.startsWith?.('extended')) {
+    else if (value.comment?.startsWith?.('extend')) {
 
+        console.error(`>> extending syntax >> ${key}`);
         json.syntaxes[key].syntax += value.syntax;
     }
 }

From 804df8b3bba132277af04206bb3f4f1be8fb3eb7 Mon Sep 17 00:00:00 2001
From: Thierry Bela Nanga <bnanga@gmail.com>
Date: Sun, 20 Jul 2025 19:14:43 -0400
Subject: [PATCH 3/7] fix text-shadow validation #87

---
 dist/index-umd-web.js               | 100 +++++-----
 dist/index.cjs                      | 100 +++++-----
 dist/index.d.ts                     |   1 -
 dist/lib/ast/features/values.js     | 287 ----------------------------
 dist/lib/parser/parse.js            |   2 +
 dist/lib/validation/config.json.js  |  22 +--
 dist/lib/validation/parser/parse.js |  28 +--
 dist/lib/validation/syntax.js       |  50 +++--
 jsr.json                            |   2 +-
 package.json                        |   7 +-
 src/@types/index.d.ts               |   1 -
 src/lib/ast/features/values.ts      |   0
 src/lib/parser/parse.ts             |   5 +-
 src/lib/validation/config.json      |  22 +--
 src/lib/validation/parser/parse.ts  |  31 +--
 src/lib/validation/syntax.ts        |  72 ++++---
 test/specs/code/validation.js       |  20 +-
 test/specs/local.spec.js            |  13 ++
 test/specs/local/index.js           |   2 +
 test/specs/local/validation.js      |  18 ++
 tools/validation.ts                 |   4 +-
 21 files changed, 259 insertions(+), 528 deletions(-)
 delete mode 100644 dist/lib/ast/features/values.js
 delete mode 100644 src/lib/ast/features/values.ts
 create mode 100644 test/specs/local.spec.js
 create mode 100644 test/specs/local/index.js
 create mode 100644 test/specs/local/validation.js

diff --git a/dist/index-umd-web.js b/dist/index-umd-web.js
index ed555f78..12854e8c 100644
--- a/dist/index-umd-web.js
+++ b/dist/index-umd-web.js
@@ -8172,7 +8172,7 @@
     		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"
@@ -8193,7 +8193,7 @@
     		syntax: "nonzero | evenodd"
     	},
     	filter: {
-    		syntax: "none | <filter-value-list>| <-ms-filter-function-list>"
+    		syntax: "none | <filter-value-list> | <-ms-filter-function-list>"
     	},
     	flex: {
     		syntax: "none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]"
@@ -8388,7 +8388,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?"
@@ -8592,7 +8592,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()>| stretch | <-non-standard-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'>"
@@ -8601,7 +8601,7 @@
     		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()>| stretch | <-non-standard-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'>"
@@ -8613,7 +8613,7 @@
     		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()>| stretch | <-non-standard-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"
@@ -8670,7 +8670,7 @@
     		syntax: "<line-width>"
     	},
     	overflow: {
-    		syntax: "[ visible | hidden | clip | scroll | auto ]{1,2}| <-non-standard-overflow>"
+    		syntax: "[ visible | hidden | clip | scroll | auto ]{1,2} | <-non-standard-overflow>"
     	},
     	"overflow-anchor": {
     		syntax: "auto | none"
@@ -8691,10 +8691,10 @@
     		syntax: "normal | break-word | anywhere"
     	},
     	"overflow-x": {
-    		syntax: "visible | hidden | clip | scroll | auto| <-non-standard-overflow>"
+    		syntax: "visible | hidden | clip | scroll | auto | <-non-standard-overflow>"
     	},
     	"overflow-y": {
-    		syntax: "visible | hidden | clip | scroll | auto| <-non-standard-overflow>"
+    		syntax: "visible | hidden | clip | scroll | auto | <-non-standard-overflow>"
     	},
     	overlay: {
     		syntax: "none | auto"
@@ -8781,7 +8781,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>"
@@ -9210,7 +9210,7 @@
     		syntax: "normal | break-word"
     	},
     	"writing-mode": {
-    		syntax: "horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr| <svg-writing-mode>"
+    		syntax: "horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr | <svg-writing-mode>"
     	},
     	x: {
     		syntax: "<length> | <percentage>"
@@ -11660,20 +11660,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,
@@ -11687,18 +11673,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,
@@ -13383,13 +13357,13 @@
             update(context) {
                 // @ts-ignore
                 const newIndex = result.indexOf(context.current());
-                if (newIndex != -1) {
+                if (newIndex > this.index) {
                     this.index = newIndex;
                 }
             },
             consume(token, howMany) {
                 let newIndex = result.indexOf(token, this.index + 1);
-                if (newIndex == -1) {
+                if (newIndex == -1 || newIndex < this.index) {
                     return false;
                 }
                 howMany ??= 0;
@@ -13426,13 +13400,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) {
@@ -13518,8 +13500,8 @@
         let i = 0;
         let result;
         let token = null;
-        // console.error(`doEvaluateSyntax: ${syntaxes.reduce((acc, curr) => acc + renderSyntax(curr), '')}`, context.peek());
-        // console.error(new Error('anyOf'));
+        // console.error(`>> doEvaluateSyntax: ${syntaxes.reduce((acc, curr) => acc + renderSyntax(curr), '')}`, context.peek());
+        // console.error(new Error('doEvaluateSyntax'));
         for (; i < syntaxes.length; i++) {
             syntax = syntaxes[i];
             if (context.done()) {
@@ -13529,6 +13511,7 @@
                 break;
             }
             token = context.peek();
+            // console.error(`>> doEvaluateSyntax: ${ renderSyntax(syntax)}`, context.peek());
             if (syntax.typ == ValidationTokenEnum.Whitespace) {
                 if (context.peek()?.typ == exports.EnumToken.WhitespaceTokenType) {
                     context.next();
@@ -13562,6 +13545,7 @@
                     clearVisited(token, syntax, 'doEvaluateSyntax', options);
                 }
             }
+            // console.error(`>> doEvaluateSyntax: ${ renderSyntax(syntax)}\nvalid:${result.valid == SyntaxValidationResult.Valid ? 'valid' : 'invalid'}\n`, context.peek());
             if (result.valid == SyntaxValidationResult.Drop) {
                 if (syntax.isOptional) {
                     continue;
@@ -13635,11 +13619,13 @@
                     context
                 };
             }
+            // console.error(`>> matchList: ${tokens.reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
             result = doEvaluateSyntax([syntax], createContext(tokens), {
                 ...options,
                 isList: false,
                 occurence: false
             });
+            // console.error(`>> matchList: ${tokens.reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}\n>> result: ${result.valid == SyntaxValidationResult.Valid ? 'valid' : 'invalid'}\n${JSON.stringify(result, null, 1)}`);
             if (result.valid == SyntaxValidationResult.Valid) {
                 context = con.clone();
                 count++;
@@ -13698,6 +13684,7 @@
         let success = false;
         let result;
         let token = context.peek();
+        // console.error(`>> match: ${renderSyntax(syntax)}`);
         switch (syntax.typ) {
             case ValidationTokenEnum.PipeToken:
                 return someOf(syntax.chi, context, options);
@@ -14075,6 +14062,7 @@
                 context.next();
             }
             result = doEvaluateSyntax(syntaxes[i], context.clone(), options);
+            // console.error(JSON.stringify({result, syntax: syntaxes[i], context, slice: context.slice()}, null, 1));
             if (result.valid == SyntaxValidationResult.Valid) {
                 success = true;
                 if (result.context.done()) {
@@ -14087,6 +14075,7 @@
             // pick the best match
             matched.sort((a, b) => a.context.done() ? -1 : b.context.done() ? 1 : b.context.index - a.context.index);
         }
+        // console.error(JSON.stringify({matched, context, slice: context.slice(), syntaxes}, null, 1));
         return matched[0] ?? {
             valid: SyntaxValidationResult.Drop,
             node: context.current(),
@@ -14142,16 +14131,8 @@
         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;
             }
@@ -14167,15 +14148,22 @@
         const con = createContext(tokens);
         let cp;
         let j;
+        // console.error(`>> allOf:syntax: ${syntax.reduce((acc, curr, index) => acc + (index > 0 ? ' && ' : '') + curr.reduce((acc, curr) => acc + renderSyntax(curr), ''), '')}`);
+        // console.error(`>> allOf:tokens: ${con.slice<Token>().reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
+        // console.error(`>> allOf:tokens:slice: ${context.slice<Token>().reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
         for (i = 0; i < syntax.length; i++) {
+            // console.error(`>> allOf:${i}:${syntax[i].reduce((acc, curr) => acc + renderSyntax(curr), '')}:current()`, con.current());
             if (syntax[i].length == 1 && syntax[i][0].isOptional) {
+                // syntax[i][0 = structuredClone(syntax[i][0]);
                 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;
+                    // console.error(`>> allOf:done:peek: `, con.peek());
                     continue;
                 }
                 while (!cp.done()) {
@@ -14196,8 +14184,12 @@
                 }
                 syntax[i][0].isOptional = true;
                 // @ts-ignore
+                // console.error(`>> allOf:result valid: `, result?.valid == SyntaxValidationResult.Valid, con.current<Token>());
+                // @ts-ignore
                 if (result?.valid == SyntaxValidationResult.Valid) {
                     syntax.splice(i, 1);
+                    // console.error(`>> allOf:syntaxes: ${syntax.reduce((acc, curr, index) => acc + (index > 0 ? ' && ' : '') + curr.reduce((acc, curr) => acc + renderSyntax(curr), ''), '')}`);
+                    // console.error(`>> allOf:context:`, JSON.stringify(con, null, 1));
                     i = -1;
                 }
                 continue;
@@ -16847,6 +16839,8 @@
                             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,
diff --git a/dist/index.cjs b/dist/index.cjs
index 26fa087b..2c45b987 100644
--- a/dist/index.cjs
+++ b/dist/index.cjs
@@ -8171,7 +8171,7 @@ var declarations = {
 		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"
@@ -8192,7 +8192,7 @@ var declarations = {
 		syntax: "nonzero | evenodd"
 	},
 	filter: {
-		syntax: "none | <filter-value-list>| <-ms-filter-function-list>"
+		syntax: "none | <filter-value-list> | <-ms-filter-function-list>"
 	},
 	flex: {
 		syntax: "none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]"
@@ -8387,7 +8387,7 @@ var declarations = {
 		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?"
@@ -8591,7 +8591,7 @@ var declarations = {
 		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()>| stretch | <-non-standard-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'>"
@@ -8600,7 +8600,7 @@ var declarations = {
 		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()>| stretch | <-non-standard-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'>"
@@ -8612,7 +8612,7 @@ var declarations = {
 		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()>| stretch | <-non-standard-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"
@@ -8669,7 +8669,7 @@ var declarations = {
 		syntax: "<line-width>"
 	},
 	overflow: {
-		syntax: "[ visible | hidden | clip | scroll | auto ]{1,2}| <-non-standard-overflow>"
+		syntax: "[ visible | hidden | clip | scroll | auto ]{1,2} | <-non-standard-overflow>"
 	},
 	"overflow-anchor": {
 		syntax: "auto | none"
@@ -8690,10 +8690,10 @@ var declarations = {
 		syntax: "normal | break-word | anywhere"
 	},
 	"overflow-x": {
-		syntax: "visible | hidden | clip | scroll | auto| <-non-standard-overflow>"
+		syntax: "visible | hidden | clip | scroll | auto | <-non-standard-overflow>"
 	},
 	"overflow-y": {
-		syntax: "visible | hidden | clip | scroll | auto| <-non-standard-overflow>"
+		syntax: "visible | hidden | clip | scroll | auto | <-non-standard-overflow>"
 	},
 	overlay: {
 		syntax: "none | auto"
@@ -8780,7 +8780,7 @@ var declarations = {
 		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>"
@@ -9209,7 +9209,7 @@ var declarations = {
 		syntax: "normal | break-word"
 	},
 	"writing-mode": {
-		syntax: "horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr| <svg-writing-mode>"
+		syntax: "horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr | <svg-writing-mode>"
 	},
 	x: {
 		syntax: "<length> | <percentage>"
@@ -11659,20 +11659,6 @@ var ValidationSyntaxGroupEnum;
     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,
@@ -11686,18 +11672,6 @@ const objectProperties = {
     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,
@@ -13492,13 +13466,13 @@ function createContext(input) {
         update(context) {
             // @ts-ignore
             const newIndex = result.indexOf(context.current());
-            if (newIndex != -1) {
+            if (newIndex > this.index) {
                 this.index = newIndex;
             }
         },
         consume(token, howMany) {
             let newIndex = result.indexOf(token, this.index + 1);
-            if (newIndex == -1) {
+            if (newIndex == -1 || newIndex < this.index) {
                 return false;
             }
             howMany ??= 0;
@@ -13535,13 +13509,21 @@ function createContext(input) {
             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) {
@@ -13627,8 +13609,8 @@ function doEvaluateSyntax(syntaxes, context, options) {
     let i = 0;
     let result;
     let token = null;
-    // console.error(`doEvaluateSyntax: ${syntaxes.reduce((acc, curr) => acc + renderSyntax(curr), '')}`, context.peek());
-    // console.error(new Error('anyOf'));
+    // console.error(`>> doEvaluateSyntax: ${syntaxes.reduce((acc, curr) => acc + renderSyntax(curr), '')}`, context.peek());
+    // console.error(new Error('doEvaluateSyntax'));
     for (; i < syntaxes.length; i++) {
         syntax = syntaxes[i];
         if (context.done()) {
@@ -13638,6 +13620,7 @@ function doEvaluateSyntax(syntaxes, context, options) {
             break;
         }
         token = context.peek();
+        // console.error(`>> doEvaluateSyntax: ${ renderSyntax(syntax)}`, context.peek());
         if (syntax.typ == ValidationTokenEnum.Whitespace) {
             if (context.peek()?.typ == exports.EnumToken.WhitespaceTokenType) {
                 context.next();
@@ -13671,6 +13654,7 @@ function doEvaluateSyntax(syntaxes, context, options) {
                 clearVisited(token, syntax, 'doEvaluateSyntax', options);
             }
         }
+        // console.error(`>> doEvaluateSyntax: ${ renderSyntax(syntax)}\nvalid:${result.valid == SyntaxValidationResult.Valid ? 'valid' : 'invalid'}\n`, context.peek());
         if (result.valid == SyntaxValidationResult.Drop) {
             if (syntax.isOptional) {
                 continue;
@@ -13744,11 +13728,13 @@ function matchList(syntax, context, options) {
                 context
             };
         }
+        // console.error(`>> matchList: ${tokens.reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
         result = doEvaluateSyntax([syntax], createContext(tokens), {
             ...options,
             isList: false,
             occurence: false
         });
+        // console.error(`>> matchList: ${tokens.reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}\n>> result: ${result.valid == SyntaxValidationResult.Valid ? 'valid' : 'invalid'}\n${JSON.stringify(result, null, 1)}`);
         if (result.valid == SyntaxValidationResult.Valid) {
             context = con.clone();
             count++;
@@ -13807,6 +13793,7 @@ function match(syntax, context, options) {
     let success = false;
     let result;
     let token = context.peek();
+    // console.error(`>> match: ${renderSyntax(syntax)}`);
     switch (syntax.typ) {
         case ValidationTokenEnum.PipeToken:
             return someOf(syntax.chi, context, options);
@@ -14184,6 +14171,7 @@ function someOf(syntaxes, context, options) {
             context.next();
         }
         result = doEvaluateSyntax(syntaxes[i], context.clone(), options);
+        // console.error(JSON.stringify({result, syntax: syntaxes[i], context, slice: context.slice()}, null, 1));
         if (result.valid == SyntaxValidationResult.Valid) {
             success = true;
             if (result.context.done()) {
@@ -14196,6 +14184,7 @@ function someOf(syntaxes, context, options) {
         // pick the best match
         matched.sort((a, b) => a.context.done() ? -1 : b.context.done() ? 1 : b.context.index - a.context.index);
     }
+    // console.error(JSON.stringify({matched, context, slice: context.slice(), syntaxes}, null, 1));
     return matched[0] ?? {
         valid: SyntaxValidationResult.Drop,
         node: context.current(),
@@ -14251,16 +14240,8 @@ function allOf(syntax, context, options) {
     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;
         }
@@ -14276,15 +14257,22 @@ function allOf(syntax, context, options) {
     const con = createContext(tokens);
     let cp;
     let j;
+    // console.error(`>> allOf:syntax: ${syntax.reduce((acc, curr, index) => acc + (index > 0 ? ' && ' : '') + curr.reduce((acc, curr) => acc + renderSyntax(curr), ''), '')}`);
+    // console.error(`>> allOf:tokens: ${con.slice<Token>().reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
+    // console.error(`>> allOf:tokens:slice: ${context.slice<Token>().reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
     for (i = 0; i < syntax.length; i++) {
+        // console.error(`>> allOf:${i}:${syntax[i].reduce((acc, curr) => acc + renderSyntax(curr), '')}:current()`, con.current());
         if (syntax[i].length == 1 && syntax[i][0].isOptional) {
+            // syntax[i][0 = structuredClone(syntax[i][0]);
             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;
+                // console.error(`>> allOf:done:peek: `, con.peek());
                 continue;
             }
             while (!cp.done()) {
@@ -14305,8 +14293,12 @@ function allOf(syntax, context, options) {
             }
             syntax[i][0].isOptional = true;
             // @ts-ignore
+            // console.error(`>> allOf:result valid: `, result?.valid == SyntaxValidationResult.Valid, con.current<Token>());
+            // @ts-ignore
             if (result?.valid == SyntaxValidationResult.Valid) {
                 syntax.splice(i, 1);
+                // console.error(`>> allOf:syntaxes: ${syntax.reduce((acc, curr, index) => acc + (index > 0 ? ' && ' : '') + curr.reduce((acc, curr) => acc + renderSyntax(curr), ''), '')}`);
+                // console.error(`>> allOf:context:`, JSON.stringify(con, null, 1));
                 i = -1;
             }
             continue;
@@ -16956,6 +16948,8 @@ function parseNode(results, context, options, errors, src, map, rawTokens) {
                         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,
diff --git a/dist/index.d.ts b/dist/index.d.ts
index ec8c3485..fb02214a 100644
--- a/dist/index.d.ts
+++ b/dist/index.d.ts
@@ -1170,7 +1170,6 @@ interface MinifyOptions {
 
     minify?: boolean;
     parseColor?: boolean;
-    convertColor?: boolean;
     nestingRules?: boolean;
     expandNestingRules?: boolean;
     removeDuplicateDeclarations?: boolean;
diff --git a/dist/lib/ast/features/values.js b/dist/lib/ast/features/values.js
deleted file mode 100644
index 0d6b0c15..00000000
--- a/dist/lib/ast/features/values.js
+++ /dev/null
@@ -1,287 +0,0 @@
-import { EnumToken } from '../types.js';
-import { renderToken } from '../../renderer/render.js';
-import { colorsFunc, colorFuncColorSpace, ColorKind, COLORS_NAMES } from '../../renderer/color/utils/constants.js';
-import { getComponents } from '../../renderer/color/utils/components.js';
-import { isColor, parseColor } from '../../syntax/syntax.js';
-import { walkValues } from '../walk.js';
-import { clamp, reduceNumber, filterValues } from '../utils/utils.js';
-import { color2srgbvalues } from '../../renderer/color/color.js';
-import { reduceHexValue, srgb2hexvalues, rgb2hex, hsl2hex, hwb2hex, cmyk2hex, oklab2hex, oklch2hex, lab2hex, lch2hex } from '../../renderer/color/hex.js';
-import '../minify.js';
-import '../../parser/parse.js';
-import '../../parser/tokenize.js';
-import '../../parser/utils/config.js';
-import { colorMix } from '../../renderer/color/color-mix.js';
-import { parseRelativeColor } from '../../renderer/color/relativecolor.js';
-
-function replaceNode(node, replacement, parent) {
-    if ('chi' in parent || 'val' in parent) {
-        // @ts-ignore
-        const chi = parent.chi ?? parent.val;
-        for (let i = 0; i < chi.length; i++) {
-            // @ts-ignore
-            if (chi[i] == node) {
-                // @ts-ignore
-                chi.splice(i, 1, replacement);
-                break;
-            }
-        }
-    }
-    else if ('l' in parent && node == parent.l) {
-        // @ts-ignore
-        parent.l = replacement;
-    }
-    else if ('r' in parent) {
-        if (node == parent.r) {
-            // @ts-ignore
-            parent.r = replacement;
-        }
-        else if (Array.isArray(parent.r)) {
-            for (let i = 0; i < parent.r.length; i++) {
-                if (parent.r[i] == node) {
-                    // @ts-ignore
-                    parent.r.splice(i, 1, replacement);
-                    break;
-                }
-            }
-        }
-    }
-}
-class ValuesFeature {
-    get ordering() {
-        return 6;
-    }
-    get preProcess() {
-        return false;
-    }
-    get postProcess() {
-        return true;
-    }
-    static register(options) {
-        if (options.minify) {
-            // @ts-ignore
-            options.features.push(new ValuesFeature());
-        }
-    }
-    run(ast, options = {}, parent, context) {
-        if (ast.typ != EnumToken.DeclarationNodeType) {
-            return;
-        }
-        for (const { value: token, parent } of walkValues(ast.val, ast)) {
-            if (options.parseColor) {
-                if (token.typ == EnumToken.FunctionTokenType && colorsFunc.includes(token.val)) {
-                    if (isColor(token)) {
-                        parseColor(token);
-                        // // @ts-ignore
-                        // token.typ = EnumToken.ColorTokenType;
-                        //
-                        // // @ts-ignore
-                        // if ((token as ColorToken)!.chi[0]!.typ == EnumToken.IdenTokenType && ((token as ColorToken)!.chi[0] as IdentToken).val == 'from') {
-                        //
-                        //     // @ts-ignore
-                        //     (<ColorToken>token).cal = 'rel';
-                        // } else { // @ts-ignore
-                        //     if ((token as ColorToken).val == 'color-mix' && (token as ColorToken).chi[0].typ == EnumToken.IdenTokenType && ((token as ColorToken).chi[0] as IdentToken).val == 'in') {
-                        //
-                        //         // @ts-ignore
-                        //         (<ColorToken>token).cal = 'mix';
-                        //     } else {
-                        //
-                        //         // @ts-ignore
-                        //         if ((token as ColorToken).val == 'color') {
-                        //             // @ts-ignore
-                        //             token.cal = 'col';
-                        //         }
-                        //
-                        //         // @ts-ignore
-                        //         (token as ColorToken).chi = (token as ColorToken).chi!.filter((t: Token) => ![EnumToken.WhitespaceTokenType, EnumToken.CommaTokenType, EnumToken.CommentTokenType].includes(t.typ));
-                        //     }
-                        // }
-                    }
-                }
-            }
-            switch (token.typ) {
-                case EnumToken.FractionTokenType:
-                    const fraction = renderToken(token.l) + '/' + renderToken(token.r);
-                    if (+token.r.val != 0) {
-                        const value = reduceNumber(+token.l.val / +token.r.val);
-                        if (value.length <= fraction.length) {
-                            replaceNode(token, {
-                                typ: EnumToken.NumberTokenType,
-                                val: value
-                            }, parent);
-                        }
-                    }
-                    break;
-                case EnumToken.ColorTokenType:
-                    if (!options.convertColor) {
-                        break;
-                    }
-                    if ('light-dark'.localeCompare(token.val, undefined, { sensitivity: 'base' }) == 0) {
-                        break;
-                    }
-                    if (token.cal == 'mix' && token.val == 'color-mix') {
-                        const children = token.chi.reduce((acc, t) => {
-                            if (t.typ == EnumToken.ColorTokenType) {
-                                acc.push([t]);
-                            }
-                            else {
-                                if (![EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType, EnumToken.CommaTokenType].includes(t.typ)) {
-                                    acc[acc.length - 1].push(t);
-                                }
-                            }
-                            return acc;
-                        }, [[]]);
-                        const value = colorMix(children[0][1], children[0][2], children[1][0], children[1][1], children[2][0], children[2][1]);
-                        if (value != null) {
-                            Object.assign(token, value);
-                            delete token.cal;
-                        }
-                        else if (!token.chi.some(t => t.typ == EnumToken.CommaTokenType)) {
-                            token.chi = children.reduce((acc, curr, index) => {
-                                if (acc.length > 0) {
-                                    acc.push({ typ: EnumToken.CommaTokenType });
-                                }
-                                acc.push(...curr);
-                                return acc;
-                            }, []);
-                        }
-                    }
-                    if (token.cal == 'rel' && ['rgb', 'hsl', 'hwb', 'lab', 'lch', 'oklab', 'oklch', 'color'].includes(token.val.toLowerCase())) {
-                        const chi = getComponents(token);
-                        const offset = token.val == 'color' ? 2 : 1;
-                        if (chi != null) {
-                            // @ts-ignore
-                            const color = chi[1];
-                            const components = parseRelativeColor(token.val == 'color' ? chi[offset].val : token.val, color, chi[offset + 1], chi[offset + 2], chi[offset + 3], chi[offset + 4]);
-                            if (components != null) {
-                                token.chi = [...(token.val == 'color' ? [chi[offset]] : []), ...Object.values(components)];
-                                delete token.cal;
-                            }
-                        }
-                    }
-                    if ('color'.localeCompare(token.val, undefined, { sensitivity: 'base' }) == 0) {
-                        if (token.chi[0].typ == EnumToken.IdenTokenType && colorFuncColorSpace.includes(token.chi[0].val.toLowerCase())) {
-                            const values = color2srgbvalues(token);
-                            if (Array.isArray(values) && values.every(t => !Number.isNaN(t))) {
-                                const replacement = {
-                                    typ: EnumToken.ColorTokenType,
-                                    // @ts-ignore
-                                    val: reduceHexValue(srgb2hexvalues(...values)),
-                                    kin: ColorKind.HEX
-                                };
-                                if (replacement.val.at(0) != '#') {
-                                    replacement.kin = ColorKind.LIT;
-                                }
-                                replaceNode(token, replacement, parent);
-                            }
-                        }
-                    }
-                    if (token.cal != null) {
-                        let slice = false;
-                        if (token.cal == 'rel') {
-                            const last = token.chi.at(-1);
-                            if ((last.typ == EnumToken.NumberTokenType && last.val == '1') || (last.typ == EnumToken.IdenTokenType && last.val == 'none')) {
-                                const prev = token.chi.at(-2);
-                                if (prev.typ == EnumToken.LiteralTokenType && prev.val == '/') {
-                                    slice = true;
-                                }
-                            }
-                        }
-                        clamp(token);
-                        token.chi = (slice ? token.chi.slice(0, -2) : token.chi).reduce((acc, curr) => {
-                            if (curr.typ == EnumToken.LiteralTokenType || curr.typ == EnumToken.CommaTokenType || curr.typ == EnumToken.WhitespaceTokenType) {
-                                if (acc.at(-1)?.typ == EnumToken.WhitespaceTokenType) {
-                                    acc.pop();
-                                }
-                                if (curr.typ == EnumToken.WhitespaceTokenType && [EnumToken.LiteralTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType].includes(acc.at(-1)?.typ)) {
-                                    return acc;
-                                }
-                                return acc.concat([curr]);
-                            }
-                            if (acc.length > 0 && ![EnumToken.LiteralTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType].includes(acc.at(-1)?.typ)) {
-                                acc.push({ typ: EnumToken.WhitespaceTokenType });
-                            }
-                            return acc.concat([curr]);
-                        }, []);
-                    }
-                    if (token.kin == ColorKind.LIT && token.val.localeCompare('currentcolor', undefined, { sensitivity: 'base' }) == 0) {
-                        break;
-                    }
-                    clamp(token);
-                    if (Array.isArray(token.chi) && token.chi.some((t) => t.typ == EnumToken.FunctionTokenType || (t.typ == EnumToken.ColorTokenType && Array.isArray(t.chi)))) {
-                        const replaceSemiColon = /^((rgba?)|(hsla?)|(hwb)|((ok)?lab)|((ok)?lch))$/i.test(token.val);
-                        if (/a$/i.test(token.val)) {
-                            token.val = token.val.slice(0, -1);
-                        }
-                        token.chi = token.chi.reduce((acc, curr, index, array) => {
-                            if (curr.typ == EnumToken.LiteralTokenType || curr.typ == EnumToken.CommaTokenType || curr.typ == EnumToken.WhitespaceTokenType) {
-                                if (acc.at(-1)?.typ == EnumToken.WhitespaceTokenType) {
-                                    acc.pop();
-                                }
-                                if (curr.typ == EnumToken.WhitespaceTokenType && [EnumToken.LiteralTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType].includes(acc.at(-1)?.typ)) {
-                                    return acc;
-                                }
-                                return acc.concat([curr.typ == EnumToken.CommaTokenType && replaceSemiColon ? { typ: EnumToken.WhitespaceTokenType } : curr]);
-                            }
-                            if (acc.length > 0 && ![EnumToken.LiteralTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType].includes(acc.at(-1)?.typ)) {
-                                acc.push({ typ: EnumToken.WhitespaceTokenType });
-                            }
-                            return acc.concat([curr]);
-                        }, []);
-                        // break;
-                    }
-                    let value = token.kin == ColorKind.HEX ? token.val.toLowerCase() : (token.kin == ColorKind.LIT ? COLORS_NAMES[token.val.toLowerCase()] : '');
-                    const val = token.val.toLowerCase();
-                    if (/rgba?/i.test(val)) {
-                        value = rgb2hex(token);
-                    }
-                    else if (/hsla?/i.test(val)) {
-                        value = hsl2hex(token);
-                    }
-                    else if (val == 'hwb') {
-                        value = hwb2hex(token);
-                    }
-                    else if (val == 'device-cmyk') {
-                        value = cmyk2hex(token);
-                    }
-                    else if (val == 'oklab') {
-                        value = oklab2hex(token);
-                    }
-                    else if (val == 'oklch') {
-                        value = oklch2hex(token);
-                    }
-                    else if (val == 'lab') {
-                        value = lab2hex(token);
-                    }
-                    else if (val == 'lch') {
-                        value = lch2hex(token);
-                    }
-                    if (value !== '' && value != null) {
-                        const replacement = {
-                            typ: EnumToken.ColorTokenType,
-                            kin: ColorKind.HEX,
-                            val: value
-                        };
-                        if (replacement.val.at(0) != '#') {
-                            replacement.kin = ColorKind.LIT;
-                        }
-                        else {
-                            replacement.val = reduceHexValue(replacement.val);
-                        }
-                        replaceNode(token, replacement, parent);
-                        break;
-                    }
-                    if (Array.isArray(token.chi)) {
-                        if (/a$/.test(token.val)) {
-                            token.val = token.val.slice(0, -1);
-                        }
-                    }
-                    break;
-            }
-        }
-        filterValues(ast.val);
-    }
-}
-
-export { ValuesFeature };
diff --git a/dist/lib/parser/parse.js b/dist/lib/parser/parse.js
index 4b7e860b..a9241b5e 100644
--- a/dist/lib/parser/parse.js
+++ b/dist/lib/parser/parse.js
@@ -784,6 +784,8 @@ function parseNode(results, context, options, errors, src, map, rawTokens) {
                         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,
diff --git a/dist/lib/validation/config.json.js b/dist/lib/validation/config.json.js
index bafedcf6..3d74b99a 100644
--- a/dist/lib/validation/config.json.js
+++ b/dist/lib/validation/config.json.js
@@ -768,7 +768,7 @@ var declarations = {
 		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"
@@ -789,7 +789,7 @@ var declarations = {
 		syntax: "nonzero | evenodd"
 	},
 	filter: {
-		syntax: "none | <filter-value-list>| <-ms-filter-function-list>"
+		syntax: "none | <filter-value-list> | <-ms-filter-function-list>"
 	},
 	flex: {
 		syntax: "none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]"
@@ -984,7 +984,7 @@ var declarations = {
 		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?"
@@ -1188,7 +1188,7 @@ var declarations = {
 		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()>| stretch | <-non-standard-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'>"
@@ -1197,7 +1197,7 @@ var declarations = {
 		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()>| stretch | <-non-standard-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'>"
@@ -1209,7 +1209,7 @@ var declarations = {
 		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()>| stretch | <-non-standard-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"
@@ -1266,7 +1266,7 @@ var declarations = {
 		syntax: "<line-width>"
 	},
 	overflow: {
-		syntax: "[ visible | hidden | clip | scroll | auto ]{1,2}| <-non-standard-overflow>"
+		syntax: "[ visible | hidden | clip | scroll | auto ]{1,2} | <-non-standard-overflow>"
 	},
 	"overflow-anchor": {
 		syntax: "auto | none"
@@ -1287,10 +1287,10 @@ var declarations = {
 		syntax: "normal | break-word | anywhere"
 	},
 	"overflow-x": {
-		syntax: "visible | hidden | clip | scroll | auto| <-non-standard-overflow>"
+		syntax: "visible | hidden | clip | scroll | auto | <-non-standard-overflow>"
 	},
 	"overflow-y": {
-		syntax: "visible | hidden | clip | scroll | auto| <-non-standard-overflow>"
+		syntax: "visible | hidden | clip | scroll | auto | <-non-standard-overflow>"
 	},
 	overlay: {
 		syntax: "none | auto"
@@ -1377,7 +1377,7 @@ var declarations = {
 		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>"
@@ -1806,7 +1806,7 @@ var declarations = {
 		syntax: "normal | break-word"
 	},
 	"writing-mode": {
-		syntax: "horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr| <svg-writing-mode>"
+		syntax: "horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr | <svg-writing-mode>"
 	},
 	x: {
 		syntax: "<length> | <percentage>"
diff --git a/dist/lib/validation/parser/parse.js b/dist/lib/validation/parser/parse.js
index 2c27199b..8b54a38b 100644
--- a/dist/lib/validation/parser/parse.js
+++ b/dist/lib/validation/parser/parse.js
@@ -9,20 +9,6 @@ import '../../ast/walk.js';
 import '../../renderer/color/utils/constants.js';
 import '../../renderer/sourcemap/lib/encode.js';
 
-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,
@@ -36,18 +22,6 @@ const objectProperties = {
     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,
@@ -1070,4 +1044,4 @@ function minify(ast) {
     return ast;
 }
 
-export { WalkValidationTokenEnum, WalkValidationTokenKeyTypeEnum, parseSyntax, renderSyntax };
+export { parseSyntax, renderSyntax };
diff --git a/dist/lib/validation/syntax.js b/dist/lib/validation/syntax.js
index 6381a11b..9bf74b8a 100644
--- a/dist/lib/validation/syntax.js
+++ b/dist/lib/validation/syntax.js
@@ -36,13 +36,13 @@ function createContext(input) {
         update(context) {
             // @ts-ignore
             const newIndex = result.indexOf(context.current());
-            if (newIndex != -1) {
+            if (newIndex > this.index) {
                 this.index = newIndex;
             }
         },
         consume(token, howMany) {
             let newIndex = result.indexOf(token, this.index + 1);
-            if (newIndex == -1) {
+            if (newIndex == -1 || newIndex < this.index) {
                 return false;
             }
             howMany ??= 0;
@@ -79,13 +79,21 @@ function createContext(input) {
             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) {
@@ -171,8 +179,8 @@ function doEvaluateSyntax(syntaxes, context, options) {
     let i = 0;
     let result;
     let token = null;
-    // console.error(`doEvaluateSyntax: ${syntaxes.reduce((acc, curr) => acc + renderSyntax(curr), '')}`, context.peek());
-    // console.error(new Error('anyOf'));
+    // console.error(`>> doEvaluateSyntax: ${syntaxes.reduce((acc, curr) => acc + renderSyntax(curr), '')}`, context.peek());
+    // console.error(new Error('doEvaluateSyntax'));
     for (; i < syntaxes.length; i++) {
         syntax = syntaxes[i];
         if (context.done()) {
@@ -182,6 +190,7 @@ function doEvaluateSyntax(syntaxes, context, options) {
             break;
         }
         token = context.peek();
+        // console.error(`>> doEvaluateSyntax: ${ renderSyntax(syntax)}`, context.peek());
         if (syntax.typ == ValidationTokenEnum.Whitespace) {
             if (context.peek()?.typ == EnumToken.WhitespaceTokenType) {
                 context.next();
@@ -215,6 +224,7 @@ function doEvaluateSyntax(syntaxes, context, options) {
                 clearVisited(token, syntax, 'doEvaluateSyntax', options);
             }
         }
+        // console.error(`>> doEvaluateSyntax: ${ renderSyntax(syntax)}\nvalid:${result.valid == SyntaxValidationResult.Valid ? 'valid' : 'invalid'}\n`, context.peek());
         if (result.valid == SyntaxValidationResult.Drop) {
             if (syntax.isOptional) {
                 continue;
@@ -288,11 +298,13 @@ function matchList(syntax, context, options) {
                 context
             };
         }
+        // console.error(`>> matchList: ${tokens.reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
         result = doEvaluateSyntax([syntax], createContext(tokens), {
             ...options,
             isList: false,
             occurence: false
         });
+        // console.error(`>> matchList: ${tokens.reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}\n>> result: ${result.valid == SyntaxValidationResult.Valid ? 'valid' : 'invalid'}\n${JSON.stringify(result, null, 1)}`);
         if (result.valid == SyntaxValidationResult.Valid) {
             context = con.clone();
             count++;
@@ -351,6 +363,7 @@ function match(syntax, context, options) {
     let success = false;
     let result;
     let token = context.peek();
+    // console.error(`>> match: ${renderSyntax(syntax)}`);
     switch (syntax.typ) {
         case ValidationTokenEnum.PipeToken:
             return someOf(syntax.chi, context, options);
@@ -728,6 +741,7 @@ function someOf(syntaxes, context, options) {
             context.next();
         }
         result = doEvaluateSyntax(syntaxes[i], context.clone(), options);
+        // console.error(JSON.stringify({result, syntax: syntaxes[i], context, slice: context.slice()}, null, 1));
         if (result.valid == SyntaxValidationResult.Valid) {
             success = true;
             if (result.context.done()) {
@@ -740,6 +754,7 @@ function someOf(syntaxes, context, options) {
         // pick the best match
         matched.sort((a, b) => a.context.done() ? -1 : b.context.done() ? 1 : b.context.index - a.context.index);
     }
+    // console.error(JSON.stringify({matched, context, slice: context.slice(), syntaxes}, null, 1));
     return matched[0] ?? {
         valid: SyntaxValidationResult.Drop,
         node: context.current(),
@@ -795,16 +810,8 @@ function allOf(syntax, context, options) {
     for (i = 0; i < slice.length; i++) {
         if (slice[i].typ == EnumToken.FunctionTokenType && wildCardFuncs.includes(slice[i].val.toLowerCase())) {
             vars.push(slice[i]);
-            slice.splice(i, 1);
-            if (slice[i]?.typ == EnumToken.WhitespaceTokenType) {
-                vars.push(slice[i]);
-                slice.splice(i, 1);
-                if (i > 0) {
-                    i--;
-                }
-            }
-            if (i > 0) {
-                i--;
+            if (slice[i + 1]?.typ == EnumToken.WhitespaceTokenType) {
+                vars.push(slice[++i]);
             }
             continue;
         }
@@ -820,15 +827,22 @@ function allOf(syntax, context, options) {
     const con = createContext(tokens);
     let cp;
     let j;
+    // console.error(`>> allOf:syntax: ${syntax.reduce((acc, curr, index) => acc + (index > 0 ? ' && ' : '') + curr.reduce((acc, curr) => acc + renderSyntax(curr), ''), '')}`);
+    // console.error(`>> allOf:tokens: ${con.slice<Token>().reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
+    // console.error(`>> allOf:tokens:slice: ${context.slice<Token>().reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
     for (i = 0; i < syntax.length; i++) {
+        // console.error(`>> allOf:${i}:${syntax[i].reduce((acc, curr) => acc + renderSyntax(curr), '')}:current()`, con.current());
         if (syntax[i].length == 1 && syntax[i][0].isOptional) {
+            // syntax[i][0 = structuredClone(syntax[i][0]);
             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;
+                // console.error(`>> allOf:done:peek: `, con.peek());
                 continue;
             }
             while (!cp.done()) {
@@ -849,8 +863,12 @@ function allOf(syntax, context, options) {
             }
             syntax[i][0].isOptional = true;
             // @ts-ignore
+            // console.error(`>> allOf:result valid: `, result?.valid == SyntaxValidationResult.Valid, con.current<Token>());
+            // @ts-ignore
             if (result?.valid == SyntaxValidationResult.Valid) {
                 syntax.splice(i, 1);
+                // console.error(`>> allOf:syntaxes: ${syntax.reduce((acc, curr, index) => acc + (index > 0 ? ' && ' : '') + curr.reduce((acc, curr) => acc + renderSyntax(curr), ''), '')}`);
+                // console.error(`>> allOf:context:`, JSON.stringify(con, null, 1));
                 i = -1;
             }
             continue;
diff --git a/jsr.json b/jsr.json
index 639c6208..05ae638e 100644
--- a/jsr.json
+++ b/jsr.json
@@ -1,6 +1,6 @@
 {
   "name": "@tbela99/css-parser",
-  "version": "1.1.1-alpha1",
+  "version": "1.1.1-alpha2",
   "publish": {
     "include": [
       "src",
diff --git a/package.json b/package.json
index e7ddb76e..6bbe935c 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@tbela99/css-parser",
   "description": "CSS parser for node and the browser",
-  "version": "v1.1.1-alpha1",
+  "version": "v1.1.1-alpha2",
   "exports": {
     ".": "./dist/node/index.js",
     "./node": "./dist/node/index.js",
@@ -19,6 +19,7 @@
     "test": "web-test-runner \"test/**/web.spec.js\" --node-resolve --playwright --browsers chromium firefox webkit --root-dir=.; mocha --reporter-options='maxDiffSize=1801920' \"test/**/node.spec.js\"",
     "test:web": "web-test-runner \"test/**/web.spec.js\" --node-resolve --playwright --browsers chromium firefox webkit --root-dir=.",
     "test:node": "mocha --reporter-options='maxDiffSize=1801920' \"test/**/node.spec.js\"",
+    "test:local": "mocha --reporter-options='maxDiffSize=1801920' \"test/**/local.spec.js\"",
     "test:cov": "c8 -x 'test/specs/**/*.js' -x dist/lib/validation/syntax.js -x 'dist/lib/validation/parser/*.js' --reporter=html --reporter=text --reporter=json-summary mocha --reporter-options='maxDiffSize=1801920' \"test/**/node.spec.js\"",
     "test:web-cov": "web-test-runner -x 'test/specs/**/*.js' -x dist/lib/validation/syntax.js,dist/lib/validation/parser \"test/**/web.spec.js\" --node-resolve --playwright --browsers chromium firefox webkit --root-dir=. --coverage",
     "profile": "node --enable-source-maps --inspect-brk test/inspect.js",
@@ -65,8 +66,8 @@
     "c8": "^10.1.3",
     "esno": "^4.8.0",
     "mocha": "^11.7.1",
-    "playwright": "^1.53.2",
-    "rollup": "^4.44.2",
+    "playwright": "^1.54.1",
+    "rollup": "^4.45.1",
     "rollup-plugin-dts": "^6.2.1",
     "tslib": "^2.8.1"
   }
diff --git a/src/@types/index.d.ts b/src/@types/index.d.ts
index d7864b3d..da0335c6 100644
--- a/src/@types/index.d.ts
+++ b/src/@types/index.d.ts
@@ -51,7 +51,6 @@ export interface MinifyOptions {
 
     minify?: boolean;
     parseColor?: boolean;
-    convertColor?: boolean;
     nestingRules?: boolean;
     expandNestingRules?: boolean;
     removeDuplicateDeclarations?: boolean;
diff --git a/src/lib/ast/features/values.ts b/src/lib/ast/features/values.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/lib/parser/parse.ts b/src/lib/parser/parse.ts
index 33cc8d1e..18fe9313 100644
--- a/src/lib/parser/parse.ts
+++ b/src/lib/parser/parse.ts
@@ -1184,7 +1184,7 @@ function parseNode(results: TokenizeResult[], context: AstRuleList | AstInvalidR
 
                 if (options.validation == ValidationLevel.All) {
 
-                    const valid: ValidationSyntaxResult = evaluateSyntax(result, options, context as AstNode);
+                    const valid: ValidationSyntaxResult = evaluateSyntax(result, options);
 
                     Object.defineProperty(result, 'validSyntax', {
                         ...definedPropertySettings,
@@ -1193,6 +1193,9 @@ function parseNode(results: TokenizeResult[], context: AstRuleList | AstInvalidR
 
                     if (valid.valid == SyntaxValidationResult.Drop) {
 
+                        // console.error({result, valid});
+                        // console.error(JSON.stringify({result, options, valid}, null, 1));
+
                         errors.push(<ErrorDescription>{
                             action: 'drop',
                             message: valid.error,
diff --git a/src/lib/validation/config.json b/src/lib/validation/config.json
index 5696257c..94f26758 100644
--- a/src/lib/validation/config.json
+++ b/src/lib/validation/config.json
@@ -769,7 +769,7 @@
    "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"
@@ -790,7 +790,7 @@
    "syntax": "nonzero | evenodd"
   },
   "filter": {
-   "syntax": "none | <filter-value-list>| <-ms-filter-function-list>"
+   "syntax": "none | <filter-value-list> | <-ms-filter-function-list>"
   },
   "flex": {
    "syntax": "none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]"
@@ -985,7 +985,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?"
@@ -1189,7 +1189,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()>| stretch | <-non-standard-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'>"
@@ -1198,7 +1198,7 @@
    "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()>| stretch | <-non-standard-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'>"
@@ -1210,7 +1210,7 @@
    "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()>| stretch | <-non-standard-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"
@@ -1267,7 +1267,7 @@
    "syntax": "<line-width>"
   },
   "overflow": {
-   "syntax": "[ visible | hidden | clip | scroll | auto ]{1,2}| <-non-standard-overflow>"
+   "syntax": "[ visible | hidden | clip | scroll | auto ]{1,2} | <-non-standard-overflow>"
   },
   "overflow-anchor": {
    "syntax": "auto | none"
@@ -1288,10 +1288,10 @@
    "syntax": "normal | break-word | anywhere"
   },
   "overflow-x": {
-   "syntax": "visible | hidden | clip | scroll | auto| <-non-standard-overflow>"
+   "syntax": "visible | hidden | clip | scroll | auto | <-non-standard-overflow>"
   },
   "overflow-y": {
-   "syntax": "visible | hidden | clip | scroll | auto| <-non-standard-overflow>"
+   "syntax": "visible | hidden | clip | scroll | auto | <-non-standard-overflow>"
   },
   "overlay": {
    "syntax": "none | auto"
@@ -1378,7 +1378,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>"
@@ -1807,7 +1807,7 @@
    "syntax": "normal | break-word"
   },
   "writing-mode": {
-   "syntax": "horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr| <svg-writing-mode>"
+   "syntax": "horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr | <svg-writing-mode>"
   },
   "x": {
    "syntax": "<length> | <percentage>"
diff --git a/src/lib/validation/parser/parse.ts b/src/lib/validation/parser/parse.ts
index 41d484b8..b089ab5d 100644
--- a/src/lib/validation/parser/parse.ts
+++ b/src/lib/validation/parser/parse.ts
@@ -49,22 +49,6 @@ import {getTokenType as getTokenType$1} from '../../parser/index.ts';
 import type {DimensionToken} from "../../../@types/token.d.ts";
 import {EnumToken} from "../../ast/index.ts";
 
-export enum WalkValidationTokenEnum {
-
-    IgnoreChildren,
-    IgnoreNode,
-    IgnoreAll,
-}
-
-export enum WalkValidationTokenKeyTypeEnum {
-
-    Array = 'array',
-    Children = 'chi',
-    Left = 'l',
-    Right = 'r',
-    Prelude = 'prelude',
-}
-
 declare type ValidationContext =
     ValidationRootToken
     | ValidationBracketToken
@@ -93,20 +77,7 @@ const objectProperties = {
     configurable: true
 }
 
-export const fetchInit = {headers: {'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:180.0) Gecko/20100101 Firefox/138.0'}}
-// 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'> ) ]
+export const fetchInit = {headers: {'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:180.0) Gecko/20100101 Firefox/140.0'}}
 
 function* tokenize(syntax: string, position: Position = {ind: 0, lin: 1, col: 0}, currentPosition: Position = {
     ind: -1,
diff --git a/src/lib/validation/syntax.ts b/src/lib/validation/syntax.ts
index ae0b66ae..5a2964ef 100644
--- a/src/lib/validation/syntax.ts
+++ b/src/lib/validation/syntax.ts
@@ -75,7 +75,7 @@ export function createContext(input: Token[]): Context<Token> {
             // @ts-ignore
             const newIndex: number = result.indexOf(context.current<Token>() as Token);
 
-            if (newIndex != -1) {
+            if (newIndex > this.index) {
 
                 this.index = newIndex;
             }
@@ -83,7 +83,7 @@ export function createContext(input: Token[]): Context<Token> {
         consume<Type>(token: Type, howMany?: number): boolean {
 
             let newIndex: number = result.indexOf(token as Token, this.index + 1);
-            if (newIndex == -1) {
+            if (newIndex == -1 || newIndex < this.index) {
                 return false;
             }
 
@@ -135,15 +135,24 @@ export function createContext(input: Token[]): Context<Token> {
         },
         clone(): Context<Token> {
 
-            const context = createContext(input.slice());
-
+            const context = createContext(result.slice());
             context.index = this.index;
+
             return context;
+        },
+        // @ts-ignore
+        toJSON(): object {
+
+            return {
+                index: this.index,
+                slice: this.slice(),
+                tokens: this.tokens()
+            }
         }
     }
 }
 
-export function evaluateSyntax(node: AstNode, options: ValidationOptions, parent?: AstNode): ValidationSyntaxResult {
+export function evaluateSyntax(node: AstNode, options: ValidationOptions): ValidationSyntaxResult {
 
     let ast: ValidationToken[] | null;
     let result;
@@ -271,8 +280,8 @@ export function doEvaluateSyntax(syntaxes: ValidationToken[], context: Context<T
     let result: ValidationSyntaxResult;
     let token: Token | null = null;
 
-    // console.error(`doEvaluateSyntax: ${syntaxes.reduce((acc, curr) => acc + renderSyntax(curr), '')}`, context.peek());
-    // console.error(new Error('anyOf'));
+    // console.error(`>> doEvaluateSyntax: ${syntaxes.reduce((acc, curr) => acc + renderSyntax(curr), '')}`, context.peek());
+    // console.error(new Error('doEvaluateSyntax'));
 
     for (; i < syntaxes.length; i++) {
 
@@ -289,6 +298,7 @@ export function doEvaluateSyntax(syntaxes: ValidationToken[], context: Context<T
         }
 
         token = context.peek<Token>() as Token;
+        // console.error(`>> doEvaluateSyntax: ${ renderSyntax(syntax)}`, context.peek());
 
         if (syntax.typ == ValidationTokenEnum.Whitespace) {
 
@@ -332,6 +342,8 @@ export function doEvaluateSyntax(syntaxes: ValidationToken[], context: Context<T
             }
         }
 
+        // console.error(`>> doEvaluateSyntax: ${ renderSyntax(syntax)}\nvalid:${result.valid == SyntaxValidationResult.Valid ? 'valid' : 'invalid'}\n`, context.peek());
+
         if (result.valid == SyntaxValidationResult.Drop) {
 
             if (syntax.isOptional) {
@@ -436,12 +448,16 @@ function matchList(syntax: ValidationToken, context: Context<Token>, options: Va
             }
         }
 
+        // console.error(`>> matchList: ${tokens.reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
+
         result = doEvaluateSyntax([syntax], createContext(tokens), {
             ...options,
             isList: false,
             occurence: false
         } as ValidationOptions);
 
+        // console.error(`>> matchList: ${tokens.reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}\n>> result: ${result.valid == SyntaxValidationResult.Valid ? 'valid' : 'invalid'}\n${JSON.stringify(result, null, 1)}`);
+
         if (result.valid == SyntaxValidationResult.Valid) {
 
             context = con.clone();
@@ -528,6 +544,8 @@ function match(syntax: ValidationToken, context: Context<Token>, options: Valida
     let result: ValidationSyntaxResult;
     let token: Token | null = context.peek() as Token;
 
+    // console.error(`>> match: ${renderSyntax(syntax)}`);
+
     switch (syntax.typ) {
 
         case ValidationTokenEnum.PipeToken:
@@ -1077,6 +1095,8 @@ function someOf(syntaxes: ValidationToken[][], context: Context<Token>, options:
 
         result = doEvaluateSyntax(syntaxes[i], context.clone(), options);
 
+        // console.error(JSON.stringify({result, syntax: syntaxes[i], context, slice: context.slice()}, null, 1));
+
         if (result.valid == SyntaxValidationResult.Valid) {
 
             success = true;
@@ -1096,6 +1116,8 @@ function someOf(syntaxes: ValidationToken[][], context: Context<Token>, options:
         matched.sort((a, b) => (a.context as Context<Token>).done() ? -1 : (b.context as Context<Token>).done() ? 1 : (b.context as Context<Token>).index - (a.context as Context<Token>).index);
     }
 
+    // console.error(JSON.stringify({matched, context, slice: context.slice(), syntaxes}, null, 1));
+
     return matched[0] ?? {
         valid: SyntaxValidationResult.Drop,
         node: context.current(),
@@ -1173,22 +1195,10 @@ function allOf(syntax: ValidationToken[][], context: Context<Token>, options: Va
         if (slice[i].typ == EnumToken.FunctionTokenType && wildCardFuncs.includes((slice[i] as FunctionToken).val.toLowerCase())) {
 
             vars.push(slice[i]);
-            slice.splice(i, 1);
 
-            if (slice[i]?.typ == EnumToken.WhitespaceTokenType) {
+            if (slice[i + 1]?.typ == EnumToken.WhitespaceTokenType) {
 
-                vars.push(slice[i]);
-                slice.splice(i, 1);
-
-                if (i > 0) {
-
-                    i--;
-                }
-            }
-
-            if (i > 0) {
-
-                i--;
+                vars.push(slice[++i]);
             }
 
             continue;
@@ -1212,10 +1222,17 @@ function allOf(syntax: ValidationToken[][], context: Context<Token>, options: Va
     let cp: Context<Token>;
     let j: number;
 
+    // console.error(`>> allOf:syntax: ${syntax.reduce((acc, curr, index) => acc + (index > 0 ? ' && ' : '') + curr.reduce((acc, curr) => acc + renderSyntax(curr), ''), '')}`);
+    // console.error(`>> allOf:tokens: ${con.slice<Token>().reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
+    // console.error(`>> allOf:tokens:slice: ${context.slice<Token>().reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
+
     for (i = 0; i < syntax.length; i++) {
 
+        // console.error(`>> allOf:${i}:${syntax[i].reduce((acc, curr) => acc + renderSyntax(curr), '')}:current()`, con.current());
+
         if (syntax[i].length == 1 && syntax[i][0].isOptional) {
 
+            // syntax[i][0 = structuredClone(syntax[i][0]);
             syntax[i][0].isOptional = false;
 
             j = 0;
@@ -1224,8 +1241,10 @@ function allOf(syntax: ValidationToken[][], context: Context<Token>, options: Va
 
             if (cp.done()) {
 
+                syntax[i][0].isOptional = true;
                 syntax.splice(i, 1);
                 i = -1;
+                // console.error(`>> allOf:done:peek: `, con.peek());
                 continue;
             }
 
@@ -1235,14 +1254,12 @@ function allOf(syntax: ValidationToken[][], context: Context<Token>, options: Va
 
                 if (result.valid == SyntaxValidationResult.Valid) {
 
-                    let end  = slice.indexOf(cp.current() as Token);
+                    let end = slice.indexOf(cp.current() as Token);
 
                     if (end == -1) {
 
                         end = 0
-                    }
-
-                    else {
+                    } else {
 
                         end -= j - 1;
                     }
@@ -1257,10 +1274,15 @@ function allOf(syntax: ValidationToken[][], context: Context<Token>, options: Va
 
             syntax[i][0].isOptional = true;
 
+            // @ts-ignore
+            // console.error(`>> allOf:result valid: `, result?.valid == SyntaxValidationResult.Valid, con.current<Token>());
+
             // @ts-ignore
             if (result?.valid == SyntaxValidationResult.Valid) {
 
                 syntax.splice(i, 1);
+                // console.error(`>> allOf:syntaxes: ${syntax.reduce((acc, curr, index) => acc + (index > 0 ? ' && ' : '') + curr.reduce((acc, curr) => acc + renderSyntax(curr), ''), '')}`);
+                // console.error(`>> allOf:context:`, JSON.stringify(con, null, 1));
                 i = -1;
             }
 
diff --git a/test/specs/code/validation.js b/test/specs/code/validation.js
index 5e783f61..a07a4bbb 100644
--- a/test/specs/code/validation.js
+++ b/test/specs/code/validation.js
@@ -508,12 +508,20 @@ html, body, div, span, applet, object, iframe,
 }`));
         });
 
-        // failing the CI because of timeout
-//         it('validation #20',  function (done) {
-//
-//              transform(`@import '${import.meta.dirname ?? dirname(new URL(import.meta.url).pathname)}/../../files/css/full.css';
-// `, {validation: true, resolveImport: true}).then(result => expect(result.errors.length).equals(1)).then(() => done());
-//         });
+        it('validation #21', function (done) {
+
+            transform(`@import '${import.meta.dirname ?? dirname(new URL(import.meta.url).pathname)}/../../files/css/full.css';
+`, {validation: true, resolveImport: true}).then(result => expect(result.errors.length).equals(1)).then(() => done(), () => done());
+        });
+
+        it('validation #22', function (done) {
+
+            transform(`@import '${import.meta.dirname ?? dirname(new URL(import.meta.url).pathname)}/../../files/css/bootstrap.css';
+`, {
+                validation: true,
+                resolveImport: true
+            }).then(result => expect(result.errors.length).equals(2)).then(() => done(), () => done());
+        });
     });
 
 }
\ No newline at end of file
diff --git a/test/specs/local.spec.js b/test/specs/local.spec.js
new file mode 100644
index 00000000..ab371859
--- /dev/null
+++ b/test/specs/local.spec.js
@@ -0,0 +1,13 @@
+import {parse, render, resolve, transform} from '../../dist/node/index.js';
+import * as tests from './local/index.js';
+import {expect} from "@esm-bundle/chai";
+import {readFile} from "node:fs/promises";
+import {dirname} from 'node:path';
+
+
+// these tests will timeout on CI
+// run(describe, expect, transform, parse, render);
+for (const test of Object.values(tests)) {
+
+    test.run(describe, expect, transform, parse, render, dirname, async (path) => readFile(path, { encoding: 'utf-8' }), resolve);
+}
\ No newline at end of file
diff --git a/test/specs/local/index.js b/test/specs/local/index.js
new file mode 100644
index 00000000..c3d1a3cb
--- /dev/null
+++ b/test/specs/local/index.js
@@ -0,0 +1,2 @@
+
+export * as validation from './validation.js';
\ No newline at end of file
diff --git a/test/specs/local/validation.js b/test/specs/local/validation.js
new file mode 100644
index 00000000..793fce95
--- /dev/null
+++ b/test/specs/local/validation.js
@@ -0,0 +1,18 @@
+export function run(describe, expect, transform, parse, render, dirname, readFile) {
+
+
+    it('validation #1', function (done) {
+
+        transform(`@import '${import.meta.dirname ?? dirname(new URL(import.meta.url).pathname)}/../../files/css/full.css';
+`, {validation: true, resolveImport: true}).then(result => expect(result.errors.length).equals(1)).then(() => done(), () => done());
+    });
+
+    it('validation #2', function (done) {
+
+        transform(`@import '${import.meta.dirname ?? dirname(new URL(import.meta.url).pathname)}/../../files/css/bootstrap.css';
+`, {
+            validation: true,
+            resolveImport: true
+        }).then(result => expect(result.errors.length).equals(2)).then(() => done(), () => done());
+    });
+}
\ No newline at end of file
diff --git a/tools/validation.ts b/tools/validation.ts
index 1f6f0461..7f0f722a 100644
--- a/tools/validation.ts
+++ b/tools/validation.ts
@@ -56,7 +56,7 @@ for (const [key, value] of Object.entries(patches.properties)) {
     else if (value.comment?.startsWith?.('extend')) {
 
         console.error(`>> extending declarations >> ${key}`);
-        json.declarations[key].syntax += value.syntax;
+        json.declarations[key].syntax += ' ' + value.syntax;
     }
 }
 
@@ -71,7 +71,7 @@ for (const [key, value] of Object.entries(patches.types)) {
     else if (value.comment?.startsWith?.('extend')) {
 
         console.error(`>> extending syntax >> ${key}`);
-        json.syntaxes[key].syntax += value.syntax;
+        json.syntaxes[key].syntax += ' ' + value.syntax;
     }
 }
 

From 86a46f4fd5619ce78d429646f2b25e43063f95cd Mon Sep 17 00:00:00 2001
From: Thierry Bela Nanga <bnanga@gmail.com>
Date: Sun, 20 Jul 2025 21:15:02 -0400
Subject: [PATCH 4/7] add new declarations #87

---
 src/lib/syntax/syntax.ts       |  4 ++++
 src/lib/validation/config.json |  7 +++++--
 tools/validation.ts            | 13 +++++++++++++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/lib/syntax/syntax.ts b/src/lib/syntax/syntax.ts
index c865d517..b93b4a37 100644
--- a/src/lib/syntax/syntax.ts
+++ b/src/lib/syntax/syntax.ts
@@ -56,6 +56,8 @@ export const pseudoElements: string[] = [':before', ':after', ':first-line', ':f
 // https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions
 export const pseudoAliasMap: Record<string, string> =
     {
+        '-moz-center': 'center',
+        '-webkit-center': 'center',
         '-ms-grid-columns': 'grid-template-columns',
         '-ms-grid-rows': 'grid-template-rows',
         '-ms-grid-row': 'grid-row-start',
@@ -68,6 +70,7 @@ export const pseudoAliasMap: Record<string, string> =
         '::-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',
@@ -225,6 +228,7 @@ export const webkitExtensions = new Set([
     '-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',
diff --git a/src/lib/validation/config.json b/src/lib/validation/config.json
index 94f26758..8e33ab63 100644
--- a/src/lib/validation/config.json
+++ b/src/lib/validation/config.json
@@ -1612,7 +1612,7 @@
    "syntax": "auto | fixed"
   },
   "text-align": {
-   "syntax": "start | end | left | right | center | justify | match-parent"
+   "syntax": "start | end | left | right | center | justify | match-parent | -moz-center | -webkit-center | -webkit-match-parent"
   },
   "text-align-last": {
    "syntax": "auto | start | end | left | right | center | justify"
@@ -1843,7 +1843,7 @@
    "syntax": "auto | grayscale"
   },
   "-moz-user-select": {
-   "syntax": "none | text | all | -moz-none"
+   "syntax": "none | text | all | -moz-none | auto | element | elements | text | toggle"
   },
   "-ms-flex-align": {
    "syntax": "start | end | center | baseline | stretch"
@@ -3609,6 +3609,9 @@
   },
   "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"
   }
  },
  "selectors": {
diff --git a/tools/validation.ts b/tools/validation.ts
index 7f0f722a..0c98e4bb 100644
--- a/tools/validation.ts
+++ b/tools/validation.ts
@@ -75,6 +75,11 @@ for (const [key, value] of Object.entries(patches.types)) {
     }
 }
 
+if (!('auto' in json.declarations['-moz-user-select'])) {
+
+    json.declarations['-moz-user-select'].syntax += ' | auto | element | elements | text | toggle';
+}
+
 if (!(':-webkit-any()' in json.selectors)) {
 
     json.selectors[':-webkit-any()'] = {syntax: ':-webkit-any( <forgiving-selector-list> )'};
@@ -85,6 +90,14 @@ if (!(':-webkit-any-link' in json.selectors)) {
     json.selectors[':-webkit-any-link'] = {syntax: ':-webkit-any-link'};
 }
 
+if (!('-non-standard-text-align' in json.syntaxes)) {
+
+    json.syntaxes['-non-standard-text-align'] = {syntax: '| -moz-center | -webkit-center | -webkit-match-parent'};
+
+    // @ts-ignore
+    json.declarations['text-align' as keyof typeof json.declarations].syntax += ' ' + json.syntaxes['-non-standard-text-align'].syntax;
+}
+
 await writeFile(import.meta.dirname + '/../src/lib/validation/config.json', JSON.stringify(json, null, 1));
 console.debug(json);
 

From a35592eee95c2c773a523694c86f1aebad3e2753 Mon Sep 17 00:00:00 2001
From: Thierry Bela Nanga <bnanga@gmail.com>
Date: Sun, 20 Jul 2025 21:19:16 -0400
Subject: [PATCH 5/7] increase mocha timeout #87

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 6bbe935c..50a7cee0 100644
--- a/package.json
+++ b/package.json
@@ -16,11 +16,11 @@
   },
   "scripts": {
     "build": "rollup -c;./build.sh dist/index.d.ts 'declare interface' 'declare type'",
-    "test": "web-test-runner \"test/**/web.spec.js\" --node-resolve --playwright --browsers chromium firefox webkit --root-dir=.; mocha --reporter-options='maxDiffSize=1801920' \"test/**/node.spec.js\"",
+    "test": "web-test-runner \"test/**/web.spec.js\" --node-resolve --playwright --browsers chromium firefox webkit --root-dir=.; mocha --reporter-options='maxDiffSize=1801920' --timeout=10000 \"test/**/node.spec.js\"",
     "test:web": "web-test-runner \"test/**/web.spec.js\" --node-resolve --playwright --browsers chromium firefox webkit --root-dir=.",
     "test:node": "mocha --reporter-options='maxDiffSize=1801920' \"test/**/node.spec.js\"",
     "test:local": "mocha --reporter-options='maxDiffSize=1801920' \"test/**/local.spec.js\"",
-    "test:cov": "c8 -x 'test/specs/**/*.js' -x dist/lib/validation/syntax.js -x 'dist/lib/validation/parser/*.js' --reporter=html --reporter=text --reporter=json-summary mocha --reporter-options='maxDiffSize=1801920' \"test/**/node.spec.js\"",
+    "test:cov": "c8 -x 'test/specs/**/*.js' -x dist/lib/validation/syntax.js -x 'dist/lib/validation/parser/*.js' --reporter=html --reporter=text --reporter=json-summary mocha --reporter-options='maxDiffSize=1801920' --timeout=10000 \"test/**/node.spec.js\"",
     "test:web-cov": "web-test-runner -x 'test/specs/**/*.js' -x dist/lib/validation/syntax.js,dist/lib/validation/parser \"test/**/web.spec.js\" --node-resolve --playwright --browsers chromium firefox webkit --root-dir=. --coverage",
     "profile": "node --enable-source-maps --inspect-brk test/inspect.js",
     "syntax-update": "esno tools/validation.ts",

From 752b59fbbf45b3646b587b89aad0d7a19324b5e7 Mon Sep 17 00:00:00 2001
From: Thierry Bela Nanga <bnanga@gmail.com>
Date: Wed, 23 Jul 2025 20:06:46 -0400
Subject: [PATCH 6/7] fix validation bug and add missing syntaxes #87

---
 dist/index-umd-web.js               | 50 ++++++++++++-----------------
 dist/index.cjs                      | 50 ++++++++++++-----------------
 dist/lib/syntax/syntax.js           |  4 +++
 dist/lib/validation/config.json.js  |  7 ++--
 dist/lib/validation/parser/parse.js |  7 ++--
 dist/lib/validation/syntax.js       | 32 +++++-------------
 jsr.json                            |  2 +-
 package.json                        |  2 +-
 src/lib/validation/config.json      |  2 +-
 src/lib/validation/parser/parse.ts  |  9 +++---
 src/lib/validation/syntax.ts        | 47 ++++++++-------------------
 test/specs/code/validation.js       |  4 +--
 tools/validation.ts                 |  7 +++-
 13 files changed, 88 insertions(+), 135 deletions(-)

diff --git a/dist/index-umd-web.js b/dist/index-umd-web.js
index 12854e8c..c645bd40 100644
--- a/dist/index-umd-web.js
+++ b/dist/index-umd-web.js
@@ -4295,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',
@@ -4307,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',
@@ -4463,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',
@@ -9015,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"
@@ -9246,7 +9250,7 @@
     		syntax: "auto | grayscale"
     	},
     	"-moz-user-select": {
-    		syntax: "none | text | all | -moz-none"
+    		syntax: "none | text | all | -moz-none | auto | element | elements | text | toggle"
     	},
     	"-ms-flex-align": {
     		syntax: "start | end | center | baseline | stretch"
@@ -11012,6 +11016,9 @@
     	},
     	"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 = {
@@ -11835,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) {
@@ -12526,9 +12532,9 @@
                 const type = getTokenType(match[3]);
                 return Object.defineProperty({
                     typ: ValidationTokenEnum.PropertyType,
-                    val: type.val,
+                    val: match[1],
                     unit: exports.EnumToken[type.typ],
-                    range: [+type.val, match[4] == '\u221e' ? Infinity : +match[4]]
+                    range: [+type.val, match[4] == '\u221e' ? null : +match[4]]
                 }, 'pos', { ...objectProperties, value: pos });
             }
             return Object.defineProperty({
@@ -12599,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:
@@ -13423,6 +13429,7 @@
                     break;
                 }
                 ast = getParsedSyntax("declarations" /* ValidationSyntaxGroupEnum.Declarations */, node.nam);
+                // console.error({ast: ast.reduce((acc, curr) => acc + renderSyntax(curr), '')});
                 if (ast != null) {
                     let token = null;
                     const values = node.val.slice();
@@ -13442,6 +13449,7 @@
                         }
                     }
                     result = doEvaluateSyntax(ast, createContext(values), { ...options, visited: new WeakMap() });
+                    // console.error(JSON.stringify({ast, values, result}, null, 1));
                     if (result.valid == SyntaxValidationResult.Valid && !result.context.done()) {
                         let token = null;
                         while ((token = result.context.next()) != null) {
@@ -13500,8 +13508,6 @@
         let i = 0;
         let result;
         let token = null;
-        // console.error(`>> doEvaluateSyntax: ${syntaxes.reduce((acc, curr) => acc + renderSyntax(curr), '')}`, context.peek());
-        // console.error(new Error('doEvaluateSyntax'));
         for (; i < syntaxes.length; i++) {
             syntax = syntaxes[i];
             if (context.done()) {
@@ -13511,7 +13517,6 @@
                 break;
             }
             token = context.peek();
-            // console.error(`>> doEvaluateSyntax: ${ renderSyntax(syntax)}`, context.peek());
             if (syntax.typ == ValidationTokenEnum.Whitespace) {
                 if (context.peek()?.typ == exports.EnumToken.WhitespaceTokenType) {
                     context.next();
@@ -13545,7 +13550,6 @@
                     clearVisited(token, syntax, 'doEvaluateSyntax', options);
                 }
             }
-            // console.error(`>> doEvaluateSyntax: ${ renderSyntax(syntax)}\nvalid:${result.valid == SyntaxValidationResult.Valid ? 'valid' : 'invalid'}\n`, context.peek());
             if (result.valid == SyntaxValidationResult.Drop) {
                 if (syntax.isOptional) {
                     continue;
@@ -13554,7 +13558,8 @@
             }
             context.update(result.context);
         }
-        return {
+        // @ts-ignore
+        return result ?? {
             valid: SyntaxValidationResult.Valid,
             node: null,
             syntax: syntaxes[i - 1],
@@ -13619,13 +13624,11 @@
                     context
                 };
             }
-            // console.error(`>> matchList: ${tokens.reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
             result = doEvaluateSyntax([syntax], createContext(tokens), {
                 ...options,
                 isList: false,
                 occurence: false
             });
-            // console.error(`>> matchList: ${tokens.reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}\n>> result: ${result.valid == SyntaxValidationResult.Valid ? 'valid' : 'invalid'}\n${JSON.stringify(result, null, 1)}`);
             if (result.valid == SyntaxValidationResult.Valid) {
                 context = con.clone();
                 count++;
@@ -13684,7 +13687,6 @@
         let success = false;
         let result;
         let token = context.peek();
-        // console.error(`>> match: ${renderSyntax(syntax)}`);
         switch (syntax.typ) {
             case ValidationTokenEnum.PipeToken:
                 return someOf(syntax.chi, context, options);
@@ -13699,7 +13701,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
@@ -13734,7 +13736,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
@@ -13970,8 +13972,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':
@@ -14062,7 +14064,6 @@
                 context.next();
             }
             result = doEvaluateSyntax(syntaxes[i], context.clone(), options);
-            // console.error(JSON.stringify({result, syntax: syntaxes[i], context, slice: context.slice()}, null, 1));
             if (result.valid == SyntaxValidationResult.Valid) {
                 success = true;
                 if (result.context.done()) {
@@ -14075,7 +14076,6 @@
             // pick the best match
             matched.sort((a, b) => a.context.done() ? -1 : b.context.done() ? 1 : b.context.index - a.context.index);
         }
-        // console.error(JSON.stringify({matched, context, slice: context.slice(), syntaxes}, null, 1));
         return matched[0] ?? {
             valid: SyntaxValidationResult.Drop,
             node: context.current(),
@@ -14148,13 +14148,8 @@
         const con = createContext(tokens);
         let cp;
         let j;
-        // console.error(`>> allOf:syntax: ${syntax.reduce((acc, curr, index) => acc + (index > 0 ? ' && ' : '') + curr.reduce((acc, curr) => acc + renderSyntax(curr), ''), '')}`);
-        // console.error(`>> allOf:tokens: ${con.slice<Token>().reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
-        // console.error(`>> allOf:tokens:slice: ${context.slice<Token>().reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
         for (i = 0; i < syntax.length; i++) {
-            // console.error(`>> allOf:${i}:${syntax[i].reduce((acc, curr) => acc + renderSyntax(curr), '')}:current()`, con.current());
             if (syntax[i].length == 1 && syntax[i][0].isOptional) {
-                // syntax[i][0 = structuredClone(syntax[i][0]);
                 syntax[i][0].isOptional = false;
                 j = 0;
                 cp = con.clone();
@@ -14163,7 +14158,6 @@
                     syntax[i][0].isOptional = true;
                     syntax.splice(i, 1);
                     i = -1;
-                    // console.error(`>> allOf:done:peek: `, con.peek());
                     continue;
                 }
                 while (!cp.done()) {
@@ -14184,12 +14178,8 @@
                 }
                 syntax[i][0].isOptional = true;
                 // @ts-ignore
-                // console.error(`>> allOf:result valid: `, result?.valid == SyntaxValidationResult.Valid, con.current<Token>());
-                // @ts-ignore
                 if (result?.valid == SyntaxValidationResult.Valid) {
                     syntax.splice(i, 1);
-                    // console.error(`>> allOf:syntaxes: ${syntax.reduce((acc, curr, index) => acc + (index > 0 ? ' && ' : '') + curr.reduce((acc, curr) => acc + renderSyntax(curr), ''), '')}`);
-                    // console.error(`>> allOf:context:`, JSON.stringify(con, null, 1));
                     i = -1;
                 }
                 continue;
diff --git a/dist/index.cjs b/dist/index.cjs
index 2c45b987..d3c69d71 100644
--- a/dist/index.cjs
+++ b/dist/index.cjs
@@ -4294,6 +4294,8 @@ const pseudoElements = [':before', ':after', ':first-line', ':first-letter'];
 // 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',
@@ -4306,6 +4308,7 @@ const pseudoAliasMap = {
     '::-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',
@@ -4462,6 +4465,7 @@ const webkitExtensions = new Set([
     '-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',
@@ -9014,7 +9018,7 @@ var declarations = {
 		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"
@@ -9245,7 +9249,7 @@ var declarations = {
 		syntax: "auto | grayscale"
 	},
 	"-moz-user-select": {
-		syntax: "none | text | all | -moz-none"
+		syntax: "none | text | all | -moz-none | auto | element | elements | text | toggle"
 	},
 	"-ms-flex-align": {
 		syntax: "start | end | center | baseline | stretch"
@@ -11011,6 +11015,9 @@ var syntaxes = {
 	},
 	"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 = {
@@ -11834,7 +11841,6 @@ function matchParens(syntax, iterator) {
     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) {
@@ -12525,9 +12531,9 @@ function getTokenType$1(token, position, currentPosition) {
             const type = getTokenType(match[3]);
             return Object.defineProperty({
                 typ: ValidationTokenEnum.PropertyType,
-                val: type.val,
+                val: match[1],
                 unit: exports.EnumToken[type.typ],
-                range: [+type.val, match[4] == '\u221e' ? Infinity : +match[4]]
+                range: [+type.val, match[4] == '\u221e' ? null : +match[4]]
             }, 'pos', { ...objectProperties, value: pos });
         }
         return Object.defineProperty({
@@ -12598,7 +12604,7 @@ function renderSyntax(token, parent) {
         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:
@@ -13532,6 +13538,7 @@ function evaluateSyntax(node, options) {
                 break;
             }
             ast = getParsedSyntax("declarations" /* ValidationSyntaxGroupEnum.Declarations */, node.nam);
+            // console.error({ast: ast.reduce((acc, curr) => acc + renderSyntax(curr), '')});
             if (ast != null) {
                 let token = null;
                 const values = node.val.slice();
@@ -13551,6 +13558,7 @@ function evaluateSyntax(node, options) {
                     }
                 }
                 result = doEvaluateSyntax(ast, createContext(values), { ...options, visited: new WeakMap() });
+                // console.error(JSON.stringify({ast, values, result}, null, 1));
                 if (result.valid == SyntaxValidationResult.Valid && !result.context.done()) {
                     let token = null;
                     while ((token = result.context.next()) != null) {
@@ -13609,8 +13617,6 @@ function doEvaluateSyntax(syntaxes, context, options) {
     let i = 0;
     let result;
     let token = null;
-    // console.error(`>> doEvaluateSyntax: ${syntaxes.reduce((acc, curr) => acc + renderSyntax(curr), '')}`, context.peek());
-    // console.error(new Error('doEvaluateSyntax'));
     for (; i < syntaxes.length; i++) {
         syntax = syntaxes[i];
         if (context.done()) {
@@ -13620,7 +13626,6 @@ function doEvaluateSyntax(syntaxes, context, options) {
             break;
         }
         token = context.peek();
-        // console.error(`>> doEvaluateSyntax: ${ renderSyntax(syntax)}`, context.peek());
         if (syntax.typ == ValidationTokenEnum.Whitespace) {
             if (context.peek()?.typ == exports.EnumToken.WhitespaceTokenType) {
                 context.next();
@@ -13654,7 +13659,6 @@ function doEvaluateSyntax(syntaxes, context, options) {
                 clearVisited(token, syntax, 'doEvaluateSyntax', options);
             }
         }
-        // console.error(`>> doEvaluateSyntax: ${ renderSyntax(syntax)}\nvalid:${result.valid == SyntaxValidationResult.Valid ? 'valid' : 'invalid'}\n`, context.peek());
         if (result.valid == SyntaxValidationResult.Drop) {
             if (syntax.isOptional) {
                 continue;
@@ -13663,7 +13667,8 @@ function doEvaluateSyntax(syntaxes, context, options) {
         }
         context.update(result.context);
     }
-    return {
+    // @ts-ignore
+    return result ?? {
         valid: SyntaxValidationResult.Valid,
         node: null,
         syntax: syntaxes[i - 1],
@@ -13728,13 +13733,11 @@ function matchList(syntax, context, options) {
                 context
             };
         }
-        // console.error(`>> matchList: ${tokens.reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
         result = doEvaluateSyntax([syntax], createContext(tokens), {
             ...options,
             isList: false,
             occurence: false
         });
-        // console.error(`>> matchList: ${tokens.reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}\n>> result: ${result.valid == SyntaxValidationResult.Valid ? 'valid' : 'invalid'}\n${JSON.stringify(result, null, 1)}`);
         if (result.valid == SyntaxValidationResult.Valid) {
             context = con.clone();
             count++;
@@ -13793,7 +13796,6 @@ function match(syntax, context, options) {
     let success = false;
     let result;
     let token = context.peek();
-    // console.error(`>> match: ${renderSyntax(syntax)}`);
     switch (syntax.typ) {
         case ValidationTokenEnum.PipeToken:
             return someOf(syntax.chi, context, options);
@@ -13808,7 +13810,7 @@ function match(syntax, context, options) {
             }
             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
@@ -13843,7 +13845,7 @@ function match(syntax, context, options) {
     }
     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
@@ -14079,8 +14081,8 @@ function matchPropertyType(syntax, context, options) {
         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':
@@ -14171,7 +14173,6 @@ function someOf(syntaxes, context, options) {
             context.next();
         }
         result = doEvaluateSyntax(syntaxes[i], context.clone(), options);
-        // console.error(JSON.stringify({result, syntax: syntaxes[i], context, slice: context.slice()}, null, 1));
         if (result.valid == SyntaxValidationResult.Valid) {
             success = true;
             if (result.context.done()) {
@@ -14184,7 +14185,6 @@ function someOf(syntaxes, context, options) {
         // pick the best match
         matched.sort((a, b) => a.context.done() ? -1 : b.context.done() ? 1 : b.context.index - a.context.index);
     }
-    // console.error(JSON.stringify({matched, context, slice: context.slice(), syntaxes}, null, 1));
     return matched[0] ?? {
         valid: SyntaxValidationResult.Drop,
         node: context.current(),
@@ -14257,13 +14257,8 @@ function allOf(syntax, context, options) {
     const con = createContext(tokens);
     let cp;
     let j;
-    // console.error(`>> allOf:syntax: ${syntax.reduce((acc, curr, index) => acc + (index > 0 ? ' && ' : '') + curr.reduce((acc, curr) => acc + renderSyntax(curr), ''), '')}`);
-    // console.error(`>> allOf:tokens: ${con.slice<Token>().reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
-    // console.error(`>> allOf:tokens:slice: ${context.slice<Token>().reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
     for (i = 0; i < syntax.length; i++) {
-        // console.error(`>> allOf:${i}:${syntax[i].reduce((acc, curr) => acc + renderSyntax(curr), '')}:current()`, con.current());
         if (syntax[i].length == 1 && syntax[i][0].isOptional) {
-            // syntax[i][0 = structuredClone(syntax[i][0]);
             syntax[i][0].isOptional = false;
             j = 0;
             cp = con.clone();
@@ -14272,7 +14267,6 @@ function allOf(syntax, context, options) {
                 syntax[i][0].isOptional = true;
                 syntax.splice(i, 1);
                 i = -1;
-                // console.error(`>> allOf:done:peek: `, con.peek());
                 continue;
             }
             while (!cp.done()) {
@@ -14293,12 +14287,8 @@ function allOf(syntax, context, options) {
             }
             syntax[i][0].isOptional = true;
             // @ts-ignore
-            // console.error(`>> allOf:result valid: `, result?.valid == SyntaxValidationResult.Valid, con.current<Token>());
-            // @ts-ignore
             if (result?.valid == SyntaxValidationResult.Valid) {
                 syntax.splice(i, 1);
-                // console.error(`>> allOf:syntaxes: ${syntax.reduce((acc, curr, index) => acc + (index > 0 ? ' && ' : '') + curr.reduce((acc, curr) => acc + renderSyntax(curr), ''), '')}`);
-                // console.error(`>> allOf:context:`, JSON.stringify(con, null, 1));
                 i = -1;
             }
             continue;
diff --git a/dist/lib/syntax/syntax.js b/dist/lib/syntax/syntax.js
index fee99584..538665f6 100644
--- a/dist/lib/syntax/syntax.js
+++ b/dist/lib/syntax/syntax.js
@@ -40,6 +40,8 @@ const pseudoElements = [':before', ':after', ':first-line', ':first-letter'];
 // 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',
@@ -52,6 +54,7 @@ const pseudoAliasMap = {
     '::-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',
@@ -208,6 +211,7 @@ const webkitExtensions = new Set([
     '-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',
diff --git a/dist/lib/validation/config.json.js b/dist/lib/validation/config.json.js
index 3d74b99a..104c254e 100644
--- a/dist/lib/validation/config.json.js
+++ b/dist/lib/validation/config.json.js
@@ -1611,7 +1611,7 @@ var declarations = {
 		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"
@@ -1842,7 +1842,7 @@ var declarations = {
 		syntax: "auto | grayscale"
 	},
 	"-moz-user-select": {
-		syntax: "none | text | all | -moz-none"
+		syntax: "none | text | all | -moz-none | auto | element | elements | text | toggle"
 	},
 	"-ms-flex-align": {
 		syntax: "start | end | center | baseline | stretch"
@@ -3608,6 +3608,9 @@ var syntaxes = {
 	},
 	"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 = {
diff --git a/dist/lib/validation/parser/parse.js b/dist/lib/validation/parser/parse.js
index 8b54a38b..4ebd5aec 100644
--- a/dist/lib/validation/parser/parse.js
+++ b/dist/lib/validation/parser/parse.js
@@ -184,7 +184,6 @@ function matchParens(syntax, iterator) {
     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) {
@@ -875,9 +874,9 @@ function getTokenType(token, position, currentPosition) {
             const type = getTokenType$1(match[3]);
             return Object.defineProperty({
                 typ: ValidationTokenEnum.PropertyType,
-                val: type.val,
+                val: match[1],
                 unit: EnumToken[type.typ],
-                range: [+type.val, match[4] == '\u221e' ? Infinity : +match[4]]
+                range: [+type.val, match[4] == '\u221e' ? null : +match[4]]
             }, 'pos', { ...objectProperties, value: pos });
         }
         return Object.defineProperty({
@@ -948,7 +947,7 @@ function renderSyntax(token, parent) {
         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:
diff --git a/dist/lib/validation/syntax.js b/dist/lib/validation/syntax.js
index 9bf74b8a..2e0676b1 100644
--- a/dist/lib/validation/syntax.js
+++ b/dist/lib/validation/syntax.js
@@ -102,6 +102,7 @@ function evaluateSyntax(node, options) {
                 break;
             }
             ast = getParsedSyntax("declarations" /* ValidationSyntaxGroupEnum.Declarations */, node.nam);
+            // console.error({ast: ast.reduce((acc, curr) => acc + renderSyntax(curr), '')});
             if (ast != null) {
                 let token = null;
                 const values = node.val.slice();
@@ -121,6 +122,7 @@ function evaluateSyntax(node, options) {
                     }
                 }
                 result = doEvaluateSyntax(ast, createContext(values), { ...options, visited: new WeakMap() });
+                // console.error(JSON.stringify({ast, values, result}, null, 1));
                 if (result.valid == SyntaxValidationResult.Valid && !result.context.done()) {
                     let token = null;
                     while ((token = result.context.next()) != null) {
@@ -179,8 +181,6 @@ function doEvaluateSyntax(syntaxes, context, options) {
     let i = 0;
     let result;
     let token = null;
-    // console.error(`>> doEvaluateSyntax: ${syntaxes.reduce((acc, curr) => acc + renderSyntax(curr), '')}`, context.peek());
-    // console.error(new Error('doEvaluateSyntax'));
     for (; i < syntaxes.length; i++) {
         syntax = syntaxes[i];
         if (context.done()) {
@@ -190,7 +190,6 @@ function doEvaluateSyntax(syntaxes, context, options) {
             break;
         }
         token = context.peek();
-        // console.error(`>> doEvaluateSyntax: ${ renderSyntax(syntax)}`, context.peek());
         if (syntax.typ == ValidationTokenEnum.Whitespace) {
             if (context.peek()?.typ == EnumToken.WhitespaceTokenType) {
                 context.next();
@@ -224,7 +223,6 @@ function doEvaluateSyntax(syntaxes, context, options) {
                 clearVisited(token, syntax, 'doEvaluateSyntax', options);
             }
         }
-        // console.error(`>> doEvaluateSyntax: ${ renderSyntax(syntax)}\nvalid:${result.valid == SyntaxValidationResult.Valid ? 'valid' : 'invalid'}\n`, context.peek());
         if (result.valid == SyntaxValidationResult.Drop) {
             if (syntax.isOptional) {
                 continue;
@@ -233,7 +231,8 @@ function doEvaluateSyntax(syntaxes, context, options) {
         }
         context.update(result.context);
     }
-    return {
+    // @ts-ignore
+    return result ?? {
         valid: SyntaxValidationResult.Valid,
         node: null,
         syntax: syntaxes[i - 1],
@@ -298,13 +297,11 @@ function matchList(syntax, context, options) {
                 context
             };
         }
-        // console.error(`>> matchList: ${tokens.reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
         result = doEvaluateSyntax([syntax], createContext(tokens), {
             ...options,
             isList: false,
             occurence: false
         });
-        // console.error(`>> matchList: ${tokens.reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}\n>> result: ${result.valid == SyntaxValidationResult.Valid ? 'valid' : 'invalid'}\n${JSON.stringify(result, null, 1)}`);
         if (result.valid == SyntaxValidationResult.Valid) {
             context = con.clone();
             count++;
@@ -363,7 +360,6 @@ function match(syntax, context, options) {
     let success = false;
     let result;
     let token = context.peek();
-    // console.error(`>> match: ${renderSyntax(syntax)}`);
     switch (syntax.typ) {
         case ValidationTokenEnum.PipeToken:
             return someOf(syntax.chi, context, options);
@@ -378,7 +374,7 @@ function match(syntax, context, options) {
             }
             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
@@ -413,7 +409,7 @@ function match(syntax, context, options) {
     }
     switch (syntax.typ) {
         case ValidationTokenEnum.Keyword:
-            success = (token.typ == EnumToken.IdenTokenType || token.typ == EnumToken.DashedIdenTokenType) &&
+            success = (token.typ == EnumToken.IdenTokenType || token.typ == EnumToken.DashedIdenTokenType || isIdentColor(token)) &&
                 (token.val == syntax.val ||
                     syntax.val.localeCompare(token.val, undefined, { sensitivity: 'base' }) == 0 ||
                     // config.declarations.all
@@ -649,8 +645,8 @@ function matchPropertyType(syntax, context, options) {
         case 'number':
         case 'number-token':
             success = token.typ == 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':
@@ -741,7 +737,6 @@ function someOf(syntaxes, context, options) {
             context.next();
         }
         result = doEvaluateSyntax(syntaxes[i], context.clone(), options);
-        // console.error(JSON.stringify({result, syntax: syntaxes[i], context, slice: context.slice()}, null, 1));
         if (result.valid == SyntaxValidationResult.Valid) {
             success = true;
             if (result.context.done()) {
@@ -754,7 +749,6 @@ function someOf(syntaxes, context, options) {
         // pick the best match
         matched.sort((a, b) => a.context.done() ? -1 : b.context.done() ? 1 : b.context.index - a.context.index);
     }
-    // console.error(JSON.stringify({matched, context, slice: context.slice(), syntaxes}, null, 1));
     return matched[0] ?? {
         valid: SyntaxValidationResult.Drop,
         node: context.current(),
@@ -827,13 +821,8 @@ function allOf(syntax, context, options) {
     const con = createContext(tokens);
     let cp;
     let j;
-    // console.error(`>> allOf:syntax: ${syntax.reduce((acc, curr, index) => acc + (index > 0 ? ' && ' : '') + curr.reduce((acc, curr) => acc + renderSyntax(curr), ''), '')}`);
-    // console.error(`>> allOf:tokens: ${con.slice<Token>().reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
-    // console.error(`>> allOf:tokens:slice: ${context.slice<Token>().reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
     for (i = 0; i < syntax.length; i++) {
-        // console.error(`>> allOf:${i}:${syntax[i].reduce((acc, curr) => acc + renderSyntax(curr), '')}:current()`, con.current());
         if (syntax[i].length == 1 && syntax[i][0].isOptional) {
-            // syntax[i][0 = structuredClone(syntax[i][0]);
             syntax[i][0].isOptional = false;
             j = 0;
             cp = con.clone();
@@ -842,7 +831,6 @@ function allOf(syntax, context, options) {
                 syntax[i][0].isOptional = true;
                 syntax.splice(i, 1);
                 i = -1;
-                // console.error(`>> allOf:done:peek: `, con.peek());
                 continue;
             }
             while (!cp.done()) {
@@ -863,12 +851,8 @@ function allOf(syntax, context, options) {
             }
             syntax[i][0].isOptional = true;
             // @ts-ignore
-            // console.error(`>> allOf:result valid: `, result?.valid == SyntaxValidationResult.Valid, con.current<Token>());
-            // @ts-ignore
             if (result?.valid == SyntaxValidationResult.Valid) {
                 syntax.splice(i, 1);
-                // console.error(`>> allOf:syntaxes: ${syntax.reduce((acc, curr, index) => acc + (index > 0 ? ' && ' : '') + curr.reduce((acc, curr) => acc + renderSyntax(curr), ''), '')}`);
-                // console.error(`>> allOf:context:`, JSON.stringify(con, null, 1));
                 i = -1;
             }
             continue;
diff --git a/jsr.json b/jsr.json
index 05ae638e..9502d136 100644
--- a/jsr.json
+++ b/jsr.json
@@ -1,6 +1,6 @@
 {
   "name": "@tbela99/css-parser",
-  "version": "1.1.1-alpha2",
+  "version": "1.1.1-alpha3",
   "publish": {
     "include": [
       "src",
diff --git a/package.json b/package.json
index 50a7cee0..7bb96330 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@tbela99/css-parser",
   "description": "CSS parser for node and the browser",
-  "version": "v1.1.1-alpha2",
+  "version": "v1.1.1-alpha3",
   "exports": {
     ".": "./dist/node/index.js",
     "./node": "./dist/node/index.js",
diff --git a/src/lib/validation/config.json b/src/lib/validation/config.json
index 8e33ab63..e0bda057 100644
--- a/src/lib/validation/config.json
+++ b/src/lib/validation/config.json
@@ -1612,7 +1612,7 @@
    "syntax": "auto | fixed"
   },
   "text-align": {
-   "syntax": "start | end | left | right | center | justify | match-parent | -moz-center | -webkit-center | -webkit-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"
diff --git a/src/lib/validation/parser/parse.ts b/src/lib/validation/parser/parse.ts
index b089ab5d..b60dd381 100644
--- a/src/lib/validation/parser/parse.ts
+++ b/src/lib/validation/parser/parse.ts
@@ -311,8 +311,6 @@ function matchParens(syntax: string, iterator: Iterator<ValidationTokenIteratorV
 
     while ((item = iterator.next() as ValidationTokenIteratorValue) && !item.done) {
 
-        // console.error(JSON.stringify({match, val: item.value,func}, null, 1));
-
         switch (item.value.typ) {
 
             case ValidationTokenEnum.OpenParenthesis:
@@ -1307,9 +1305,9 @@ function getTokenType(token: string, position: Position, currentPosition: Positi
 
             return <ValidationPropertyToken>Object.defineProperty({
                 typ: ValidationTokenEnum.PropertyType,
-                val: type.val,
+                val: match[1],
                 unit: EnumToken[type.typ],
-                range: [+type.val, match[4] == '\u221e' ? Infinity : +match[4]]
+                range: [+type.val, match[4] == '\u221e' ? null : +match[4]]
             }, 'pos', {...objectProperties, value: pos});
         }
 
@@ -1427,9 +1425,10 @@ export function renderSyntax(token: ValidationToken, parent?: ValidationToken):
 
             return '[' + (token as ValidationBracketToken).chi.reduce((acc: string, curr: ValidationToken) => acc + renderSyntax(curr), '') + ']' + renderAttributes(token);
 
+
         case ValidationTokenEnum.PropertyType:
 
-            return '<' + (token as ValidationPropertyToken).val + '>' + renderAttributes(token);
+            return '<' + (token as ValidationPropertyToken).val + (Array.isArray((token as ValidationPropertyToken).range) ? `[${(token as ValidationPropertyToken)?.range?.[0]}, ${(token as ValidationPropertyToken)?.range?.[1] ?? '\u221e'}]` : '') + '>' + renderAttributes(token);
 
         case ValidationTokenEnum.DeclarationType:
 
diff --git a/src/lib/validation/syntax.ts b/src/lib/validation/syntax.ts
index 5a2964ef..ece547f3 100644
--- a/src/lib/validation/syntax.ts
+++ b/src/lib/validation/syntax.ts
@@ -168,6 +168,8 @@ export function evaluateSyntax(node: AstNode, options: ValidationOptions): Valid
 
             ast = getParsedSyntax(ValidationSyntaxGroupEnum.Declarations, (node as AstDeclaration).nam);
 
+            // console.error({ast: ast.reduce((acc, curr) => acc + renderSyntax(curr), '')});
+
             if (ast != null) {
 
                 let token: Token | null = null;
@@ -199,6 +201,8 @@ export function evaluateSyntax(node: AstNode, options: ValidationOptions): Valid
 
                 result = doEvaluateSyntax(ast, createContext(values), {...options, visited: new WeakMap()});
 
+                // console.error(JSON.stringify({ast, values, result}, null, 1));
+
                 if (result.valid == SyntaxValidationResult.Valid && !(result.context as Context<Token>).done()) {
 
                     let token: Token | null = null;
@@ -280,9 +284,6 @@ export function doEvaluateSyntax(syntaxes: ValidationToken[], context: Context<T
     let result: ValidationSyntaxResult;
     let token: Token | null = null;
 
-    // console.error(`>> doEvaluateSyntax: ${syntaxes.reduce((acc, curr) => acc + renderSyntax(curr), '')}`, context.peek());
-    // console.error(new Error('doEvaluateSyntax'));
-
     for (; i < syntaxes.length; i++) {
 
         syntax = syntaxes[i];
@@ -298,7 +299,6 @@ export function doEvaluateSyntax(syntaxes: ValidationToken[], context: Context<T
         }
 
         token = context.peek<Token>() as Token;
-        // console.error(`>> doEvaluateSyntax: ${ renderSyntax(syntax)}`, context.peek());
 
         if (syntax.typ == ValidationTokenEnum.Whitespace) {
 
@@ -342,8 +342,6 @@ export function doEvaluateSyntax(syntaxes: ValidationToken[], context: Context<T
             }
         }
 
-        // console.error(`>> doEvaluateSyntax: ${ renderSyntax(syntax)}\nvalid:${result.valid == SyntaxValidationResult.Valid ? 'valid' : 'invalid'}\n`, context.peek());
-
         if (result.valid == SyntaxValidationResult.Drop) {
 
             if (syntax.isOptional) {
@@ -357,7 +355,8 @@ export function doEvaluateSyntax(syntaxes: ValidationToken[], context: Context<T
         context.update(result.context as Context<Token>);
     }
 
-    return {
+    // @ts-ignore
+    return result ?? {
 
         valid: SyntaxValidationResult.Valid,
         node: null,
@@ -448,16 +447,12 @@ function matchList(syntax: ValidationToken, context: Context<Token>, options: Va
             }
         }
 
-        // console.error(`>> matchList: ${tokens.reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
-
         result = doEvaluateSyntax([syntax], createContext(tokens), {
             ...options,
             isList: false,
             occurence: false
         } as ValidationOptions);
 
-        // console.error(`>> matchList: ${tokens.reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}\n>> result: ${result.valid == SyntaxValidationResult.Valid ? 'valid' : 'invalid'}\n${JSON.stringify(result, null, 1)}`);
-
         if (result.valid == SyntaxValidationResult.Valid) {
 
             context = con.clone();
@@ -544,8 +539,6 @@ function match(syntax: ValidationToken, context: Context<Token>, options: Valida
     let result: ValidationSyntaxResult;
     let token: Token | null = context.peek() as Token;
 
-    // console.error(`>> match: ${renderSyntax(syntax)}`);
-
     switch (syntax.typ) {
 
         case ValidationTokenEnum.PipeToken:
@@ -571,7 +564,7 @@ function match(syntax: ValidationToken, context: Context<Token>, options: Valida
 
             return {
                 valid: SyntaxValidationResult.Drop,
-                node: context.next(),
+                node: context.current(),
                 syntax,
                 error: `expected '${ValidationTokenEnum[syntax.typ].toLowerCase()}', got '${context.done() ? null : renderToken(context.peek() as Token)}'`,
                 context
@@ -618,7 +611,7 @@ function match(syntax: ValidationToken, context: Context<Token>, options: Valida
 
         case ValidationTokenEnum.Keyword:
 
-            success = (token.typ == EnumToken.IdenTokenType || token.typ == EnumToken.DashedIdenTokenType) &&
+            success = (token.typ == EnumToken.IdenTokenType || token.typ == EnumToken.DashedIdenTokenType || isIdentColor(token)) &&
                 ((token as IdentToken).val == (syntax as ValidationKeywordToken).val ||
                     (syntax as ValidationKeywordToken).val.localeCompare((token as IdentToken).val, undefined, {sensitivity: 'base'}) == 0 ||
                     // config.declarations.all
@@ -958,9 +951,9 @@ function matchPropertyType(syntax: ValidationPropertyToken, context: Context<Tok
 
             success = token.typ == EnumToken.NumberTokenType;
 
-            if ('range' in syntax) {
+            if (success && 'range' in syntax) {
 
-                success = success && +(token as NumberToken).val >= +((syntax as ValidationPropertyToken).range![0] as number) && +(token as NumberToken).val <= +((syntax as ValidationPropertyToken).range![1] as number);
+                success = +(token as NumberToken).val >= +((syntax as ValidationPropertyToken).range![0] as number) && ((syntax as ValidationPropertyToken).range![1] == null || +(token as NumberToken).val <= +((syntax as ValidationPropertyToken).range![1] as number));
             }
 
             break;
@@ -1084,6 +1077,7 @@ function someOf(syntaxes: ValidationToken[][], context: Context<Token>, options:
     let result: ValidationSyntaxResult;
     let i: number;
     let success: boolean = false;
+    let isOptional:boolean;
     const matched: ValidationSyntaxResult[] = [];
 
     for (i = 0; i < syntaxes.length; i++) {
@@ -1095,8 +1089,6 @@ function someOf(syntaxes: ValidationToken[][], context: Context<Token>, options:
 
         result = doEvaluateSyntax(syntaxes[i], context.clone(), options);
 
-        // console.error(JSON.stringify({result, syntax: syntaxes[i], context, slice: context.slice()}, null, 1));
-
         if (result.valid == SyntaxValidationResult.Valid) {
 
             success = true;
@@ -1116,8 +1108,6 @@ function someOf(syntaxes: ValidationToken[][], context: Context<Token>, options:
         matched.sort((a, b) => (a.context as Context<Token>).done() ? -1 : (b.context as Context<Token>).done() ? 1 : (b.context as Context<Token>).index - (a.context as Context<Token>).index);
     }
 
-    // console.error(JSON.stringify({matched, context, slice: context.slice(), syntaxes}, null, 1));
-
     return matched[0] ?? {
         valid: SyntaxValidationResult.Drop,
         node: context.current(),
@@ -1132,6 +1122,7 @@ function anyOf(syntaxes: ValidationToken[][], context: Context<Token>, options:
     let result: ValidationSyntaxResult;
     let i: number;
     let success: boolean = false;
+    let isOptional:boolean;
 
     for (i = 0; i < syntaxes.length; i++) {
 
@@ -1222,17 +1213,10 @@ function allOf(syntax: ValidationToken[][], context: Context<Token>, options: Va
     let cp: Context<Token>;
     let j: number;
 
-    // console.error(`>> allOf:syntax: ${syntax.reduce((acc, curr, index) => acc + (index > 0 ? ' && ' : '') + curr.reduce((acc, curr) => acc + renderSyntax(curr), ''), '')}`);
-    // console.error(`>> allOf:tokens: ${con.slice<Token>().reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
-    // console.error(`>> allOf:tokens:slice: ${context.slice<Token>().reduce((acc, curr, index) => acc + (index > 0 ? ' ' : '') + renderToken(curr), '')}`);
-
     for (i = 0; i < syntax.length; i++) {
 
-        // console.error(`>> allOf:${i}:${syntax[i].reduce((acc, curr) => acc + renderSyntax(curr), '')}:current()`, con.current());
-
         if (syntax[i].length == 1 && syntax[i][0].isOptional) {
 
-            // syntax[i][0 = structuredClone(syntax[i][0]);
             syntax[i][0].isOptional = false;
 
             j = 0;
@@ -1244,7 +1228,7 @@ function allOf(syntax: ValidationToken[][], context: Context<Token>, options: Va
                 syntax[i][0].isOptional = true;
                 syntax.splice(i, 1);
                 i = -1;
-                // console.error(`>> allOf:done:peek: `, con.peek());
+
                 continue;
             }
 
@@ -1274,15 +1258,10 @@ function allOf(syntax: ValidationToken[][], context: Context<Token>, options: Va
 
             syntax[i][0].isOptional = true;
 
-            // @ts-ignore
-            // console.error(`>> allOf:result valid: `, result?.valid == SyntaxValidationResult.Valid, con.current<Token>());
-
             // @ts-ignore
             if (result?.valid == SyntaxValidationResult.Valid) {
 
                 syntax.splice(i, 1);
-                // console.error(`>> allOf:syntaxes: ${syntax.reduce((acc, curr, index) => acc + (index > 0 ? ' && ' : '') + curr.reduce((acc, curr) => acc + renderSyntax(curr), ''), '')}`);
-                // console.error(`>> allOf:context:`, JSON.stringify(con, null, 1));
                 i = -1;
             }
 
diff --git a/test/specs/code/validation.js b/test/specs/code/validation.js
index a07a4bbb..ec504bed 100644
--- a/test/specs/code/validation.js
+++ b/test/specs/code/validation.js
@@ -508,13 +508,13 @@ html, body, div, span, applet, object, iframe,
 }`));
         });
 
-        it('validation #21', function (done) {
+        it('file validation #21', function (done) {
 
             transform(`@import '${import.meta.dirname ?? dirname(new URL(import.meta.url).pathname)}/../../files/css/full.css';
 `, {validation: true, resolveImport: true}).then(result => expect(result.errors.length).equals(1)).then(() => done(), () => done());
         });
 
-        it('validation #22', function (done) {
+        it('file validation #22', function (done) {
 
             transform(`@import '${import.meta.dirname ?? dirname(new URL(import.meta.url).pathname)}/../../files/css/bootstrap.css';
 `, {
diff --git a/tools/validation.ts b/tools/validation.ts
index 0c98e4bb..68b826d4 100644
--- a/tools/validation.ts
+++ b/tools/validation.ts
@@ -80,6 +80,11 @@ if (!('auto' in json.declarations['-moz-user-select'])) {
     json.declarations['-moz-user-select'].syntax += ' | auto | element | elements | text | toggle';
 }
 
+if (!('-ms-overflow-style' in json.declarations)) {
+
+    json.declarations['-ms-overflow-style'] = {syntax: 'auto | none | scrollbar | -ms-autohiding-scrollbar'};
+}
+
 if (!(':-webkit-any()' in json.selectors)) {
 
     json.selectors[':-webkit-any()'] = {syntax: ':-webkit-any( <forgiving-selector-list> )'};
@@ -95,7 +100,7 @@ if (!('-non-standard-text-align' in json.syntaxes)) {
     json.syntaxes['-non-standard-text-align'] = {syntax: '| -moz-center | -webkit-center | -webkit-match-parent'};
 
     // @ts-ignore
-    json.declarations['text-align' as keyof typeof json.declarations].syntax += ' ' + json.syntaxes['-non-standard-text-align'].syntax;
+    json.declarations['text-align' as keyof typeof json.declarations].syntax += ' | <-non-standard-text-align>';
 }
 
 await writeFile(import.meta.dirname + '/../src/lib/validation/config.json', JSON.stringify(json, null, 1));

From 99d136087a0c33d62333fc2ce4a635a65c97e925 Mon Sep 17 00:00:00 2001
From: Thierry Bela Nanga <bnanga@gmail.com>
Date: Thu, 24 Jul 2025 03:18:21 -0400
Subject: [PATCH 7/7] fix validation issues #87

---
 CHANGELOG.md                              |   4 +
 dist/index-umd-web.js                     | 211 ++++++++++++++++------
 dist/index.cjs                            | 211 ++++++++++++++++------
 dist/lib/validation/config.json.js        |  94 +++++-----
 dist/lib/validation/syntax.js             | 117 ++++++++++--
 jsr.json                                  |   2 +-
 package.json                              |   3 +-
 src/lib/renderer/color/utils/constants.ts |   2 +-
 src/lib/validation/config.json            |  94 +++++-----
 src/lib/validation/syntax.ts              | 146 +++++++++++++--
 test/specs/code/validation.js             |  27 +++
 test/specs/local.spec.js                  |  13 --
 test/specs/local/index.js                 |   2 -
 test/specs/local/validation.js            |  18 --
 tools/local-patch.json                    |  26 +++
 tools/validation.ts                       | 131 ++++++++------
 16 files changed, 769 insertions(+), 332 deletions(-)
 delete mode 100644 test/specs/local.spec.js
 delete mode 100644 test/specs/local/index.js
 delete mode 100644 test/specs/local/validation.js
 create mode 100644 tools/local-patch.json

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 51ebb467..b3528f52 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## v1.1.1
+
+- [x] fix validation issues
+
 ## v1.1.0
 
 - [x] inline sourcemap
diff --git a/dist/index-umd-web.js b/dist/index-umd-web.js
index c645bd40..1c06ff9a 100644
--- a/dist/index-umd-web.js
+++ b/dist/index-umd-web.js
@@ -7468,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"
@@ -7618,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>"
@@ -7702,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>"
@@ -7720,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"
@@ -7822,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'>"
@@ -8161,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>"
@@ -8179,7 +8179,7 @@
     		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"
@@ -8191,7 +8191,7 @@
     		syntax: "<paint>"
     	},
     	"fill-opacity": {
-    		syntax: "<'opacity'>"
+    		syntax: "<'opacity'> <number-zero-one>"
     	},
     	"fill-rule": {
     		syntax: "nonzero | evenodd"
@@ -8230,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> ]#"
@@ -8377,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>"
@@ -8452,7 +8452,7 @@
     		syntax: "<length> | <percentage> | auto"
     	},
     	"letter-spacing": {
-    		syntax: "normal | <length>"
+    		syntax: "normal | <length> normal | <length-percentage>"
     	},
     	"lighting-color": {
     		syntax: "<color>"
@@ -8611,7 +8611,7 @@
     		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'>"
@@ -8992,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>"
@@ -9157,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"
@@ -9199,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>#"
@@ -9250,7 +9250,7 @@
     		syntax: "auto | grayscale"
     	},
     	"-moz-user-select": {
-    		syntax: "none | text | all | -moz-none | auto | element | elements | text | toggle"
+    		syntax: "none | text | all | -moz-none | auto"
     	},
     	"-ms-flex-align": {
     		syntax: "start | end | center | baseline | stretch"
@@ -9857,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"
@@ -9872,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>"
@@ -9887,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 ]"
@@ -9899,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>#"
@@ -9911,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>#"
@@ -9923,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>"
@@ -9935,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"
@@ -9950,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> )"
@@ -9980,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>"
@@ -10031,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> ]? )"
@@ -10112,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"
@@ -10124,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> ]? )"
@@ -10412,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>? )"
@@ -10442,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> )"
@@ -10457,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"
@@ -10571,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> ]? )"
@@ -10607,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"
@@ -10658,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> ]? )"
@@ -10685,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>"
@@ -10817,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>"
@@ -11012,7 +11012,7 @@
     		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} ]"
@@ -13508,6 +13508,7 @@
         let i = 0;
         let result;
         let token = null;
+        // console.error(`>> doEvaluateSyntax: ${syntaxes.reduce((acc, curr) => acc + renderSyntax(curr), '')}\n>> ${JSON.stringify({syntaxes}, null, 1)}>> context: ${context.slice<Token>().reduce((acc, curr) => acc + renderToken(curr), '')}`);
         for (; i < syntaxes.length; i++) {
             syntax = syntaxes[i];
             if (context.done()) {
@@ -13537,6 +13538,7 @@
             }
             else {
                 if (isVisited(token, syntax, 'doEvaluateSyntax', options)) {
+                    // console.error(`cyclic dependency: ${renderSyntax(syntax)}`);
                     return {
                         valid: SyntaxValidationResult.Drop,
                         node: token,
@@ -13684,6 +13686,7 @@
         };
     }
     function match(syntax, context, options) {
+        // console.error(`>> match(): ${renderSyntax(syntax)}\n>> ${JSON.stringify({syntax}, null, 1)}>> context: ${context.slice<Token>().reduce((acc, curr) => acc + renderToken(curr), '')}`);
         let success = false;
         let result;
         let token = context.peek();
@@ -13765,20 +13768,17 @@
                         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;
-                    }
+                // {
+                // console.error(JSON.stringify({funcDef: (getParsedSyntax(ValidationSyntaxGroupEnum.Syntaxes, (syntax as ValidationFunctionDefinitionToken).val + '()')?.[0] as ValidationFunctionToken).chi}, null, 1))
+                //
+                // const child = getParsedSyntax(ValidationSyntaxGroupEnum.Syntaxes, (syntax as ValidationFunctionDefinitionToken).val + '()')?.[0] as ValidationFunctionToken;
+                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:
                 return doEvaluateSyntax(getParsedSyntax("declarations" /* ValidationSyntaxGroupEnum.Declarations */, syntax.val), context, {
@@ -13875,6 +13875,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)) {
@@ -13904,6 +13905,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>`,
+                                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
diff --git a/dist/index.cjs b/dist/index.cjs
index d3c69d71..2a56ad67 100644
--- a/dist/index.cjs
+++ b/dist/index.cjs
@@ -7467,7 +7467,7 @@ var declarations = {
 		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"
@@ -7617,7 +7617,7 @@ var declarations = {
 		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>"
@@ -7701,7 +7701,7 @@ var declarations = {
 		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>"
@@ -7719,7 +7719,7 @@ var declarations = {
 		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"
@@ -7821,7 +7821,7 @@ var declarations = {
 		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'>"
@@ -8160,7 +8160,7 @@ var declarations = {
 		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>"
@@ -8178,7 +8178,7 @@ var declarations = {
 		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"
@@ -8190,7 +8190,7 @@ var declarations = {
 		syntax: "<paint>"
 	},
 	"fill-opacity": {
-		syntax: "<'opacity'>"
+		syntax: "<'opacity'> <number-zero-one>"
 	},
 	"fill-rule": {
 		syntax: "nonzero | evenodd"
@@ -8229,7 +8229,7 @@ var declarations = {
 		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> ]#"
@@ -8376,7 +8376,7 @@ var declarations = {
 		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>"
@@ -8451,7 +8451,7 @@ var declarations = {
 		syntax: "<length> | <percentage> | auto"
 	},
 	"letter-spacing": {
-		syntax: "normal | <length>"
+		syntax: "normal | <length> normal | <length-percentage>"
 	},
 	"lighting-color": {
 		syntax: "<color>"
@@ -8610,7 +8610,7 @@ var declarations = {
 		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'>"
@@ -8991,25 +8991,25 @@ var declarations = {
 		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>"
@@ -9156,7 +9156,7 @@ var declarations = {
 		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"
@@ -9198,7 +9198,7 @@ var declarations = {
 		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>#"
@@ -9249,7 +9249,7 @@ var declarations = {
 		syntax: "auto | grayscale"
 	},
 	"-moz-user-select": {
-		syntax: "none | text | all | -moz-none | auto | element | elements | text | toggle"
+		syntax: "none | text | all | -moz-none | auto"
 	},
 	"-ms-flex-align": {
 		syntax: "start | end | center | baseline | stretch"
@@ -9856,10 +9856,10 @@ var syntaxes = {
 		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"
@@ -9871,7 +9871,7 @@ var syntaxes = {
 		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>"
@@ -9886,10 +9886,10 @@ var syntaxes = {
 		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 ]"
@@ -9898,7 +9898,7 @@ var syntaxes = {
 		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>#"
@@ -9910,7 +9910,7 @@ var syntaxes = {
 		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>#"
@@ -9922,7 +9922,7 @@ var syntaxes = {
 		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>"
@@ -9934,7 +9934,7 @@ var syntaxes = {
 		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"
@@ -9949,7 +9949,7 @@ var syntaxes = {
 		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> )"
@@ -9979,7 +9979,7 @@ var syntaxes = {
 		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>"
@@ -10030,7 +10030,7 @@ var syntaxes = {
 		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> ]? )"
@@ -10111,10 +10111,10 @@ var syntaxes = {
 		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"
@@ -10123,7 +10123,7 @@ var syntaxes = {
 		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> ]? )"
@@ -10411,7 +10411,7 @@ var syntaxes = {
 		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>? )"
@@ -10441,7 +10441,7 @@ var syntaxes = {
 		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> )"
@@ -10456,13 +10456,13 @@ var syntaxes = {
 		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"
@@ -10570,10 +10570,10 @@ var syntaxes = {
 		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> ]? )"
@@ -10606,7 +10606,7 @@ var syntaxes = {
 		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"
@@ -10657,7 +10657,7 @@ var syntaxes = {
 		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> ]? )"
@@ -10684,10 +10684,10 @@ var syntaxes = {
 		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>"
@@ -10816,7 +10816,7 @@ var syntaxes = {
 		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>"
@@ -11011,7 +11011,7 @@ var syntaxes = {
 		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} ]"
@@ -13617,6 +13617,7 @@ function doEvaluateSyntax(syntaxes, context, options) {
     let i = 0;
     let result;
     let token = null;
+    // console.error(`>> doEvaluateSyntax: ${syntaxes.reduce((acc, curr) => acc + renderSyntax(curr), '')}\n>> ${JSON.stringify({syntaxes}, null, 1)}>> context: ${context.slice<Token>().reduce((acc, curr) => acc + renderToken(curr), '')}`);
     for (; i < syntaxes.length; i++) {
         syntax = syntaxes[i];
         if (context.done()) {
@@ -13646,6 +13647,7 @@ function doEvaluateSyntax(syntaxes, context, options) {
         }
         else {
             if (isVisited(token, syntax, 'doEvaluateSyntax', options)) {
+                // console.error(`cyclic dependency: ${renderSyntax(syntax)}`);
                 return {
                     valid: SyntaxValidationResult.Drop,
                     node: token,
@@ -13793,6 +13795,7 @@ function matchOccurence(syntax, context, options) {
     };
 }
 function match(syntax, context, options) {
+    // console.error(`>> match(): ${renderSyntax(syntax)}\n>> ${JSON.stringify({syntax}, null, 1)}>> context: ${context.slice<Token>().reduce((acc, curr) => acc + renderToken(curr), '')}`);
     let success = false;
     let result;
     let token = context.peek();
@@ -13874,20 +13877,17 @@ function match(syntax, context, options) {
                     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;
-                }
+            // {
+            // console.error(JSON.stringify({funcDef: (getParsedSyntax(ValidationSyntaxGroupEnum.Syntaxes, (syntax as ValidationFunctionDefinitionToken).val + '()')?.[0] as ValidationFunctionToken).chi}, null, 1))
+            //
+            // const child = getParsedSyntax(ValidationSyntaxGroupEnum.Syntaxes, (syntax as ValidationFunctionDefinitionToken).val + '()')?.[0] as ValidationFunctionToken;
+            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:
             return doEvaluateSyntax(getParsedSyntax("declarations" /* ValidationSyntaxGroupEnum.Declarations */, syntax.val), context, {
@@ -13984,6 +13984,7 @@ function match(syntax, context, options) {
 }
 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)) {
@@ -14013,6 +14014,96 @@ function matchPropertyType(syntax, context, options) {
         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>`,
+                            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
diff --git a/dist/lib/validation/config.json.js b/dist/lib/validation/config.json.js
index 104c254e..94e130f8 100644
--- a/dist/lib/validation/config.json.js
+++ b/dist/lib/validation/config.json.js
@@ -60,7 +60,7 @@ var declarations = {
 		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"
@@ -210,7 +210,7 @@ var declarations = {
 		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>"
@@ -294,7 +294,7 @@ var declarations = {
 		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>"
@@ -312,7 +312,7 @@ var declarations = {
 		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"
@@ -414,7 +414,7 @@ var declarations = {
 		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'>"
@@ -753,7 +753,7 @@ var declarations = {
 		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>"
@@ -771,7 +771,7 @@ var declarations = {
 		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"
@@ -783,7 +783,7 @@ var declarations = {
 		syntax: "<paint>"
 	},
 	"fill-opacity": {
-		syntax: "<'opacity'>"
+		syntax: "<'opacity'> <number-zero-one>"
 	},
 	"fill-rule": {
 		syntax: "nonzero | evenodd"
@@ -822,7 +822,7 @@ var declarations = {
 		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> ]#"
@@ -969,7 +969,7 @@ var declarations = {
 		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>"
@@ -1044,7 +1044,7 @@ var declarations = {
 		syntax: "<length> | <percentage> | auto"
 	},
 	"letter-spacing": {
-		syntax: "normal | <length>"
+		syntax: "normal | <length> normal | <length-percentage>"
 	},
 	"lighting-color": {
 		syntax: "<color>"
@@ -1203,7 +1203,7 @@ var declarations = {
 		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'>"
@@ -1584,25 +1584,25 @@ var declarations = {
 		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>"
@@ -1749,7 +1749,7 @@ var declarations = {
 		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"
@@ -1791,7 +1791,7 @@ var declarations = {
 		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>#"
@@ -1842,7 +1842,7 @@ var declarations = {
 		syntax: "auto | grayscale"
 	},
 	"-moz-user-select": {
-		syntax: "none | text | all | -moz-none | auto | element | elements | text | toggle"
+		syntax: "none | text | all | -moz-none | auto"
 	},
 	"-ms-flex-align": {
 		syntax: "start | end | center | baseline | stretch"
@@ -2449,10 +2449,10 @@ var syntaxes = {
 		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"
@@ -2464,7 +2464,7 @@ var syntaxes = {
 		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>"
@@ -2479,10 +2479,10 @@ var syntaxes = {
 		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 ]"
@@ -2491,7 +2491,7 @@ var syntaxes = {
 		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>#"
@@ -2503,7 +2503,7 @@ var syntaxes = {
 		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>#"
@@ -2515,7 +2515,7 @@ var syntaxes = {
 		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>"
@@ -2527,7 +2527,7 @@ var syntaxes = {
 		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"
@@ -2542,7 +2542,7 @@ var syntaxes = {
 		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> )"
@@ -2572,7 +2572,7 @@ var syntaxes = {
 		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>"
@@ -2623,7 +2623,7 @@ var syntaxes = {
 		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> ]? )"
@@ -2704,10 +2704,10 @@ var syntaxes = {
 		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"
@@ -2716,7 +2716,7 @@ var syntaxes = {
 		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> ]? )"
@@ -3004,7 +3004,7 @@ var syntaxes = {
 		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>? )"
@@ -3034,7 +3034,7 @@ var syntaxes = {
 		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> )"
@@ -3049,13 +3049,13 @@ var syntaxes = {
 		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"
@@ -3163,10 +3163,10 @@ var syntaxes = {
 		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> ]? )"
@@ -3199,7 +3199,7 @@ var syntaxes = {
 		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"
@@ -3250,7 +3250,7 @@ var syntaxes = {
 		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> ]? )"
@@ -3277,10 +3277,10 @@ var syntaxes = {
 		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>"
@@ -3409,7 +3409,7 @@ var syntaxes = {
 		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>"
@@ -3604,7 +3604,7 @@ var syntaxes = {
 		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} ]"
diff --git a/dist/lib/validation/syntax.js b/dist/lib/validation/syntax.js
index 2e0676b1..8e594b61 100644
--- a/dist/lib/validation/syntax.js
+++ b/dist/lib/validation/syntax.js
@@ -181,6 +181,7 @@ function doEvaluateSyntax(syntaxes, context, options) {
     let i = 0;
     let result;
     let token = null;
+    // console.error(`>> doEvaluateSyntax: ${syntaxes.reduce((acc, curr) => acc + renderSyntax(curr), '')}\n>> ${JSON.stringify({syntaxes}, null, 1)}>> context: ${context.slice<Token>().reduce((acc, curr) => acc + renderToken(curr), '')}`);
     for (; i < syntaxes.length; i++) {
         syntax = syntaxes[i];
         if (context.done()) {
@@ -210,6 +211,7 @@ function doEvaluateSyntax(syntaxes, context, options) {
         }
         else {
             if (isVisited(token, syntax, 'doEvaluateSyntax', options)) {
+                // console.error(`cyclic dependency: ${renderSyntax(syntax)}`);
                 return {
                     valid: SyntaxValidationResult.Drop,
                     node: token,
@@ -357,6 +359,7 @@ function matchOccurence(syntax, context, options) {
     };
 }
 function match(syntax, context, options) {
+    // console.error(`>> match(): ${renderSyntax(syntax)}\n>> ${JSON.stringify({syntax}, null, 1)}>> context: ${context.slice<Token>().reduce((acc, curr) => acc + renderToken(curr), '')}`);
     let success = false;
     let result;
     let token = context.peek();
@@ -438,20 +441,17 @@ function match(syntax, context, options) {
                     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;
-                }
+            // {
+            // console.error(JSON.stringify({funcDef: (getParsedSyntax(ValidationSyntaxGroupEnum.Syntaxes, (syntax as ValidationFunctionDefinitionToken).val + '()')?.[0] as ValidationFunctionToken).chi}, null, 1))
+            //
+            // const child = getParsedSyntax(ValidationSyntaxGroupEnum.Syntaxes, (syntax as ValidationFunctionDefinitionToken).val + '()')?.[0] as ValidationFunctionToken;
+            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:
             return doEvaluateSyntax(getParsedSyntax("declarations" /* ValidationSyntaxGroupEnum.Declarations */, syntax.val), context, {
@@ -548,6 +548,7 @@ function match(syntax, context, options) {
 }
 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)) {
@@ -577,6 +578,96 @@ function matchPropertyType(syntax, context, options) {
         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 == EnumToken.FunctionTokenType && wildCardFuncs.includes(token.val));
+                if (success) {
+                    functionMatchCount++;
+                    context.next();
+                    token = context.peek();
+                    continue;
+                }
+                if (token.typ == EnumToken.WhitespaceTokenType) {
+                    context.next();
+                    token = context.peek();
+                    continue;
+                }
+                if (token.typ == 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>`,
+                            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 == EnumToken.LengthTokenType || token.typ == EnumToken.PercentageTokenType || (token.typ == 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 == EnumToken.FunctionTokenType && mathFuncs.includes(token.val)) ||
                 // @ts-ignore
diff --git a/jsr.json b/jsr.json
index 9502d136..6e09aa3e 100644
--- a/jsr.json
+++ b/jsr.json
@@ -1,6 +1,6 @@
 {
   "name": "@tbela99/css-parser",
-  "version": "1.1.1-alpha3",
+  "version": "1.1.1-alpha4",
   "publish": {
     "include": [
       "src",
diff --git a/package.json b/package.json
index 7bb96330..ae7f765f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@tbela99/css-parser",
   "description": "CSS parser for node and the browser",
-  "version": "v1.1.1-alpha3",
+  "version": "v1.1.1-alpha4",
   "exports": {
     ".": "./dist/node/index.js",
     "./node": "./dist/node/index.js",
@@ -19,7 +19,6 @@
     "test": "web-test-runner \"test/**/web.spec.js\" --node-resolve --playwright --browsers chromium firefox webkit --root-dir=.; mocha --reporter-options='maxDiffSize=1801920' --timeout=10000 \"test/**/node.spec.js\"",
     "test:web": "web-test-runner \"test/**/web.spec.js\" --node-resolve --playwright --browsers chromium firefox webkit --root-dir=.",
     "test:node": "mocha --reporter-options='maxDiffSize=1801920' \"test/**/node.spec.js\"",
-    "test:local": "mocha --reporter-options='maxDiffSize=1801920' \"test/**/local.spec.js\"",
     "test:cov": "c8 -x 'test/specs/**/*.js' -x dist/lib/validation/syntax.js -x 'dist/lib/validation/parser/*.js' --reporter=html --reporter=text --reporter=json-summary mocha --reporter-options='maxDiffSize=1801920' --timeout=10000 \"test/**/node.spec.js\"",
     "test:web-cov": "web-test-runner -x 'test/specs/**/*.js' -x dist/lib/validation/syntax.js,dist/lib/validation/parser \"test/**/web.spec.js\" --node-resolve --playwright --browsers chromium firefox webkit --root-dir=. --coverage",
     "profile": "node --enable-source-maps --inspect-brk test/inspect.js",
diff --git a/src/lib/renderer/color/utils/constants.ts b/src/lib/renderer/color/utils/constants.ts
index 1ade87d2..d2a7a472 100644
--- a/src/lib/renderer/color/utils/constants.ts
+++ b/src/lib/renderer/color/utils/constants.ts
@@ -81,7 +81,7 @@ export const k: number = Math.pow(29, 3) / Math.pow(3, 3);
 export const e: number = Math.pow(6, 3) / Math.pow(29, 3);
 
 // color module v4
-export const systemColors: Set<string> = new Set(['ActiveText', 'ButtonBorder', 'ButtonFace', 'ButtonText', 'Canvas', 'CanvasText', 'Field', 'FieldText', 'GrayText', 'Highlight', 'HighlightText', 'LinkText', 'Mark', 'MarkText', 'VisitedText'].map(m => m.toLowerCase()));
+export const systemColors: Set<string> = 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
 export const deprecatedSystemColors: Set<string> = 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()));
 
diff --git a/src/lib/validation/config.json b/src/lib/validation/config.json
index e0bda057..fa62096e 100644
--- a/src/lib/validation/config.json
+++ b/src/lib/validation/config.json
@@ -61,7 +61,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"
@@ -211,7 +211,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>"
@@ -295,7 +295,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>"
@@ -313,7 +313,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"
@@ -415,7 +415,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'>"
@@ -754,7 +754,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>"
@@ -772,7 +772,7 @@
    "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"
@@ -784,7 +784,7 @@
    "syntax": "<paint>"
   },
   "fill-opacity": {
-   "syntax": "<'opacity'>"
+   "syntax": "<'opacity'> <number-zero-one>"
   },
   "fill-rule": {
    "syntax": "nonzero | evenodd"
@@ -823,7 +823,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> ]#"
@@ -970,7 +970,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>"
@@ -1045,7 +1045,7 @@
    "syntax": "<length> | <percentage> | auto"
   },
   "letter-spacing": {
-   "syntax": "normal | <length>"
+   "syntax": "normal | <length> normal | <length-percentage>"
   },
   "lighting-color": {
    "syntax": "<color>"
@@ -1204,7 +1204,7 @@
    "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'>"
@@ -1585,25 +1585,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>"
@@ -1750,7 +1750,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"
@@ -1792,7 +1792,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>#"
@@ -1843,7 +1843,7 @@
    "syntax": "auto | grayscale"
   },
   "-moz-user-select": {
-   "syntax": "none | text | all | -moz-none | auto | element | elements | text | toggle"
+   "syntax": "none | text | all | -moz-none | auto"
   },
   "-ms-flex-align": {
    "syntax": "start | end | center | baseline | stretch"
@@ -2450,10 +2450,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"
@@ -2465,7 +2465,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>"
@@ -2480,10 +2480,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 ]"
@@ -2492,7 +2492,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>#"
@@ -2504,7 +2504,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>#"
@@ -2516,7 +2516,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>"
@@ -2528,7 +2528,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"
@@ -2543,7 +2543,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> )"
@@ -2573,7 +2573,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>"
@@ -2624,7 +2624,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> ]? )"
@@ -2705,10 +2705,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"
@@ -2717,7 +2717,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> ]? )"
@@ -3005,7 +3005,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>? )"
@@ -3035,7 +3035,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> )"
@@ -3050,13 +3050,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"
@@ -3164,10 +3164,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> ]? )"
@@ -3200,7 +3200,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"
@@ -3251,7 +3251,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> ]? )"
@@ -3278,10 +3278,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>"
@@ -3410,7 +3410,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>"
@@ -3605,7 +3605,7 @@
    "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} ]"
diff --git a/src/lib/validation/syntax.ts b/src/lib/validation/syntax.ts
index ece547f3..54c97915 100644
--- a/src/lib/validation/syntax.ts
+++ b/src/lib/validation/syntax.ts
@@ -284,6 +284,8 @@ export function doEvaluateSyntax(syntaxes: ValidationToken[], context: Context<T
     let result: ValidationSyntaxResult;
     let token: Token | null = null;
 
+    // console.error(`>> doEvaluateSyntax: ${syntaxes.reduce((acc, curr) => acc + renderSyntax(curr), '')}\n>> ${JSON.stringify({syntaxes}, null, 1)}>> context: ${context.slice<Token>().reduce((acc, curr) => acc + renderToken(curr), '')}`);
+
     for (; i < syntaxes.length; i++) {
 
         syntax = syntaxes[i];
@@ -325,6 +327,8 @@ export function doEvaluateSyntax(syntaxes: ValidationToken[], context: Context<T
 
             if (isVisited(token, syntax, 'doEvaluateSyntax', options)) {
 
+                // console.error(`cyclic dependency: ${renderSyntax(syntax)}`);
+
                 return {
                     valid: SyntaxValidationResult.Drop,
                     node: token,
@@ -534,6 +538,7 @@ function matchOccurence(syntax: ValidationToken, context: Context<Token>, option
 }
 
 function match(syntax: ValidationToken, context: Context<Token>, options: ValidationOptions): ValidationSyntaxResult {
+    // console.error(`>> match(): ${renderSyntax(syntax)}\n>> ${JSON.stringify({syntax}, null, 1)}>> context: ${context.slice<Token>().reduce((acc, curr) => acc + renderToken(curr), '')}`);
 
     let success: boolean = false;
     let result: ValidationSyntaxResult;
@@ -651,15 +656,13 @@ function match(syntax: ValidationToken, context: Context<Token>, options: Valida
                 }
             }
 
-        {
+            // {
 
-            result = doEvaluateSyntax((getParsedSyntax(ValidationSyntaxGroupEnum.Syntaxes, (syntax as ValidationFunctionDefinitionToken).val + '()')?.[0] as ValidationFunctionToken).chi as ValidationToken[], createContext((token as FunctionToken).chi), {
-                ...options,
-                isRepeatable: null,
-                isList: null,
-                occurence: null,
-                atLeastOnce: null
-            } as ValidationOptions);
+            // console.error(JSON.stringify({funcDef: (getParsedSyntax(ValidationSyntaxGroupEnum.Syntaxes, (syntax as ValidationFunctionDefinitionToken).val + '()')?.[0] as ValidationFunctionToken).chi}, null, 1))
+            //
+            // const child = getParsedSyntax(ValidationSyntaxGroupEnum.Syntaxes, (syntax as ValidationFunctionDefinitionToken).val + '()')?.[0] as ValidationFunctionToken;
+
+            result = match(getParsedSyntax(ValidationSyntaxGroupEnum.Syntaxes, (syntax as ValidationFunctionDefinitionToken).val + '()')?.[0] as ValidationFunctionToken, context, options);
 
             if (result.valid == SyntaxValidationResult.Valid) {
 
@@ -668,7 +671,7 @@ function match(syntax: ValidationToken, context: Context<Token>, options: Valida
                 result.context = context;
                 return result;
             }
-        }
+            // }
 
             break;
 
@@ -809,6 +812,7 @@ function match(syntax: ValidationToken, context: Context<Token>, options: Valida
 function matchPropertyType(syntax: ValidationPropertyToken, context: Context<Token>, options: ValidationOptions): ValidationSyntaxResult {
 
     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)) {
@@ -848,6 +852,126 @@ function matchPropertyType(syntax: ValidationPropertyToken, context: Context<Tok
 
     switch (syntax.val) {
 
+        case 'bg-position': {
+
+            let val: string;
+            let keyworkMatchCount: number = 0;
+            let lengthMatchCount: number = 0;
+            let functionMatchCount: number = 0;
+            let isBGX: boolean = false;
+            let isBGY: boolean = false;
+
+            while (token != null && keyworkMatchCount + lengthMatchCount + functionMatchCount < 3) {
+
+                // match one value: keyword or length
+                success = (token.typ == EnumToken.FunctionTokenType && wildCardFuncs.includes((token as FunctionToken).val));
+
+                if (success) {
+                    functionMatchCount++;
+                    context.next();
+                    token = context.peek() as Token;
+                    continue;
+                }
+
+                if (token.typ == EnumToken.WhitespaceTokenType) {
+
+                    context.next();
+                    token = context.peek() as Token;
+                    continue;
+                }
+
+                if (token.typ == EnumToken.IdenTokenType) {
+
+                    val = (token as IdentToken).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>`,
+                            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() as Token;
+                    continue;
+                }
+
+                success = token.typ == EnumToken.LengthTokenType || token.typ == EnumToken.PercentageTokenType || (token.typ == EnumToken.NumberTokenType && (token as NumberToken).val  == '0');
+
+                if (!success) {
+
+                    break;
+                }
+
+                lengthMatchCount++;
+                context.next();
+                token = context.peek() as Token;
+            }
+
+            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 == EnumToken.FunctionTokenType && mathFuncs.includes((token as FunctionToken).val)) ||
@@ -1077,7 +1201,7 @@ function someOf(syntaxes: ValidationToken[][], context: Context<Token>, options:
     let result: ValidationSyntaxResult;
     let i: number;
     let success: boolean = false;
-    let isOptional:boolean;
+    let isOptional: boolean;
     const matched: ValidationSyntaxResult[] = [];
 
     for (i = 0; i < syntaxes.length; i++) {
@@ -1122,7 +1246,7 @@ function anyOf(syntaxes: ValidationToken[][], context: Context<Token>, options:
     let result: ValidationSyntaxResult;
     let i: number;
     let success: boolean = false;
-    let isOptional:boolean;
+    let isOptional: boolean;
 
     for (i = 0; i < syntaxes.length; i++) {
 
diff --git a/test/specs/code/validation.js b/test/specs/code/validation.js
index ec504bed..ae347493 100644
--- a/test/specs/code/validation.js
+++ b/test/specs/code/validation.js
@@ -522,6 +522,33 @@ html, body, div, span, applet, object, iframe,
                 resolveImport: true
             }).then(result => expect(result.errors.length).equals(2)).then(() => done(), () => done());
         });
+
+        it('file validation #23', function (done) {
+
+            transform(`@import '${import.meta.dirname ?? dirname(new URL(import.meta.url).pathname)}/../../files/css/bootstrap-4.css';
+`, {
+                validation: true,
+                resolveImport: true
+            }).then(result => expect(result.errors.length).equals(1)).then(() => done(), () => done());
+        });
+
+        it('file validation #24', function (done) {
+
+            transform(`@import '${import.meta.dirname ?? dirname(new URL(import.meta.url).pathname)}/../../files/css/bootstrap-5.css';
+`, {
+                validation: true,
+                resolveImport: true
+            }).then(result => expect(result.errors.length).equals(0)).then(() => done(), () => done());
+        });
+
+        it('file validation #25', function (done) {
+
+            transform(`@import '${import.meta.dirname ?? dirname(new URL(import.meta.url).pathname)}/../../files/css/tailwind.css';
+`, {
+                validation: true,
+                resolveImport: true
+            }).then(result => expect(result.errors.length).equals(20)).then(() => done(), () => done());
+        });
     });
 
 }
\ No newline at end of file
diff --git a/test/specs/local.spec.js b/test/specs/local.spec.js
deleted file mode 100644
index ab371859..00000000
--- a/test/specs/local.spec.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import {parse, render, resolve, transform} from '../../dist/node/index.js';
-import * as tests from './local/index.js';
-import {expect} from "@esm-bundle/chai";
-import {readFile} from "node:fs/promises";
-import {dirname} from 'node:path';
-
-
-// these tests will timeout on CI
-// run(describe, expect, transform, parse, render);
-for (const test of Object.values(tests)) {
-
-    test.run(describe, expect, transform, parse, render, dirname, async (path) => readFile(path, { encoding: 'utf-8' }), resolve);
-}
\ No newline at end of file
diff --git a/test/specs/local/index.js b/test/specs/local/index.js
deleted file mode 100644
index c3d1a3cb..00000000
--- a/test/specs/local/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-
-export * as validation from './validation.js';
\ No newline at end of file
diff --git a/test/specs/local/validation.js b/test/specs/local/validation.js
deleted file mode 100644
index 793fce95..00000000
--- a/test/specs/local/validation.js
+++ /dev/null
@@ -1,18 +0,0 @@
-export function run(describe, expect, transform, parse, render, dirname, readFile) {
-
-
-    it('validation #1', function (done) {
-
-        transform(`@import '${import.meta.dirname ?? dirname(new URL(import.meta.url).pathname)}/../../files/css/full.css';
-`, {validation: true, resolveImport: true}).then(result => expect(result.errors.length).equals(1)).then(() => done(), () => done());
-    });
-
-    it('validation #2', function (done) {
-
-        transform(`@import '${import.meta.dirname ?? dirname(new URL(import.meta.url).pathname)}/../../files/css/bootstrap.css';
-`, {
-            validation: true,
-            resolveImport: true
-        }).then(result => expect(result.errors.length).equals(2)).then(() => done(), () => done());
-    });
-}
\ No newline at end of file
diff --git a/tools/local-patch.json b/tools/local-patch.json
new file mode 100644
index 00000000..4278f92f
--- /dev/null
+++ b/tools/local-patch.json
@@ -0,0 +1,26 @@
+{
+  "atrules": {},
+  "properties": {
+    "-ms-overflow-style": {
+      "syntax": "auto | none | scrollbar | -ms-autohiding-scrollbar"
+    },
+    "-moz-user-select": {
+      "comment": "extend with auto",
+      "syntax": "| auto"
+    },
+    "text-align": {
+      "comment": "extend with -non-standard-text-align",
+      "syntax": "| <-non-standard-text-align>"
+    }
+  },
+  "types": {
+    "-non-standard-display": {
+      "comment": "extend display syntax with -ms-flexbox",
+      "syntax": "| -ms-flexbox"
+    },
+    "-non-standard-text-align": {
+      "comment": "extend text-align",
+      "syntax": "| -moz-center | -webkit-center | -webkit-match-parent"
+    }
+  }
+}
\ No newline at end of file
diff --git a/tools/validation.ts b/tools/validation.ts
index 68b826d4..acacc210 100644
--- a/tools/validation.ts
+++ b/tools/validation.ts
@@ -1,6 +1,7 @@
 import {fetchInit, ValidationToken} from "../src/lib";
 import process from "node:process";
 import {writeFile} from "node:fs/promises";
+import localPatch from "./local-patch.json" with {type: "json"};
 
 function debug(error: any) {
 
@@ -36,77 +37,93 @@ const json = {
     atRules: await parseAtRulesSyntax()
 }
 
-for (const [key, value] of Object.entries(patches.atrules)) {
+// @ts-ignore
+applyPatches(patches, localPatch as PatchSyntax);
+// if (!('auto' in json.declarations['-moz-user-select'])) {
+//
+//     json.declarations['-moz-user-select'].syntax += ' | auto | element | elements | text | toggle';
+// }
 
-    if (!(key in json.atRules)) {
+// if (!('-ms-overflow-style' in json.declarations)) {
+//
+//     json.declarations['-ms-overflow-style'] = {syntax: 'auto | none | scrollbar | -ms-autohiding-scrollbar'};
+// }
 
-        console.error(`>> adding at-rule declarations >> ${key}`);
-        json.atRules[key] = {syntax: value.prelude};
-    }
+if (!(':-webkit-any()' in json.selectors)) {
+
+    json.selectors[':-webkit-any()'] = {syntax: ':-webkit-any( <forgiving-selector-list> )'};
 }
 
-for (const [key, value] of Object.entries(patches.properties)) {
+if (!(':-webkit-any-link' in json.selectors)) {
 
-    if (!(key in json.declarations)) {
+    json.selectors[':-webkit-any-link'] = {syntax: ':-webkit-any-link'};
+}
 
-        console.error(`>> adding declarations >> ${key}`);
-        json.declarations[key] = {syntax: value.syntax};
-    }
+// if (!('-non-standard-text-align' in json.syntaxes)) {
+//
+//     json.syntaxes['-non-standard-text-align'] = {syntax: '| -moz-center | -webkit-center | -webkit-match-parent'};
+//
+//     // @ts-ignore
+//     json.declarations['text-align' as keyof typeof json.declarations].syntax += ' | <-non-standard-text-align>';
+// }
 
-    else if (value.comment?.startsWith?.('extend')) {
+await writeFile(import.meta.dirname + '/../src/lib/validation/config.json', JSON.stringify(json, null, 1));
+console.debug(json);
 
-        console.error(`>> extending declarations >> ${key}`);
-        json.declarations[key].syntax += ' ' + value.syntax;
-    }
-}
+// =============================== //
 
-for (const [key, value] of Object.entries(patches.types)) {
+function applyPatches(...patches: PatchSyntax[]) {
 
-    if (!(key in json.syntaxes)) {
+    for (const patch of patches) {
 
-        console.error(`>> adding syntax >> ${key}`);
-        json.syntaxes[key] = {syntax: value.syntax};
-    }
+        for (const [key, value] of Object.entries(patch.atrules)) {
 
-    else if (value.comment?.startsWith?.('extend')) {
+            if (!(key in json.atRules)) {
 
-        console.error(`>> extending syntax >> ${key}`);
-        json.syntaxes[key].syntax += ' ' + value.syntax;
-    }
-}
+                console.error(`>> adding at-rule declarations >> ${key}`);
+                json.atRules[key] = {syntax: value.prelude};
+            }
+        }
 
-if (!('auto' in json.declarations['-moz-user-select'])) {
+        for (const [key, value] of Object.entries(patch.properties)) {
 
-    json.declarations['-moz-user-select'].syntax += ' | auto | element | elements | text | toggle';
-}
+            if (!(key in json.declarations)) {
 
-if (!('-ms-overflow-style' in json.declarations)) {
+                console.error(`>> adding declarations >> ${key}`);
+                json.declarations[key] = {syntax: value.syntax};
+            } else if (value.comment?.startsWith?.('extend')) {
 
-    json.declarations['-ms-overflow-style'] = {syntax: 'auto | none | scrollbar | -ms-autohiding-scrollbar'};
-}
+                console.error(`>> extending declarations >> ${key}`);
+                json.declarations[key].syntax += ' ' + value.syntax;
+            }
 
-if (!(':-webkit-any()' in json.selectors)) {
+            else {
 
-    json.selectors[':-webkit-any()'] = {syntax: ':-webkit-any( <forgiving-selector-list> )'};
-}
-
-if (!(':-webkit-any-link' in json.selectors)) {
+                console.error(`>> replacing declarations >> ${key}`);
+                json.declarations[key].syntax += ' ' + value.syntax;
+            }
+        }
 
-    json.selectors[':-webkit-any-link'] = {syntax: ':-webkit-any-link'};
-}
+        for (const [key, value] of Object.entries(patch.types)) {
 
-if (!('-non-standard-text-align' in json.syntaxes)) {
+            if (!(key in json.syntaxes)) {
 
-    json.syntaxes['-non-standard-text-align'] = {syntax: '| -moz-center | -webkit-center | -webkit-match-parent'};
+                console.error(`>> adding syntax >> ${key}`);
+                json.syntaxes[key] = {syntax: value.syntax};
+            } else if (value.comment?.startsWith?.('extend')) {
 
-    // @ts-ignore
-    json.declarations['text-align' as keyof typeof json.declarations].syntax += ' | <-non-standard-text-align>';
-}
+                console.error(`>> extending syntax >> ${key}`);
+                json.syntaxes[key].syntax += ' ' + value.syntax;
+            }
 
-await writeFile(import.meta.dirname + '/../src/lib/validation/config.json', JSON.stringify(json, null, 1));
-console.debug(json);
+            else {
 
-// =============================== //
+                console.error(`>> replacing syntax >> ${key}`);
+                json.syntaxes[key] = {syntax: value.syntax};
+            }
+        }
+    }
+}
 
 export function cleanup(ast: { [key: string]: any }) {
 
@@ -200,17 +217,17 @@ export async function parseSelectorsSyntax(): Promise<ParsedSyntaxes> {
         };
     }
 
-    for (const k of [':host', ':autofill']) {
-
-
-        if (!(k in json)) {
-
-            json[k] = {
-                syntax: k,
-                // ast: parseSyntax(k).chi
-            };
-        }
-    }
+    // for (const k of [':host', ':autofill']) {
+    //
+    //
+    //     if (!(k in json)) {
+    //
+    //         json[k] = {
+    //             syntax: k,
+    //             // ast: parseSyntax(k).chi
+    //         };
+    //     }
+    // }
 
     return cleanup(json) as ParsedSyntaxes;
 }