@master/css 2.0.0-rc.67 → 2.0.0-rc.69

package/dist/config/rules.cjs

@@ -1,191 +1,44 @@
 'use strict';
 
-var cssEscape = require('../shared/utils/css-escape.cjs');
 var syntaxRuleType = require('../syntax-rule-type.cjs');
 var common = require('../common.cjs');
-var autofillSolidStyle = require('../utils/autofill-solid-style.cjs');
 
 const rules = {
-    group: {
-        matcher: /^(?:.+?[*_>~+])?\{.+?\}/,
-        type: syntaxRuleType.Shorthand,
-        analyze (className) {
-            let i = 0;
-            for(; i < className.length; i++){
-                if (className[i] === '{' && className[i - 1] !== '\\') {
-                    break;
-                }
-            }
-            return [
-                className.slice(i),
-                className.slice(0, i)
-            ];
-        },
-        declare (value) {
-            const declarations = {};
-            const addProp = (propertyName)=>{
-                const indexOfColon = propertyName.indexOf(':');
-                if (indexOfColon !== -1) {
-                    const propName = propertyName.slice(0, indexOfColon);
-                    declarations[propName] = propertyName.slice(indexOfColon + 1);
-                }
-            };
-            const handleRule = (rule)=>{
-                const addProps = (cssText)=>{
-                    const cssProperties = cssText.slice(cssEscape(rule.name).length).match(/\{(.*)\}/)?.[1].split(';');
-                    if (cssProperties) for (const eachCssProperty of cssProperties){
-                        addProp(eachCssProperty);
-                    }
-                };
-                addProps(rule.text);
-                // animation
-                if (rule.animationNames) {
-                    if (!this.animationNames) {
-                        this.animationNames = new Set();
-                    }
-                    for (const eachKeyframeName of rule.animationNames){
-                        this.animationNames.add(eachKeyframeName);
-                    }
-                }
-                // variable
-                if (rule.variableNames) {
-                    if (this.variableNames) {
-                        for (const eachVariableName of rule.variableNames){
-                            this.variableNames.add(eachVariableName);
-                        }
-                    } else {
-                        this.variableNames = new Set(rule.variableNames);
-                    }
-                }
-            };
-            const names = [];
-            let currentName = '';
-            const addName = ()=>{
-                if (currentName) {
-                    names.push(currentName.replace(/ /g, '|'));
-                    currentName = '';
-                }
-            };
-            let i = 1;
-            (function analyze(end) {
-                for(; i < value.length; i++){
-                    const char = value[i];
-                    if (!end) {
-                        if (char === ';') {
-                            addName();
-                            continue;
-                        }
-                        if (char === '}') {
-                            break;
-                        }
-                    }
-                    currentName += char;
-                    if (end === char) {
-                        if (end === '\'' || end === '"') {
-                            let count = 0;
-                            for(let j = currentName.length - 2;; j--){
-                                if (currentName[j] !== '\\') {
-                                    break;
-                                }
-                                count++;
-                            }
-                            if (count % 2) {
-                                continue;
-                            }
-                        }
-                        break;
-                    } else if (char in common.VALUE_DELIMITERS && end !== '\'' && end !== '"') {
-                        i++;
-                        analyze(common.VALUE_DELIMITERS[char]);
-                    }
-                }
-            })('');
-            addName();
-            for (const eachName of names){
-                const rules = this.css.generate(eachName, this.mode);
-                if (rules.length) {
-                    for (const eachRule of rules){
-                        handleRule(eachRule);
-                    }
-                } else {
-                    addProp(eachName);
-                }
-            }
-            return declarations;
-        }
-    },
-    variable: {
-        matcher: /^\$[\w-]+:/,
-        type: syntaxRuleType.Shorthand,
-        declare (value) {
-            return {
-                ['--' + this.keyToken.slice(1, -1)]: value
-            };
-        }
-    },
     'font-size': {
-        ambiguousKeys: [
+        aliasGroups: [
             'font',
             'f'
         ],
-        ambiguousValues: [
-            common.NUMBER_VALUE_REGEX
-        ],
+        kind: 'number',
         unit: 'rem',
         type: syntaxRuleType.Native
     },
     'font-weight': {
-        ambiguousKeys: [
+        aliasGroups: [
             'font',
             'f'
         ],
-        ambiguousValues: [
+        values: [
             'bolder'
         ],
         type: syntaxRuleType.Native
     },
     'font-family': {
-        ambiguousKeys: [
+        aliasGroups: [
             'font',
             'f'
         ],
         type: syntaxRuleType.Native
     },
-    'font-smoothing': {
-        ambiguousKeys: [
-            'font',
-            'f'
-        ],
-        ambiguousValues: [
-            'antialiased',
-            'subpixel-antialiased'
-        ],
-        type: syntaxRuleType.Native,
-        declare (value) {
-            switch(value){
-                case 'subpixel-antialiased':
-                    return {
-                        '-webkit-font-smoothing': 'auto',
-                        '-moz-osx-font-smoothing': 'auto'
-                    };
-                case 'antialiased':
-                    return {
-                        '-webkit-font-smoothing': 'antialiased',
-                        '-moz-osx-font-smoothing': 'grayscale'
-                    };
-                default:
-                    return {
-                        'font-smooth': value
-                    };
-            }
-        }
+    'font-smooth': {
+        type: syntaxRuleType.Native
     },
     'font-style': {
-        ambiguousKeys: [
+        aliasGroups: [
             'font',
             'f'
         ],
-        ambiguousValues: [
+        values: [
             'normal',
             'italic',
             'oblique'
@@ -194,11 +47,11 @@ const rules = {
         unit: 'deg'
     },
     'font-variant-numeric': {
-        ambiguousKeys: [
+        aliasGroups: [
             'font',
             'f'
         ],
-        ambiguousValues: [
+        values: [
             'ordinal',
             'slashed-zero',
             'lining-nums',
@@ -211,7 +64,7 @@ const rules = {
         type: syntaxRuleType.Native
     },
     'font-variant': {
-        ambiguousKeys: [
+        aliasGroups: [
             'font',
             'f'
         ],
@@ -220,13 +73,12 @@ const rules = {
     font: {
         subkey: 'f',
         type: syntaxRuleType.NativeShorthand,
-        variables: [
+        namespaces: [
             'font-family',
             'font-variant',
             'font-weight',
             'font-size',
-            'font-style',
-            'line-height'
+            'font-style'
         ]
     },
     'font-feature-settings': {
@@ -236,8 +88,8 @@ const rules = {
     color: {
         key: 'fg',
         type: syntaxRuleType.Native,
-        variables: [
-            'text'
+        namespaces: [
+            'color.text'
         ]
     },
     // margin
@@ -245,7 +97,7 @@ const rules = {
         key: 'ml',
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -253,7 +105,7 @@ const rules = {
         key: 'mr',
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -261,7 +113,7 @@ const rules = {
         key: 'mt',
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -269,7 +121,7 @@ const rules = {
         key: 'mb',
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -278,13 +130,11 @@ const rules = {
         subkey: 'margin-x',
         unit: 'rem',
         type: syntaxRuleType.Shorthand,
-        declare (value) {
-            return {
-                'margin-left': value,
-                'margin-right': value
-            };
-        },
-        variables: [
+        declarations: [
+            'margin-left',
+            'margin-right'
+        ],
+        namespaces: [
             'spacing'
         ]
     },
@@ -292,13 +142,11 @@ const rules = {
         key: 'my',
         unit: 'rem',
         type: syntaxRuleType.Shorthand,
-        declare (value) {
-            return {
-                'margin-top': value,
-                'margin-bottom': value
-            };
-        },
-        variables: [
+        declarations: [
+            'margin-top',
+            'margin-bottom'
+        ],
+        namespaces: [
             'spacing'
         ]
     },
@@ -306,7 +154,7 @@ const rules = {
         key: 'm',
         unit: 'rem',
         type: syntaxRuleType.NativeShorthand,
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -315,7 +163,7 @@ const rules = {
         key: 'mis',
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -323,7 +171,7 @@ const rules = {
         key: 'mie',
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -331,7 +179,7 @@ const rules = {
         key: 'mi',
         unit: 'rem',
         type: syntaxRuleType.NativeShorthand,
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -340,7 +188,7 @@ const rules = {
         key: 'pl',
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -348,7 +196,7 @@ const rules = {
         key: 'pr',
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -356,7 +204,7 @@ const rules = {
         key: 'pt',
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -364,7 +212,7 @@ const rules = {
         key: 'pb',
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -372,13 +220,11 @@ const rules = {
         key: 'px',
         unit: 'rem',
         type: syntaxRuleType.Shorthand,
-        declare (value) {
-            return {
-                'padding-left': value,
-                'padding-right': value
-            };
-        },
-        variables: [
+        declarations: [
+            'padding-left',
+            'padding-right'
+        ],
+        namespaces: [
             'spacing'
         ]
     },
@@ -386,13 +232,11 @@ const rules = {
         key: 'py',
         unit: 'rem',
         type: syntaxRuleType.Shorthand,
-        declare (value) {
-            return {
-                'padding-top': value,
-                'padding-bottom': value
-            };
-        },
-        variables: [
+        declarations: [
+            'padding-top',
+            'padding-bottom'
+        ],
+        namespaces: [
             'spacing'
         ]
     },
@@ -400,7 +244,7 @@ const rules = {
         key: 'p',
         unit: 'rem',
         type: syntaxRuleType.NativeShorthand,
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -409,7 +253,7 @@ const rules = {
         key: 'pis',
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -417,7 +261,7 @@ const rules = {
         key: 'pie',
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -425,23 +269,23 @@ const rules = {
         key: 'pi',
         unit: 'rem',
         type: syntaxRuleType.NativeShorthand,
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
     // flex
     'flex-basis': {
-        ambiguousKeys: [
+        aliasGroups: [
             'flex'
         ],
         unit: 'rem',
         type: syntaxRuleType.Native
     },
     'flex-wrap': {
-        ambiguousKeys: [
+        aliasGroups: [
             'flex'
         ],
-        ambiguousValues: [
+        values: [
             'wrap',
             'nowrap',
             'wrap-reverse'
@@ -449,22 +293,22 @@ const rules = {
         type: syntaxRuleType.Native
     },
     'flex-grow': {
-        ambiguousKeys: [
+        aliasGroups: [
             'flex'
         ],
         type: syntaxRuleType.Native
     },
     'flex-shrink': {
-        ambiguousKeys: [
+        aliasGroups: [
             'flex'
         ],
         type: syntaxRuleType.Native
     },
     'flex-direction': {
-        ambiguousKeys: [
+        aliasGroups: [
             'flex'
         ],
-        ambiguousValues: [
+        values: [
             'row',
             'row-reverse',
             'column',
@@ -502,40 +346,40 @@ const rules = {
     size: {
         type: syntaxRuleType.Shorthand,
         unit: 'rem',
-        declare (_value, valueComponents) {
-            const length = valueComponents.length;
-            return {
-                width: length === 1 ? valueComponents[0].text : valueComponents[0].text,
-                height: length === 1 ? valueComponents[0].text : valueComponents[2].text
-            };
-        }
+        declarer: [
+            'pair',
+            [
+                'width',
+                'height'
+            ]
+        ]
     },
     'min-size': {
         key: 'min',
         type: syntaxRuleType.Shorthand,
         unit: 'rem',
-        declare (_value, valueComponents) {
-            const length = valueComponents.length;
-            return {
-                'min-width': length === 1 ? valueComponents[0].text : valueComponents[0].text,
-                'min-height': length === 1 ? valueComponents[0].text : valueComponents[2].text
-            };
-        }
+        declarer: [
+            'pair',
+            [
+                'min-width',
+                'min-height'
+            ]
+        ]
     },
     'max-size': {
         key: 'max',
         type: syntaxRuleType.Shorthand,
         unit: 'rem',
-        declare (_value, valueComponents) {
-            const length = valueComponents.length;
-            return {
-                'max-width': length === 1 ? valueComponents[0].text : valueComponents[0].text,
-                'max-height': length === 1 ? valueComponents[0].text : valueComponents[2].text
-            };
-        }
+        declarer: [
+            'pair',
+            [
+                'max-width',
+                'max-height'
+            ]
+        ]
     },
     'box-sizing': {
-        ambiguousKeys: [
+        aliasGroups: [
             'box'
         ],
         type: syntaxRuleType.Native
@@ -543,12 +387,10 @@ const rules = {
     'box-decoration-break': {
         key: 'box-decoration',
         type: syntaxRuleType.Native,
-        declare (value) {
-            return {
-                '-webkit-box-decoration-break': value,
-                'box-decoration-break': value
-            };
-        }
+        declarations: [
+            '-webkit-box-decoration-break',
+            'box-decoration-break'
+        ]
     },
     container: {
         type: syntaxRuleType.NativeShorthand
@@ -558,10 +400,10 @@ const rules = {
     },
     'container-type': {
         type: syntaxRuleType.Native,
-        ambiguousKeys: [
+        aliasGroups: [
             'container'
         ],
-        ambiguousValues: [
+        values: [
             'size',
             'inline-size',
             'scroll-state'
@@ -591,11 +433,11 @@ const rules = {
         type: syntaxRuleType.Native
     },
     'object-fit': {
-        ambiguousKeys: [
+        aliasGroups: [
             'object',
             'obj'
         ],
-        ambiguousValues: [
+        values: [
             'contain',
             'cover',
             'fill',
@@ -604,11 +446,11 @@ const rules = {
         type: syntaxRuleType.Native
     },
     'object-position': {
-        ambiguousKeys: [
+        aliasGroups: [
             'object',
             'obj'
         ],
-        ambiguousValues: [
+        values: [
             'top',
             'bottom',
             'right',
@@ -618,11 +460,11 @@ const rules = {
         type: syntaxRuleType.Native
     },
     'text-align': {
-        ambiguousKeys: [
+        aliasGroups: [
             'text',
             't'
         ],
-        ambiguousValues: [
+        values: [
             'justify',
             'center',
             'left',
@@ -633,22 +475,21 @@ const rules = {
         type: syntaxRuleType.Native
     },
     'text-decoration-color': {
-        ambiguousKeys: [
+        aliasGroups: [
             'text-decoration'
         ],
-        ambiguousValues: [
-            common.COLOR_VALUE_REGEX
-        ],
+        kind: 'color',
         type: syntaxRuleType.Native,
-        variables: [
-            'text'
+        namespaces: [
+            'color',
+            'color.text'
         ]
     },
     'text-decoration-style': {
-        ambiguousKeys: [
+        aliasGroups: [
             'text-decoration'
         ],
-        ambiguousValues: [
+        values: [
             'solid',
             'double',
             'dotted',
@@ -658,21 +499,21 @@ const rules = {
         type: syntaxRuleType.Native
     },
     'text-decoration-thickness': {
-        ambiguousKeys: [
+        aliasGroups: [
             'text-decoration'
         ],
-        ambiguousValues: [
-            'from-font',
-            common.NUMBER_VALUE_REGEX
+        values: [
+            'from-font'
         ],
+        kind: 'number',
         type: syntaxRuleType.Native,
         unit: 'em'
     },
     'text-decoration-line': {
-        ambiguousKeys: [
+        aliasGroups: [
             'text-decoration'
         ],
-        ambiguousValues: [
+        values: [
             'underline',
             'overline',
             'line-through'
@@ -680,42 +521,41 @@ const rules = {
         type: syntaxRuleType.Native
     },
     'text-decoration': {
-        ambiguousKeys: [
+        aliasGroups: [
             'text',
             't'
         ],
-        ambiguousValues: [
+        values: [
             'underline',
             'overline',
             'line-through'
         ],
         unit: 'rem',
         type: syntaxRuleType.NativeShorthand,
-        variables: [
-            'text'
-        ],
-        declare (value) {
-            return {
-                '-webkit-text-decoration': value,
-                'text-decoration': value
-            };
-        }
+        namespaces: [
+            'color',
+            'color.text'
+        ],
+        declarations: [
+            '-webkit-text-decoration',
+            'text-decoration'
+        ]
     },
     'text-underline-offset': {
-        ambiguousKeys: [
+        aliasGroups: [
             'text-underline'
         ],
         unit: 'rem',
         type: syntaxRuleType.Native,
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
     'text-underline-position': {
-        ambiguousKeys: [
+        aliasGroups: [
             'text-underline'
         ],
-        ambiguousValues: [
+        values: [
             'front-font',
             'under',
             'left',
@@ -724,22 +564,22 @@ const rules = {
         type: syntaxRuleType.Native
     },
     'text-overflow': {
-        ambiguousKeys: [
+        aliasGroups: [
             'text',
             't'
         ],
-        ambiguousValues: [
+        values: [
             'ellipsis',
             'clip'
         ],
         type: syntaxRuleType.Native
     },
     'text-orientation': {
-        ambiguousKeys: [
+        aliasGroups: [
             'text',
             't'
         ],
-        ambiguousValues: [
+        values: [
             'mixed',
             'upright',
             'sideways-right',
@@ -749,11 +589,11 @@ const rules = {
         type: syntaxRuleType.Native
     },
     'text-transform': {
-        ambiguousKeys: [
+        aliasGroups: [
             'text',
             't'
         ],
-        ambiguousValues: [
+        values: [
             'uppercase',
             'lowercase',
             'capitalize'
@@ -761,11 +601,11 @@ const rules = {
         type: syntaxRuleType.Native
     },
     'text-rendering': {
-        ambiguousKeys: [
+        aliasGroups: [
             'text',
             't'
         ],
-        ambiguousValues: [
+        values: [
             'optimizeSpeed',
             'optimizeLegibility',
             'geometricPrecision'
@@ -773,11 +613,11 @@ const rules = {
         type: syntaxRuleType.Native
     },
     'text-wrap': {
-        ambiguousKeys: [
+        aliasGroups: [
             'text',
             't'
         ],
-        ambiguousValues: [
+        values: [
             'wrap',
             'nowrap',
             'balance',
@@ -807,35 +647,35 @@ const rules = {
     top: {
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
     bottom: {
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
     left: {
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
     right: {
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
     inset: {
         unit: 'rem',
         type: syntaxRuleType.NativeShorthand,
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -913,114 +753,113 @@ const rules = {
     },
     'user-drag': {
         type: syntaxRuleType.Native,
-        declare (value) {
-            return {
-                '-webkit-user-drag': value,
-                'user-drag': value
-            };
-        }
+        declarations: [
+            '-webkit-user-drag',
+            'user-drag'
+        ]
     },
     'user-select': {
         type: syntaxRuleType.Native,
-        declare (value) {
-            return {
-                '-webkit-user-select': value,
-                'user-select': value
-            };
-        }
+        declarations: [
+            '-webkit-user-select',
+            'user-select'
+        ]
     },
     'text-shadow': {
         unit: 'rem',
-        type: syntaxRuleType.Native
+        type: syntaxRuleType.Native,
+        namespaces: [
+            'color'
+        ]
     },
     'text-size': {
-        ambiguousKeys: [
+        aliasGroups: [
             'text',
             't'
         ],
-        ambiguousValues: [
-            common.NUMBER_VALUE_REGEX
-        ],
-        unit: 'rem',
-        declare (value) {
-            const diff = .875;
-            return {
-                'font-size': value,
-                'line-height': `calc(${value} + ${diff}em)`
-            };
+        kind: 'number',
+        unit: 'rem',
+        declarations: {
+            'font-size': undefined,
+            'line-height': [
+                'max(1.8em - max(0rem, ',
+                undefined,
+                ' - 1rem) * 1.12',
+                ', ',
+                undefined,
+                ')'
+            ],
+            'letter-spacing': [
+                'clamp(-0.072em, calc((',
+                undefined,
+                ' - 1rem) * -0.048), 0em)'
+            ]
         },
-        type: syntaxRuleType.Shorthand
+        type: syntaxRuleType.Shorthand,
+        namespaces: [
+            'font-size'
+        ]
     },
     'text-fill-color': {
-        ambiguousKeys: [
+        aliasGroups: [
             'text',
             't'
         ],
-        ambiguousValues: [
-            common.COLOR_VALUE_REGEX
-        ],
+        kind: 'color',
         type: syntaxRuleType.Native,
-        variables: [
-            'text'
+        namespaces: [
+            'color',
+            'color.text'
         ],
-        declare (value) {
-            return {
-                '-webkit-text-fill-color': value
-            };
-        }
+        declarations: [
+            '-webkit-text-fill-color'
+        ]
     },
     'text-stroke-width': {
-        ambiguousKeys: [
+        aliasGroups: [
             'text-stroke'
         ],
-        ambiguousValues: [
+        values: [
             'thin',
             'medium',
-            'thick',
-            common.NUMBER_VALUE_REGEX
+            'thick'
         ],
+        kind: 'number',
         unit: 'rem',
         type: syntaxRuleType.Native,
-        declare (value) {
-            return {
-                '-webkit-text-stroke-width': value
-            };
-        }
+        declarations: [
+            '-webkit-text-stroke-width'
+        ]
     },
     'text-stroke-color': {
-        ambiguousKeys: [
+        aliasGroups: [
             'text-stroke'
         ],
-        ambiguousValues: [
-            common.COLOR_VALUE_REGEX
-        ],
+        kind: 'color',
         type: syntaxRuleType.Native,
-        declare (value) {
-            return {
-                '-webkit-text-stroke-color': value
-            };
-        }
+        declarations: [
+            '-webkit-text-stroke-color'
+        ],
+        namespaces: [
+            'color'
+        ]
     },
     'text-stroke': {
         unit: 'rem',
         type: syntaxRuleType.Native,
-        declare (value) {
-            return {
-                '-webkit-text-stroke': value
-            };
-        }
+        declarations: [
+            '-webkit-text-stroke'
+        ]
     },
     'text-truncate': {
         subkey: 'lines',
-        declare (value) {
-            return {
-                display: '-webkit-box',
-                '-webkit-box-orient': 'vertical',
-                '-webkit-line-clamp': value,
-                overflow: 'hidden',
-                'overflow-wrap': 'break-word',
-                'text-overflow': 'ellipsis'
-            };
+        declarations: {
+            display: '-webkit-box',
+            '-webkit-box-orient': 'vertical',
+            '-webkit-line-clamp': undefined,
+            overflow: 'hidden',
+            'overflow-wrap': 'break-word',
+            'text-overflow': 'ellipsis'
         },
         type: syntaxRuleType.Shorthand
     },
@@ -1028,55 +867,161 @@ const rules = {
         key: 'shadow',
         subkey: 's',
         unit: 'rem',
-        type: syntaxRuleType.Native
+        type: syntaxRuleType.Native,
+        namespaces: [
+            'color'
+        ]
     },
     'table-layout': {
         type: syntaxRuleType.Native
     },
     'transform-box': {
-        ambiguousKeys: [
+        aliasGroups: [
             'transform'
         ],
         type: syntaxRuleType.Native
     },
     'transform-style': {
-        ambiguousKeys: [
+        aliasGroups: [
             'transform'
         ],
-        ambiguousValues: [
+        values: [
             'flat',
             'preserve-3d'
         ],
         type: syntaxRuleType.Native
     },
     'transform-origin': {
-        ambiguousKeys: [
+        aliasGroups: [
             'transform'
         ],
-        ambiguousValues: [
+        values: [
             'top',
             'bottom',
             'right',
             'left',
-            'center',
-            common.NUMBER_VALUE_REGEX
+            'center'
         ],
+        kind: 'number',
         unit: 'px',
         type: syntaxRuleType.Native
     },
     transform: {
-        matcher: /^(?:translate|scale|skew|rotate|perspective|matrix)(?:3d|[XYZ])?\(/,
         type: syntaxRuleType.Native,
-        analyze (className) {
-            return [
-                className.startsWith('transform') ? className.slice(10) : className
-            ];
-        },
-        unit: 'px',
-        variables: [
+        namespaces: [
+            'spacing'
+        ]
+    },
+    'translate()': {
+        declarations: [
+            'transform'
+        ],
+        unit: 'rem',
+        namespaces: [
+            'spacing'
+        ]
+    },
+    'translateX()': {
+        declarations: [
+            'transform'
+        ],
+        unit: 'rem',
+        namespaces: [
+            'spacing'
+        ]
+    },
+    'translateY()': {
+        declarations: [
+            'transform'
+        ],
+        unit: 'rem',
+        namespaces: [
+            'spacing'
+        ]
+    },
+    'translateZ()': {
+        declarations: [
+            'transform'
+        ],
+        unit: 'rem',
+        namespaces: [
             'spacing'
         ]
     },
+    'translate3d()': {
+        declarations: [
+            'transform'
+        ],
+        unit: 'rem',
+        namespaces: [
+            'spacing'
+        ]
+    },
+    'scale()': {
+        declarations: [
+            'transform'
+        ]
+    },
+    'scaleX()': {
+        declarations: [
+            'transform'
+        ]
+    },
+    'scaleY()': {
+        declarations: [
+            'transform'
+        ]
+    },
+    'scaleZ()': {
+        declarations: [
+            'transform'
+        ]
+    },
+    'scale3d()': {
+        declarations: [
+            'transform'
+        ]
+    },
+    'rotate()': {
+        declarations: [
+            'transform'
+        ]
+    },
+    'rotateX()': {
+        declarations: [
+            'transform'
+        ]
+    },
+    'rotateY()': {
+        declarations: [
+            'transform'
+        ]
+    },
+    'rotateZ()': {
+        declarations: [
+            'transform'
+        ]
+    },
+    'rotate3d()': {
+        declarations: [
+            'transform'
+        ]
+    },
+    'perspective()': {
+        declarations: [
+            'transform'
+        ]
+    },
+    'matrix()': {
+        declarations: [
+            'transform'
+        ]
+    },
+    'matrix3d()': {
+        declarations: [
+            'transform'
+        ]
+    },
     'transition-property': {
         key: '~property',
         type: syntaxRuleType.Native
@@ -1097,19 +1042,6 @@ const rules = {
     },
     transition: {
         sign: '~',
-        analyze (className) {
-            if (className.startsWith('~')) {
-                return [
-                    className.slice(1)
-                ];
-            } else {
-                const indexOfColon = className.indexOf(':');
-                this.keyToken = className.slice(0, indexOfColon + 1);
-                return [
-                    className.slice(indexOfColon + 1)
-                ];
-            }
-        },
         type: syntaxRuleType.NativeShorthand
     },
     'animation-delay': {
@@ -1150,27 +1082,14 @@ const rules = {
     animation: {
         sign: '@',
         type: syntaxRuleType.NativeShorthand,
-        includeAnimations: true,
-        analyze (className) {
-            if (className.startsWith('@')) {
-                return [
-                    className.slice(1)
-                ];
-            } else {
-                const indexOfColon = className.indexOf(':');
-                this.keyToken = className.slice(0, indexOfColon + 1);
-                return [
-                    className.slice(indexOfColon + 1)
-                ];
-            }
-        }
+        includeAnimations: true
     },
     'border-collapse': {
-        ambiguousKeys: [
+        aliasGroups: [
             'b',
             'border'
         ],
-        ambiguousValues: [
+        values: [
             'collapse',
             'separate'
         ],
@@ -1179,178 +1098,183 @@ const rules = {
     'border-spacing': {
         unit: 'rem',
         type: syntaxRuleType.Native,
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
     // border color
     'border-top-color': {
-        ambiguousKeys: [
+        aliasGroups: [
             'bt',
             'border-top'
         ],
-        ambiguousValues: [
-            common.COLOR_VALUE_REGEX
-        ],
+        kind: 'color',
         type: syntaxRuleType.Native,
-        variables: [
-            'frame'
+        namespaces: [
+            'color',
+            'color.line'
         ]
     },
     'border-bottom-color': {
-        ambiguousKeys: [
+        aliasGroups: [
             'bb',
             'border-bottom'
         ],
-        ambiguousValues: [
-            common.COLOR_VALUE_REGEX
-        ],
+        kind: 'color',
         type: syntaxRuleType.Native,
-        variables: [
-            'frame'
+        namespaces: [
+            'color',
+            'color.line'
         ]
     },
     'border-left-color': {
-        ambiguousKeys: [
+        aliasGroups: [
             'bl',
             'border-left'
         ],
-        ambiguousValues: [
-            common.COLOR_VALUE_REGEX
-        ],
+        kind: 'color',
         type: syntaxRuleType.Native,
-        variables: [
-            'frame'
+        namespaces: [
+            'color',
+            'color.line'
         ]
     },
     'border-right-color': {
-        ambiguousKeys: [
+        aliasGroups: [
             'br',
             'border-right'
         ],
-        ambiguousValues: [
-            common.COLOR_VALUE_REGEX
-        ],
+        kind: 'color',
         type: syntaxRuleType.Native,
-        variables: [
-            'frame'
+        namespaces: [
+            'color',
+            'color.line'
         ]
     },
     'border-x-color': {
-        ambiguousKeys: [
+        aliasGroups: [
             'bx',
             'border-x'
         ],
-        ambiguousValues: [
-            common.COLOR_VALUE_REGEX
-        ],
+        kind: 'color',
         type: syntaxRuleType.Shorthand,
-        variables: [
-            'frame'
-        ],
-        declare (value) {
-            return {
-                'border-left-color': value,
-                'border-right-color': value
-            };
-        }
+        namespaces: [
+            'color',
+            'color.line'
+        ],
+        declarations: [
+            'border-left-color',
+            'border-right-color'
+        ]
     },
     'border-y-color': {
-        ambiguousKeys: [
+        aliasGroups: [
             'by',
             'border-y'
         ],
-        ambiguousValues: [
-            common.COLOR_VALUE_REGEX
-        ],
+        kind: 'color',
         type: syntaxRuleType.Shorthand,
-        variables: [
-            'frame'
-        ],
-        declare (value) {
-            return {
-                'border-top-color': value,
-                'border-bottom-color': value
-            };
-        }
+        namespaces: [
+            'color',
+            'color.line'
+        ],
+        declarations: [
+            'border-top-color',
+            'border-bottom-color'
+        ]
     },
     'border-color': {
-        ambiguousKeys: [
+        aliasGroups: [
             'b',
             'border'
         ],
-        ambiguousValues: [
-            common.COLOR_VALUE_REGEX
-        ],
+        kind: 'color',
         type: syntaxRuleType.NativeShorthand,
-        variables: [
-            'frame'
+        namespaces: [
+            'color',
+            'color.line'
         ]
     },
     // border radius
     'border-top-left-radius': {
         key: 'rtl',
         unit: 'rem',
-        type: syntaxRuleType.Native
+        type: syntaxRuleType.Native,
+        namespaces: [
+            'border-radius'
+        ]
     },
     'border-top-right-radius': {
         key: 'rtr',
         unit: 'rem',
-        type: syntaxRuleType.Native
+        type: syntaxRuleType.Native,
+        namespaces: [
+            'border-radius'
+        ]
     },
     'border-bottom-left-radius': {
         key: 'rbl',
         unit: 'rem',
-        type: syntaxRuleType.Native
+        type: syntaxRuleType.Native,
+        namespaces: [
+            'border-radius'
+        ]
     },
     'border-bottom-right-radius': {
         key: 'rbr',
         unit: 'rem',
-        type: syntaxRuleType.Native
+        type: syntaxRuleType.Native,
+        namespaces: [
+            'border-radius'
+        ]
     },
     'border-top-radius': {
         key: 'rt',
         unit: 'rem',
         type: syntaxRuleType.Shorthand,
-        declare (value) {
-            return {
-                'border-top-left-radius': value,
-                'border-top-right-radius': value
-            };
-        }
+        declarations: [
+            'border-top-left-radius',
+            'border-top-right-radius'
+        ],
+        namespaces: [
+            'border-radius'
+        ]
     },
     'border-bottom-radius': {
         key: 'rb',
         unit: 'rem',
         type: syntaxRuleType.Shorthand,
-        declare (value) {
-            return {
-                'border-bottom-left-radius': value,
-                'border-bottom-right-radius': value
-            };
-        }
+        declarations: [
+            'border-bottom-left-radius',
+            'border-bottom-right-radius'
+        ],
+        namespaces: [
+            'border-radius'
+        ]
     },
     'border-left-radius': {
         key: 'rl',
         unit: 'rem',
         type: syntaxRuleType.Shorthand,
-        declare (value) {
-            return {
-                'border-top-left-radius': value,
-                'border-bottom-left-radius': value
-            };
-        }
+        declarations: [
+            'border-top-left-radius',
+            'border-bottom-left-radius'
+        ],
+        namespaces: [
+            'border-radius'
+        ]
     },
     'border-right-radius': {
         key: 'rr',
         unit: 'rem',
         type: syntaxRuleType.Shorthand,
-        declare (value) {
-            return {
-                'border-top-right-radius': value,
-                'border-bottom-right-radius': value
-            };
-        }
+        declarations: [
+            'border-top-right-radius',
+            'border-bottom-right-radius'
+        ],
+        namespaces: [
+            'border-radius'
+        ]
     },
     'border-radius': {
         key: 'r',
@@ -1359,169 +1283,147 @@ const rules = {
     },
     // border style
     'border-top-style': {
-        ambiguousKeys: [
+        aliasGroups: [
             'bt',
             'border-top'
         ],
-        ambiguousValues: common.BORDER_STYLE_VALUES,
+        values: common.BORDER_STYLE_VALUES,
         type: syntaxRuleType.Native
     },
     'border-bottom-style': {
-        ambiguousKeys: [
+        aliasGroups: [
             'bb',
             'border-bottom'
         ],
-        ambiguousValues: common.BORDER_STYLE_VALUES,
+        values: common.BORDER_STYLE_VALUES,
         type: syntaxRuleType.Native
     },
     'border-left-style': {
-        ambiguousKeys: [
+        aliasGroups: [
             'bl',
             'border-left'
         ],
-        ambiguousValues: common.BORDER_STYLE_VALUES,
+        values: common.BORDER_STYLE_VALUES,
         type: syntaxRuleType.Native
     },
     'border-right-style': {
-        ambiguousKeys: [
+        aliasGroups: [
             'br',
             'border-right'
         ],
-        ambiguousValues: common.BORDER_STYLE_VALUES,
+        values: common.BORDER_STYLE_VALUES,
         type: syntaxRuleType.Native
     },
     'border-x-style': {
-        ambiguousKeys: [
+        aliasGroups: [
             'bx',
             'border-x'
         ],
-        ambiguousValues: common.BORDER_STYLE_VALUES,
+        values: common.BORDER_STYLE_VALUES,
         type: syntaxRuleType.Shorthand,
-        declare (value) {
-            return {
-                'border-left-style': value,
-                'border-right-style': value
-            };
-        }
+        declarations: [
+            'border-left-style',
+            'border-right-style'
+        ]
     },
     'border-y-style': {
-        ambiguousKeys: [
+        aliasGroups: [
             'by',
             'border-y'
         ],
-        ambiguousValues: common.BORDER_STYLE_VALUES,
+        values: common.BORDER_STYLE_VALUES,
         type: syntaxRuleType.Shorthand,
-        declare (value) {
-            return {
-                'border-top-style': value,
-                'border-bottom-style': value
-            };
-        }
+        declarations: [
+            'border-top-style',
+            'border-bottom-style'
+        ]
     },
     'border-style': {
-        ambiguousKeys: [
+        aliasGroups: [
             'b',
             'border'
         ],
-        ambiguousValues: common.BORDER_STYLE_VALUES,
+        values: common.BORDER_STYLE_VALUES,
         type: syntaxRuleType.NativeShorthand
     },
     // border width
     'border-top-width': {
-        ambiguousKeys: [
+        aliasGroups: [
             'bt',
             'border-top'
         ],
-        ambiguousValues: [
-            common.NUMBER_VALUE_REGEX
-        ],
+        kind: 'number',
         unit: 'rem',
         type: syntaxRuleType.Native
     },
     'border-bottom-width': {
-        ambiguousKeys: [
+        aliasGroups: [
             'bb',
             'border-bottom'
         ],
-        ambiguousValues: [
-            common.NUMBER_VALUE_REGEX
-        ],
+        kind: 'number',
         unit: 'rem',
         type: syntaxRuleType.Native
     },
     'border-left-width': {
-        ambiguousKeys: [
+        aliasGroups: [
             'bl',
             'border-left'
         ],
-        ambiguousValues: [
-            common.NUMBER_VALUE_REGEX
-        ],
+        kind: 'number',
         unit: 'rem',
         type: syntaxRuleType.Native
     },
     'border-right-width': {
-        ambiguousKeys: [
+        aliasGroups: [
             'br',
             'border-right'
         ],
-        ambiguousValues: [
-            common.NUMBER_VALUE_REGEX
-        ],
+        kind: 'number',
         unit: 'rem',
         type: syntaxRuleType.Native
     },
     'border-x-width': {
-        ambiguousKeys: [
+        aliasGroups: [
             'bx',
             'border-x'
         ],
-        ambiguousValues: [
-            common.NUMBER_VALUE_REGEX
-        ],
+        kind: 'number',
         unit: 'rem',
         type: syntaxRuleType.Shorthand,
-        declare (value) {
-            return {
-                'border-left-width': value,
-                'border-right-width': value
-            };
-        }
+        declarations: [
+            'border-left-width',
+            'border-right-width'
+        ]
     },
     'border-y-width': {
-        ambiguousKeys: [
+        aliasGroups: [
             'by',
             'border-y'
         ],
-        ambiguousValues: [
-            common.NUMBER_VALUE_REGEX
-        ],
+        kind: 'number',
         unit: 'rem',
         type: syntaxRuleType.Shorthand,
-        declare (value) {
-            return {
-                'border-top-width': value,
-                'border-bottom-width': value
-            };
-        }
+        declarations: [
+            'border-top-width',
+            'border-bottom-width'
+        ]
     },
     'border-width': {
-        ambiguousKeys: [
+        aliasGroups: [
             'b',
             'border'
         ],
-        ambiguousValues: [
-            common.NUMBER_VALUE_REGEX
-        ],
+        kind: 'number',
         unit: 'rem',
         type: syntaxRuleType.NativeShorthand
     },
     // border image
     'border-image-repeat': {
-        ambiguousKeys: [
+        aliasGroups: [
             'border-image'
         ],
-        ambiguousValues: [
+        values: [
             'stretch',
             'repeat',
             'round',
@@ -1530,38 +1432,34 @@ const rules = {
         type: syntaxRuleType.Native
     },
     'border-image-slice': {
-        ambiguousKeys: [
+        aliasGroups: [
             'border-image'
         ],
         type: syntaxRuleType.Native
     },
     'border-image-source': {
-        ambiguousKeys: [
+        aliasGroups: [
             'border-image'
         ],
-        ambiguousValues: [
-            common.IMAGE_VALUE_REGEX
-        ],
+        kind: 'image',
         type: syntaxRuleType.Native
     },
     'border-image-width': {
-        ambiguousKeys: [
+        aliasGroups: [
             'border-image'
         ],
-        ambiguousValues: [
-            'auto',
-            common.NUMBER_VALUE_REGEX
+        values: [
+            'auto'
         ],
+        kind: 'number',
         unit: 'rem',
         type: syntaxRuleType.Native
     },
     'border-image-outset': {
-        ambiguousKeys: [
+        aliasGroups: [
             'border-image'
         ],
-        ambiguousValues: [
-            common.NUMBER_VALUE_REGEX
-        ],
+        kind: 'number',
         unit: 'rem',
         type: syntaxRuleType.Native
     },
@@ -1573,82 +1471,85 @@ const rules = {
         key: 'bt',
         type: syntaxRuleType.NativeShorthand,
         unit: 'rem',
-        transformValueComponents: autofillSolidStyle,
-        variables: [
-            'frame'
+        transformer: 'auto-fill-solid',
+        namespaces: [
+            'color',
+            'color.line'
         ]
     },
     'border-bottom': {
         key: 'bb',
         type: syntaxRuleType.NativeShorthand,
         unit: 'rem',
-        transformValueComponents: autofillSolidStyle,
-        variables: [
-            'frame'
+        transformer: 'auto-fill-solid',
+        namespaces: [
+            'color',
+            'color.line'
         ]
     },
     'border-left': {
         key: 'bl',
         type: syntaxRuleType.NativeShorthand,
         unit: 'rem',
-        transformValueComponents: autofillSolidStyle,
-        variables: [
-            'frame'
+        transformer: 'auto-fill-solid',
+        namespaces: [
+            'color',
+            'color.line'
         ]
     },
     'border-right': {
         key: 'br',
         type: syntaxRuleType.NativeShorthand,
         unit: 'rem',
-        transformValueComponents: autofillSolidStyle,
-        variables: [
-            'frame'
+        transformer: 'auto-fill-solid',
+        namespaces: [
+            'color',
+            'color.line'
         ]
     },
     'border-x': {
         key: 'bx',
         unit: 'rem',
         type: syntaxRuleType.Shorthand,
-        transformValueComponents: autofillSolidStyle,
-        variables: [
-            'frame'
-        ],
-        declare (value) {
-            return {
-                'border-left': value,
-                'border-right': value
-            };
-        }
+        transformer: 'auto-fill-solid',
+        namespaces: [
+            'color',
+            'color.line'
+        ],
+        declarations: [
+            'border-left',
+            'border-right'
+        ]
     },
     'border-y': {
         key: 'by',
         unit: 'rem',
         type: syntaxRuleType.Shorthand,
-        transformValueComponents: autofillSolidStyle,
-        variables: [
-            'frame'
-        ],
-        declare (value) {
-            return {
-                'border-top': value,
-                'border-bottom': value
-            };
-        }
+        transformer: 'auto-fill-solid',
+        namespaces: [
+            'color',
+            'color.line'
+        ],
+        declarations: [
+            'border-top',
+            'border-bottom'
+        ]
     },
     border: {
         key: 'b',
         unit: 'rem',
         type: syntaxRuleType.NativeShorthand,
-        transformValueComponents: autofillSolidStyle,
-        variables: [
-            'frame'
+        transformer: 'auto-fill-solid',
+        namespaces: [
+            'color',
+            'color.line'
         ]
     },
     'background-attachment': {
-        ambiguousKeys: [
+        aliasGroups: [
             'bg'
         ],
-        ambiguousValues: [
+        values: [
             'fixed',
             'local',
             'scroll'
@@ -1660,33 +1561,28 @@ const rules = {
         type: syntaxRuleType.Native
     },
     'background-color': {
-        ambiguousKeys: [
+        aliasGroups: [
             'bg'
         ],
-        ambiguousValues: [
-            common.COLOR_VALUE_REGEX
-        ],
-        type: syntaxRuleType.Native
+        kind: 'color',
+        type: syntaxRuleType.Native,
+        namespaces: [
+            'color'
+        ]
     },
     'background-clip': {
         key: 'bg-clip',
-        type: syntaxRuleType.Native,
-        declare (value) {
-            return {
-                '-webkit-background-clip': value,
-                'background-clip': value
-            };
-        }
+        type: syntaxRuleType.Native
     },
     'background-origin': {
         key: 'bg-origin',
         type: syntaxRuleType.Native
     },
     'background-position': {
-        ambiguousKeys: [
+        aliasGroups: [
             'bg'
         ],
-        ambiguousValues: [
+        values: [
             'top',
             'bottom',
             'right',
@@ -1697,10 +1593,10 @@ const rules = {
         unit: 'px'
     },
     'background-repeat': {
-        ambiguousKeys: [
+        aliasGroups: [
             'bg'
         ],
-        ambiguousValues: [
+        values: [
             'space',
             'round',
             'repeat',
@@ -1711,39 +1607,45 @@ const rules = {
         type: syntaxRuleType.Native
     },
     'background-size': {
-        ambiguousKeys: [
+        aliasGroups: [
             'bg'
         ],
-        ambiguousValues: [
+        values: [
             'auto',
             'cover',
-            'contain',
-            common.NUMBER_VALUE_REGEX
+            'contain'
         ],
+        kind: 'number',
         unit: 'rem',
         type: syntaxRuleType.Native
     },
     'background-image': {
-        ambiguousKeys: [
+        aliasGroups: [
             'bg'
         ],
-        ambiguousValues: [
-            common.IMAGE_VALUE_REGEX
-        ],
-        type: syntaxRuleType.Native
+        kind: 'image',
+        type: syntaxRuleType.Native,
+        namespaces: [
+            'color'
+        ]
     },
     background: {
         key: 'bg',
-        type: syntaxRuleType.NativeShorthand
+        type: syntaxRuleType.NativeShorthand,
+        namespaces: [
+            'color'
+        ]
     },
-    gradient: {
-        matcher: /^gradient\(/,
-        type: syntaxRuleType.Shorthand,
-        declare (value) {
-            return {
-                'background-image': 'linear-' + value
-            };
-        }
+    'gradient()': {
+        declarations: {
+            'background-image': [
+                'linear-',
+                undefined
+            ]
+        },
+        namespaces: [
+            'color'
+        ]
     },
     'mix-blend-mode': {
         key: 'blend',
@@ -1752,62 +1654,122 @@ const rules = {
     'backdrop-filter': {
         key: 'bd',
         type: syntaxRuleType.Native,
-        declare (value) {
-            return {
-                '-webkit-backdrop-filter': value,
-                'backdrop-filter': value
-            };
-        }
+        declarations: [
+            '-webkit-backdrop-filter',
+            'backdrop-filter'
+        ],
+        namespaces: [
+            'color'
+        ]
     },
     filter: {
-        matcher: /^(?:blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|opacity|saturate|sepia)\(/,
-        type: syntaxRuleType.Native
+        type: syntaxRuleType.Native,
+        namespaces: [
+            'color'
+        ]
+    },
+    'blur()': {
+        declarations: [
+            'filter'
+        ]
+    },
+    'brightness()': {
+        declarations: [
+            'filter'
+        ]
+    },
+    'contrast()': {
+        declarations: [
+            'filter'
+        ]
+    },
+    'drop-shadow()': {
+        declarations: [
+            'filter'
+        ],
+        namespaces: [
+            'color'
+        ]
+    },
+    'grayscale()': {
+        declarations: [
+            'filter'
+        ]
+    },
+    'hue-rotate()': {
+        declarations: [
+            'filter'
+        ]
+    },
+    'invert()': {
+        declarations: [
+            'filter'
+        ]
+    },
+    'opacity()': {
+        declarations: [
+            'filter'
+        ]
+    },
+    'saturate()': {
+        declarations: [
+            'filter'
+        ]
+    },
+    'sepia()': {
+        declarations: [
+            'filter'
+        ]
     },
     fill: {
-        type: syntaxRuleType.Native
+        type: syntaxRuleType.Native,
+        namespaces: [
+            'color'
+        ]
     },
     'stroke-dasharray': {
         type: syntaxRuleType.Native
     },
     'stroke-dashoffset': {
         type: syntaxRuleType.Native,
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
     'stroke-width': {
-        ambiguousKeys: [
+        aliasGroups: [
             'stroke'
         ],
-        ambiguousValues: [
-            common.NUMBER_VALUE_REGEX
-        ],
+        kind: 'number',
         type: syntaxRuleType.Native
     },
     stroke: {
-        type: syntaxRuleType.Native
+        type: syntaxRuleType.Native,
+        namespaces: [
+            'color'
+        ]
     },
     x: {
         type: syntaxRuleType.Native,
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
     y: {
         type: syntaxRuleType.Native,
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
     cx: {
         type: syntaxRuleType.Native,
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
     cy: {
         type: syntaxRuleType.Native,
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -1828,13 +1790,13 @@ const rules = {
     'grid-column-span': {
         key: 'grid-col-span',
         type: syntaxRuleType.Shorthand,
-        transformValue (value) {
-            return 'span' + ' ' + value + '/' + 'span' + ' ' + value;
-        },
-        declare (value) {
-            return {
-                'grid-column': value
-            };
+        declarations: {
+            'grid-column': [
+                'span ',
+                undefined,
+                '/span ',
+                undefined
+            ]
         }
     },
     'grid-column': {
@@ -1843,11 +1805,13 @@ const rules = {
     },
     'grid-columns': {
         key: 'grid-cols',
-        declare (value) {
-            return {
-                display: 'grid',
-                'grid-template-columns': 'repeat' + '(' + value + ',' + 'minmax' + '(' + 0 + ',' + 1 + 'fr' + '))'
-            };
+        declarations: {
+            display: 'grid',
+            'grid-template-columns': [
+                'repeat(',
+                undefined,
+                ',minmax(0,1fr))'
+            ]
         },
         type: syntaxRuleType.Shorthand
     },
@@ -1859,25 +1823,27 @@ const rules = {
     },
     'grid-row-span': {
         type: syntaxRuleType.Shorthand,
-        transformValue (value) {
-            return 'span' + ' ' + value + '/' + 'span' + ' ' + value;
-        },
-        declare (value) {
-            return {
-                'grid-row': value
-            };
+        declarations: {
+            'grid-row': [
+                'span ',
+                undefined,
+                '/span ',
+                undefined
+            ]
         }
     },
     'grid-row': {
         type: syntaxRuleType.NativeShorthand
     },
     'grid-rows': {
-        declare (value) {
-            return {
-                display: 'grid',
-                'grid-auto-flow': 'column',
-                'grid-template-rows': 'repeat' + '(' + value + ',' + 'minmax' + '(' + 0 + ',' + 1 + 'fr' + '))'
-            };
+        declarations: {
+            display: 'grid',
+            'grid-auto-flow': 'column',
+            'grid-template-rows': [
+                'repeat(',
+                undefined,
+                ',minmax(0,1fr))'
+            ]
         },
         type: syntaxRuleType.Shorthand
     },
@@ -1917,7 +1883,7 @@ const rules = {
         key: 'gap-x',
         unit: 'rem',
         type: syntaxRuleType.Native,
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -1925,14 +1891,14 @@ const rules = {
         key: 'gap-y',
         unit: 'rem',
         type: syntaxRuleType.Native,
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
     gap: {
         unit: 'rem',
         type: syntaxRuleType.NativeShorthand,
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -1991,91 +1957,92 @@ const rules = {
         type: syntaxRuleType.NativeShorthand
     },
     'list-style-position': {
-        ambiguousKeys: [
+        aliasGroups: [
             'list-style'
         ],
-        ambiguousValues: [
+        values: [
             'inside',
             'outside'
         ],
         type: syntaxRuleType.Native
     },
     'list-style-type': {
-        ambiguousKeys: [
+        aliasGroups: [
             'list-style'
         ],
-        ambiguousValues: [
+        values: [
             'disc',
             'decimal'
         ],
         type: syntaxRuleType.Native
     },
     'list-style-image': {
-        ambiguousKeys: [
+        aliasGroups: [
             'list-style'
         ],
-        ambiguousValues: [
-            common.IMAGE_VALUE_REGEX
-        ],
+        kind: 'image',
         type: syntaxRuleType.Native
     },
     'list-style': {
         type: syntaxRuleType.NativeShorthand
     },
     'outline-color': {
-        ambiguousKeys: [
+        aliasGroups: [
             'outline'
         ],
-        ambiguousValues: [
-            common.COLOR_VALUE_REGEX
-        ],
+        kind: 'color',
         type: syntaxRuleType.Native,
-        variables: [
-            'frame'
+        namespaces: [
+            'color',
+            'color.line'
         ]
     },
     'outline-offset': {
         unit: 'rem',
         type: syntaxRuleType.Native,
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
     'outline-style': {
-        ambiguousKeys: [
+        aliasGroups: [
             'outline'
         ],
-        ambiguousValues: common.BORDER_STYLE_VALUES,
+        values: common.BORDER_STYLE_VALUES,
         type: syntaxRuleType.Native
     },
     'outline-width': {
-        ambiguousKeys: [
+        aliasGroups: [
             'outline'
         ],
-        ambiguousValues: [
+        values: [
             'medium',
             'thick',
-            'thin',
-            common.NUMBER_VALUE_REGEX
+            'thin'
         ],
+        kind: 'number',
         unit: 'rem',
         type: syntaxRuleType.Native
     },
     outline: {
         unit: 'rem',
         type: syntaxRuleType.NativeShorthand,
-        variables: [
+        namespaces: [
             'outline-width',
             'outline-style',
             'outline-offset',
             'outline-color',
-            'frame'
+            'color.line',
+            'color'
         ],
-        transformValueComponents: autofillSolidStyle
+        transformer: 'auto-fill-solid'
     },
     'accent-color': {
         key: 'accent',
-        type: syntaxRuleType.Native
+        type: syntaxRuleType.Native,
+        namespaces: [
+            'color'
+        ]
     },
     appearance: {
         type: syntaxRuleType.Native
@@ -2083,8 +2050,9 @@ const rules = {
     'caret-color': {
         key: 'caret',
         type: syntaxRuleType.Native,
-        variables: [
-            'text'
+        namespaces: [
+            'color',
+            'color.text'
         ]
     },
     'scroll-behavior': {
@@ -2095,7 +2063,7 @@ const rules = {
         key: 'scroll-ml',
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -2103,7 +2071,7 @@ const rules = {
         key: 'scroll-mr',
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -2111,7 +2079,7 @@ const rules = {
         key: 'scroll-mt',
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -2119,7 +2087,7 @@ const rules = {
         key: 'scroll-mb',
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -2127,13 +2095,11 @@ const rules = {
         key: 'scroll-mx',
         unit: 'rem',
         type: syntaxRuleType.Shorthand,
-        declare (value) {
-            return {
-                'scroll-margin-left': value,
-                'scroll-margin-right': value
-            };
-        },
-        variables: [
+        declarations: [
+            'scroll-margin-left',
+            'scroll-margin-right'
+        ],
+        namespaces: [
             'spacing'
         ]
     },
@@ -2141,13 +2107,11 @@ const rules = {
         key: 'scroll-my',
         unit: 'rem',
         type: syntaxRuleType.Shorthand,
-        declare (value) {
-            return {
-                'scroll-margin-top': value,
-                'scroll-margin-bottom': value
-            };
-        },
-        variables: [
+        declarations: [
+            'scroll-margin-top',
+            'scroll-margin-bottom'
+        ],
+        namespaces: [
             'spacing'
         ]
     },
@@ -2155,7 +2119,7 @@ const rules = {
         key: 'scroll-m',
         unit: 'rem',
         type: syntaxRuleType.NativeShorthand,
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -2164,7 +2128,7 @@ const rules = {
         key: 'scroll-pl',
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -2172,7 +2136,7 @@ const rules = {
         key: 'scroll-pr',
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -2180,7 +2144,7 @@ const rules = {
         key: 'scroll-pt',
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -2188,7 +2152,7 @@ const rules = {
         key: 'scroll-pb',
         type: syntaxRuleType.Native,
         unit: 'rem',
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -2196,13 +2160,11 @@ const rules = {
         key: 'scroll-px',
         unit: 'rem',
         type: syntaxRuleType.Shorthand,
-        declare (value) {
-            return {
-                'scroll-padding-left': value,
-                'scroll-padding-right': value
-            };
-        },
-        variables: [
+        declarations: [
+            'scroll-padding-left',
+            'scroll-padding-right'
+        ],
+        namespaces: [
             'spacing'
         ]
     },
@@ -2210,13 +2172,11 @@ const rules = {
         key: 'scroll-py',
         unit: 'rem',
         type: syntaxRuleType.Shorthand,
-        declare (value) {
-            return {
-                'scroll-padding-top': value,
-                'scroll-padding-bottom': value
-            };
-        },
-        variables: [
+        declarations: [
+            'scroll-padding-top',
+            'scroll-padding-bottom'
+        ],
+        namespaces: [
             'spacing'
         ]
     },
@@ -2224,16 +2184,16 @@ const rules = {
         key: 'scroll-p',
         unit: 'rem',
         type: syntaxRuleType.NativeShorthand,
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
     // scroll snap
     'scroll-snap-align': {
-        ambiguousKeys: [
+        aliasGroups: [
             'scroll-snap'
         ],
-        ambiguousValues: [
+        values: [
             'start',
             'end',
             'center'
@@ -2241,20 +2201,20 @@ const rules = {
         type: syntaxRuleType.Native
     },
     'scroll-snap-stop': {
-        ambiguousKeys: [
+        aliasGroups: [
             'scroll-snap'
         ],
-        ambiguousValues: [
+        values: [
             'normal',
             'always'
         ],
         type: syntaxRuleType.Native
     },
     'scroll-snap-type': {
-        ambiguousKeys: [
+        aliasGroups: [
             'scroll-snap'
         ],
-        ambiguousValues: [
+        values: [
             'x',
             'y',
             'block',
@@ -2274,24 +2234,14 @@ const rules = {
         type: syntaxRuleType.Native
     },
     'shape-outside': {
-        ambiguousKeys: [
-            'shape'
-        ],
-        ambiguousValues: [
-            /(?:inset|circle|ellipse|polygon|url|linear-gradient)\(.*\)/
-        ],
+        key: 'shape',
         type: syntaxRuleType.Native
     },
     'shape-margin': {
-        ambiguousKeys: [
-            'shape'
-        ],
-        ambiguousValues: [
-            common.NUMBER_VALUE_REGEX
-        ],
+        kind: 'number',
         unit: 'rem',
         type: syntaxRuleType.Native,
-        variables: [
+        namespaces: [
             'spacing'
         ]
     },
@@ -2307,12 +2257,20 @@ const rules = {
     },
     'mask-image': {
         type: syntaxRuleType.Native,
-        declare (value) {
-            return {
-                '-webkit-mask-image': value,
-                'mask-image': value
-            };
-        }
+        declarations: [
+            '-webkit-mask-image',
+            'mask-image'
+        ]
+    },
+    group: {
+        matcher: '^\\{.+?\\}',
+        type: syntaxRuleType.Shorthand,
+        declarer: 'core.group'
+    },
+    variable: {
+        matcher: '^\\$[\\w-]+:',
+        type: syntaxRuleType.Shorthand,
+        declarer: 'core.variable'
     }
 };