@master/css 2.0.0-rc.26 → 2.0.0-rc.27

package/dist/config/rules.mjs

@@ -1,8 +1,9 @@
 import cssEscape from '../shared/utils/css-escape.mjs';
-import { START_SYMBOLS } from '../constants/start-symbol.mjs';
-import { Layer } from '../layer.mjs';
+import Layer from '../layer.mjs';
+import { VALUE_DELIMITERS, NUMBER_VALUE_REGEX, COLOR_VALUE_REGEX, IMAGE_VALUE_REGEX } from '../common.mjs';
 
-const BORDER_STYLES = [
+// values
+const BORDER_STYLE_VALUES = [
     'none',
     'auto',
     'hidden',
@@ -18,23 +19,25 @@ const BORDER_STYLES = [
 const autofillSolidToValueComponent = function(valueComponents) {
     if (valueComponents.length < 2) return valueComponents;
     const styleValueComponent = valueComponents.find((valueComponent)=>{
-        return valueComponent.type === 'string' && BORDER_STYLES.includes(valueComponent.value) || valueComponent.type === 'variable' && BORDER_STYLES.includes(valueComponent.variable?.value);
+        return valueComponent.type === 'string' && BORDER_STYLE_VALUES.includes(valueComponent.value) || valueComponent.type === 'variable' && BORDER_STYLE_VALUES.includes(String(valueComponent.variable?.value));
     });
     if (!styleValueComponent) {
         valueComponents.push({
             type: 'separator',
-            value: ' '
+            value: ' ',
+            token: '|'
         }, {
             type: 'string',
-            value: 'solid'
+            value: 'solid',
+            token: 'solid'
         });
     }
     return valueComponents;
 };
 const rules = {
     group: {
-        match: /^(?:.+?[*_>~+])?\{.+?\}/,
-        layer: Layer.Core,
+        matcher: /^(?:.+?[*_>~+])?\{.+?\}/,
+        layer: Layer.Shorthand,
         analyze (className) {
             let i = 0;
             for(; i < className.length; i++){
@@ -125,9 +128,9 @@ const rules = {
                             }
                         }
                         break;
-                    } else if (char in START_SYMBOLS && end !== '\'' && end !== '"') {
+                    } else if (char in VALUE_DELIMITERS && end !== '\'' && end !== '"') {
                         i++;
-                        analyze(START_SYMBOLS[char]);
+                        analyze(VALUE_DELIMITERS[char]);
                     }
                 }
             })('');
@@ -146,47 +149,52 @@ const rules = {
         }
     },
     variable: {
-        match: /^\$[\w-]+:/,
-        colored: true,
-        layer: Layer.Core,
+        matcher: /^\$[\w-]+:/,
+        layer: Layer.Normal,
         declare (value) {
             return {
-                ['--' + this.prefix.slice(1, -1)]: value
+                ['--' + this.keyToken.slice(1, -1)]: value
             };
         }
     },
     'font-size': {
-        match: [
-            'f(?:ont)?'
+        ambiguousKeys: [
+            'font',
+            'f'
+        ],
+        ambiguousValues: [
+            NUMBER_VALUE_REGEX
         ],
-        numeric: true,
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'font-weight': {
-        match: [
-            'f(?:ont)?',
-            [
-                'bolder'
-            ]
+        ambiguousKeys: [
+            'font',
+            'f'
+        ],
+        ambiguousValues: [
+            'bolder'
         ],
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'font-family': {
-        match: [
-            'f(?:ont)?'
+        ambiguousKeys: [
+            'font',
+            'f'
         ],
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'font-smoothing': {
-        match: [
-            'f(?:ont)?',
-            [
-                'antialiased',
-                'subpixel-antialiased'
-            ]
-        ],
-        layer: Layer.CoreNative,
+        ambiguousKeys: [
+            'font',
+            'f'
+        ],
+        ambiguousValues: [
+            'antialiased',
+            'subpixel-antialiased'
+        ],
+        layer: Layer.Native,
         declare (value) {
             switch(value){
                 case 'subpixel-antialiased':
@@ -203,43 +211,45 @@ const rules = {
         }
     },
     'font-style': {
-        match: [
-            'f(?:ont)?',
-            [
-                'normal',
-                'italic',
-                'oblique'
-            ]
-        ],
-        layer: Layer.CoreNative,
+        ambiguousKeys: [
+            'font',
+            'f'
+        ],
+        ambiguousValues: [
+            'normal',
+            'italic',
+            'oblique'
+        ],
+        layer: Layer.Native,
         unit: 'deg'
     },
     'font-variant-numeric': {
-        match: [
-            'f(?:ont)?',
-            [
-                'ordinal',
-                'slashed-zero',
-                'lining-nums',
-                'oldstyle-nums',
-                'proportional-nums',
-                'tabular-nums',
-                'diagonal-fractions',
-                'stacked-fractions'
-            ]
-        ],
-        layer: Layer.CoreNative
+        ambiguousKeys: [
+            'font',
+            'f'
+        ],
+        ambiguousValues: [
+            'ordinal',
+            'slashed-zero',
+            'lining-nums',
+            'oldstyle-nums',
+            'proportional-nums',
+            'tabular-nums',
+            'diagonal-fractions',
+            'stacked-fractions'
+        ],
+        layer: Layer.Native
     },
     'font-variant': {
-        layer: Layer.CoreNativeShorthand
-    },
-    'font-feature-settings': {
-        match: /^font-feature:/,
-        layer: Layer.CoreNative
+        ambiguousKeys: [
+            'font',
+            'f'
+        ],
+        layer: Layer.NativeShorthand
     },
     font: {
-        match: /^f:/,
-        layer: Layer.CoreNativeShorthand,
+        subkey: 'f',
+        layer: Layer.NativeShorthand,
         variables: [
             'font-family',
             'font-variant',
@@ -249,51 +259,55 @@ const rules = {
             'line-height'
         ]
     },
+    'font-feature-settings': {
+        key: 'font-feature',
+        layer: Layer.Native
+    },
     color: {
-        match: /^(?:color|fg):/,
-        layer: Layer.CoreNative,
-        colored: true,
+        key: 'fg',
+        layer: Layer.Native,
         variables: [
             'text'
         ]
     },
     // margin
     'margin-left': {
-        match: /^ml:/,
-        layer: Layer.CoreNative,
+        key: 'ml',
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     'margin-right': {
-        match: /^mr:/,
-        layer: Layer.CoreNative,
+        key: 'mr',
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     'margin-top': {
-        match: /^mt:/,
-        layer: Layer.CoreNative,
+        key: 'mt',
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     'margin-bottom': {
-        match: /^mb:/,
-        layer: Layer.CoreNative,
+        key: 'mb',
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     'margin-x': {
-        match: /^(?:mx|margin-x):/,
+        key: 'mx',
+        subkey: 'margin-x',
         unit: 'rem',
-        layer: Layer.CoreShorthand,
+        layer: Layer.Shorthand,
         declare (value) {
             return {
                 'margin-left': value,
@@ -305,9 +319,9 @@ const rules = {
         ]
     },
     'margin-y': {
-        match: /^(?:my|margin-y):/,
+        key: 'my',
         unit: 'rem',
-        layer: Layer.CoreShorthand,
+        layer: Layer.Shorthand,
         declare (value) {
             return {
                 'margin-top': value,
@@ -319,75 +333,75 @@ const rules = {
         ]
     },
     margin: {
-        match: /^m:/,
+        key: 'm',
         unit: 'rem',
-        layer: Layer.CoreNativeShorthand,
+        layer: Layer.NativeShorthand,
         variables: [
             'spacing'
         ]
     },
     // margin inline
     'margin-inline-start': {
-        match: /^mis:/,
-        layer: Layer.CoreNative,
+        key: 'mis',
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     'margin-inline-end': {
-        match: /^mie:/,
-        layer: Layer.CoreNative,
+        key: 'mie',
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     'margin-inline': {
-        match: /^mi:/,
+        key: 'mi',
         unit: 'rem',
-        layer: Layer.CoreNativeShorthand,
+        layer: Layer.NativeShorthand,
         variables: [
             'spacing'
         ]
     },
     // padding
     'padding-left': {
-        match: /^pl:/,
-        layer: Layer.CoreNative,
+        key: 'pl',
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     'padding-right': {
-        match: /^pr:/,
-        layer: Layer.CoreNative,
+        key: 'pr',
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     'padding-top': {
-        match: /^pt:/,
-        layer: Layer.CoreNative,
+        key: 'pt',
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     'padding-bottom': {
-        match: /^pb:/,
-        layer: Layer.CoreNative,
+        key: 'pb',
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     'padding-x': {
-        match: /^(?:px|padding-x):/,
+        key: 'px',
         unit: 'rem',
-        layer: Layer.CoreShorthand,
+        layer: Layer.Shorthand,
         declare (value) {
             return {
                 'padding-left': value,
@@ -399,9 +413,9 @@ const rules = {
         ]
     },
     'padding-y': {
-        match: /^(?:py|padding-y):/,
+        key: 'py',
         unit: 'rem',
-        layer: Layer.CoreShorthand,
+        layer: Layer.Shorthand,
         declare (value) {
             return {
                 'padding-top': value,
@@ -413,102 +427,110 @@ const rules = {
         ]
     },
     padding: {
-        match: /^p:/,
+        key: 'p',
         unit: 'rem',
-        layer: Layer.CoreNativeShorthand,
+        layer: Layer.NativeShorthand,
         variables: [
             'spacing'
         ]
     },
     // padding inline
     'padding-inline-start': {
-        match: /^pis:/,
-        layer: Layer.CoreNative,
+        key: 'pis',
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     'padding-inline-end': {
-        match: /^pie:/,
-        layer: Layer.CoreNative,
+        key: 'pie',
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     'padding-inline': {
-        match: /^pi:/,
+        key: 'pi',
         unit: 'rem',
-        layer: Layer.CoreNativeShorthand,
+        layer: Layer.NativeShorthand,
         variables: [
             'spacing'
         ]
     },
     // flex
     'flex-basis': {
+        ambiguousKeys: [
+            'flex'
+        ],
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'flex-wrap': {
-        match: [
-            'flex',
-            [
-                'wrap',
-                'nowrap',
-                'wrap-reverse'
-            ]
+        ambiguousKeys: [
+            'flex'
+        ],
+        ambiguousValues: [
+            'wrap',
+            'nowrap',
+            'wrap-reverse'
         ],
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'flex-grow': {
-        layer: Layer.CoreNative
+        ambiguousKeys: [
+            'flex'
+        ],
+        layer: Layer.Native
     },
     'flex-shrink': {
-        layer: Layer.CoreNative
+        ambiguousKeys: [
+            'flex'
+        ],
+        layer: Layer.Native
     },
     'flex-direction': {
-        match: [
-            'flex',
-            [
-                'row',
-                'row-reverse',
-                'column',
-                'column-reverse'
-            ]
+        ambiguousKeys: [
+            'flex'
         ],
-        layer: Layer.CoreNative
+        ambiguousValues: [
+            'row',
+            'row-reverse',
+            'column',
+            'column-reverse'
+        ],
+        layer: Layer.Native
     },
     flex: {
-        layer: Layer.CoreNativeShorthand
+        layer: Layer.NativeShorthand
     },
     display: {
-        match: /^d:/,
-        layer: Layer.CoreNative
+        key: 'd',
+        layer: Layer.Native
     },
     width: {
-        match: /^w:/,
+        key: 'w',
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     height: {
-        match: /^h:/,
+        key: 'h',
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'min-width': {
-        match: /^min-w:/,
+        key: 'min-w',
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'min-height': {
-        match: /^min-h:/,
+        key: 'min-h',
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     size: {
-        match: /^size:/,
-        layer: Layer.CoreShorthand,
+        layer: Layer.Shorthand,
         unit: 'rem',
         declare (_value, valueComponents) {
             const length = valueComponents.length;
@@ -519,8 +541,8 @@ const rules = {
         }
     },
     'min-size': {
-        match: /^min:/,
-        layer: Layer.CoreShorthand,
+        key: 'min',
+        layer: Layer.Shorthand,
         unit: 'rem',
         declare (_value, valueComponents) {
             const length = valueComponents.length;
@@ -531,8 +553,8 @@ const rules = {
         }
     },
     'max-size': {
-        match: /^max:/,
-        layer: Layer.CoreShorthand,
+        key: 'max',
+        layer: Layer.Shorthand,
         unit: 'rem',
         declare (_value, valueComponents) {
             const length = valueComponents.length;
@@ -543,237 +565,265 @@ const rules = {
         }
     },
     'box-sizing': {
-        match: /^box:/,
-        layer: Layer.CoreNative
+        ambiguousKeys: [
+            'box'
+        ],
+        layer: Layer.Native
     },
     'box-decoration-break': {
-        match: [
-            'box-decoration',
-            [
-                'slice',
-                'clone'
-            ]
-        ],
-        layer: Layer.CoreNative,
+        key: 'box-decoration',
+        layer: Layer.Native,
         declare (value) {
             return {
-                'box-decoration-break': value,
-                '-webkit-box-decoration-break': value
+                '-webkit-box-decoration-break': value,
+                'box-decoration-break': value
             };
         }
     },
     contain: {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     content: {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'counter-increment': {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'counter-reset': {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'letter-spacing': {
-        match: /^ls:/,
-        layer: Layer.CoreNative,
+        key: 'tracking',
+        subkey: 'ls',
+        layer: Layer.Native,
         unit: 'em'
     },
     'line-height': {
-        match: /^lh:/,
-        layer: Layer.CoreNative
+        key: 'leading',
+        subkey: 'line-h',
+        layer: Layer.Native
     },
     'object-fit': {
-        match: [
-            '(?:object|obj)',
-            [
-                'contain',
-                'cover',
-                'fill',
-                'scale-down'
-            ]
+        ambiguousKeys: [
+            'object',
+            'obj'
         ],
-        layer: Layer.CoreNative
+        ambiguousValues: [
+            'contain',
+            'cover',
+            'fill',
+            'scale-down'
+        ],
+        layer: Layer.Native
     },
     'object-position': {
-        match: [
-            '(?:object|obj)',
-            [
-                'top',
-                'bottom',
-                'right',
-                'left',
-                'center'
-            ]
-        ],
-        layer: Layer.CoreNative
+        ambiguousKeys: [
+            'object',
+            'obj'
+        ],
+        ambiguousValues: [
+            'top',
+            'bottom',
+            'right',
+            'left',
+            'center'
+        ],
+        layer: Layer.Native
     },
     'text-align': {
-        match: [
-            't(?:ext)?',
-            [
-                'justify',
-                'center',
-                'left',
-                'right',
-                'start',
-                'end'
-            ]
-        ],
-        layer: Layer.CoreNative
+        ambiguousKeys: [
+            'text',
+            't'
+        ],
+        ambiguousValues: [
+            'justify',
+            'center',
+            'left',
+            'right',
+            'start',
+            'end'
+        ],
+        layer: Layer.Native
     },
     'text-decoration-color': {
-        match: [
+        ambiguousKeys: [
             'text-decoration'
         ],
-        layer: Layer.CoreNative,
-        colored: true,
+        ambiguousValues: [
+            COLOR_VALUE_REGEX
+        ],
+        layer: Layer.Native,
         variables: [
             'text'
         ]
     },
     'text-decoration-style': {
-        match: [
-            't(?:ext)?',
-            [
-                'solid',
-                'double',
-                'dotted',
-                'dashed',
-                'wavy'
-            ]
-        ],
-        layer: Layer.CoreNative
+        ambiguousKeys: [
+            'text-decoration'
+        ],
+        ambiguousValues: [
+            'solid',
+            'double',
+            'dotted',
+            'dashed',
+            'wavy'
+        ],
+        layer: Layer.Native
     },
     'text-decoration-thickness': {
-        match: [
-            'text-decoration',
-            [
-                'from-font'
-            ]
-        ],
-        numeric: true,
-        layer: Layer.CoreNative,
+        ambiguousKeys: [
+            'text-decoration'
+        ],
+        ambiguousValues: [
+            'from-font',
+            NUMBER_VALUE_REGEX
+        ],
+        layer: Layer.Native,
         unit: 'em'
     },
     'text-decoration-line': {
-        match: [
-            't(?:ext)?',
-            [
-                'none',
-                'underline',
-                'overline',
-                'line-through'
-            ]
+        ambiguousKeys: [
+            'text-decoration'
+        ],
+        ambiguousValues: [
+            'underline',
+            'overline',
+            'line-through'
         ],
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'text-decoration': {
-        match: [
-            't(?:ext)?',
-            [
-                'underline',
-                'overline',
-                'line-through'
-            ]
+        ambiguousKeys: [
+            'text',
+            't'
+        ],
+        ambiguousValues: [
+            'underline',
+            'overline',
+            'line-through'
         ],
         unit: 'rem',
-        colored: true,
-        layer: Layer.CoreNativeShorthand,
+        layer: Layer.NativeShorthand,
         variables: [
             'text'
-        ]
+        ],
+        declare (value) {
+            return {
+                '-webkit-text-decoration': value,
+                'text-decoration': value
+            };
+        }
     },
     'text-underline-offset': {
+        ambiguousKeys: [
+            'text-underline'
+        ],
         unit: 'rem',
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         variables: [
             'spacing'
         ]
     },
+    'text-underline-position': {
+        ambiguousKeys: [
+            'text-underline'
+        ],
+        ambiguousValues: [
+            'front-font',
+            'under',
+            'left',
+            'right'
+        ],
+        layer: Layer.Native
+    },
     'text-overflow': {
-        match: [
-            't(?:ext)?',
-            [
-                'ellipsis',
-                'clip'
-            ]
+        ambiguousKeys: [
+            'text',
+            't'
+        ],
+        ambiguousValues: [
+            'ellipsis',
+            'clip'
         ],
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'text-orientation': {
-        match: [
-            't(?:ext)?',
-            [
-                'mixed',
-                'upright',
-                'sideways-right',
-                'sideways',
-                'use-glyph-orientation'
-            ]
-        ],
-        layer: Layer.CoreNative
+        ambiguousKeys: [
+            'text',
+            't'
+        ],
+        ambiguousValues: [
+            'mixed',
+            'upright',
+            'sideways-right',
+            'sideways',
+            'use-glyph-orientation'
+        ],
+        layer: Layer.Native
     },
     'text-transform': {
-        match: [
-            't(?:ext)?',
-            [
-                'uppercase',
-                'lowercase',
-                'capitalize'
-            ]
+        ambiguousKeys: [
+            'text',
+            't'
+        ],
+        ambiguousValues: [
+            'uppercase',
+            'lowercase',
+            'capitalize'
         ],
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'text-rendering': {
-        match: [
-            't(?:ext)?',
-            [
-                'optimizeSpeed',
-                'optimizeLegibility',
-                'geometricPrecision'
-            ]
+        ambiguousKeys: [
+            'text',
+            't'
         ],
-        layer: Layer.CoreNative
+        ambiguousValues: [
+            'optimizeSpeed',
+            'optimizeLegibility',
+            'geometricPrecision'
+        ],
+        layer: Layer.Native
     },
     'text-indent': {
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'vertical-align': {
-        match: /^(?:v|vertical):/,
-        layer: Layer.CoreNative
+        key: 'v',
+        subkey: 'vertical',
+        layer: Layer.Native
     },
     columns: {
-        match: /^(?:columns|cols):/,
-        layer: Layer.CoreNativeShorthand
+        key: 'cols',
+        layer: Layer.NativeShorthand
     },
     'white-space': {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     top: {
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     bottom: {
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     left: {
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     right: {
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -781,51 +831,38 @@ const rules = {
     },
     inset: {
         unit: 'rem',
-        layer: Layer.CoreNativeShorthand,
+        layer: Layer.NativeShorthand,
         variables: [
             'spacing'
         ]
     },
-    lines: {
-        match: /^lines:/,
-        declare (value) {
-            return {
-                overflow: 'hidden',
-                display: '-webkit-box',
-                'overflow-wrap': 'break-word',
-                'text-overflow': 'ellipsis',
-                '-webkit-box-orient': 'vertical',
-                '-webkit-line-clamp': value
-            };
-        }
-    },
     'max-height': {
-        match: /^max-h:/,
+        key: 'max-h',
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'max-width': {
-        match: /^max-w:/,
+        key: 'max-w',
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     opacity: {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     visibility: {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     clear: {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     float: {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     isolation: {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'overflow-x': {
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         declare (value) {
             return value === 'overlay' ? {
                 'overflow-x': [
@@ -838,7 +875,7 @@ const rules = {
         }
     },
     'overflow-y': {
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         declare (value) {
             return value === 'overlay' ? {
                 'overflow-y': [
@@ -851,7 +888,7 @@ const rules = {
         }
     },
     overflow: {
-        layer: Layer.CoreNativeShorthand,
+        layer: Layer.NativeShorthand,
         declare (value) {
             return value === 'overlay' ? {
                 overflow: [
@@ -864,68 +901,70 @@ const rules = {
         }
     },
     'overscroll-behavior-x': {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'overscroll-behavior-y': {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'overscroll-behavior': {
-        layer: Layer.CoreNativeShorthand
+        layer: Layer.NativeShorthand
     },
     'z-index': {
-        match: /^z:/,
-        layer: Layer.CoreNative
+        key: 'z',
+        layer: Layer.Native
     },
     position: {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     cursor: {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'pointer-events': {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     resize: {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'touch-action': {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'word-break': {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'word-spacing': {
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         unit: 'em'
     },
     'user-drag': {
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         declare (value) {
             return {
-                'user-drag': value,
-                '-webkit-user-drag': value
+                '-webkit-user-drag': value,
+                'user-drag': value
             };
         }
     },
     'user-select': {
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         declare (value) {
             return {
-                'user-select': value,
-                '-webkit-user-select': value
+                '-webkit-user-select': value,
+                'user-select': value
             };
         }
     },
     'text-shadow': {
         unit: 'rem',
-        layer: Layer.CoreNative,
-        colored: true
+        layer: Layer.Native
     },
     'text-size': {
-        match: [
-            't(?:ext)?'
+        ambiguousKeys: [
+            'text',
+            't'
+        ],
+        ambiguousValues: [
+            NUMBER_VALUE_REGEX
         ],
-        numeric: true,
         unit: 'rem',
         declare (value) {
             const diff = .875;
@@ -933,14 +972,18 @@ const rules = {
                 'font-size': value,
                 'line-height': `calc(${value} + ${diff}em)`
             };
-        }
+        },
+        layer: Layer.Shorthand
     },
     'text-fill-color': {
-        match: [
-            '(?:text-fill|text|t)'
+        ambiguousKeys: [
+            'text',
+            't'
+        ],
+        ambiguousValues: [
+            COLOR_VALUE_REGEX
         ],
-        layer: Layer.CoreNative,
-        colored: true,
+        layer: Layer.Native,
         variables: [
             'text'
         ],
@@ -951,17 +994,17 @@ const rules = {
         }
     },
     'text-stroke-width': {
-        match: [
-            'text-stroke',
-            [
-                'thin',
-                'medium',
-                'thick'
-            ]
+        ambiguousKeys: [
+            'text-stroke'
+        ],
+        ambiguousValues: [
+            'thin',
+            'medium',
+            'thick',
+            NUMBER_VALUE_REGEX
         ],
-        numeric: true,
         unit: 'rem',
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         declare (value) {
             return {
                 '-webkit-text-stroke-width': value
@@ -969,11 +1012,13 @@ const rules = {
         }
     },
     'text-stroke-color': {
-        match: [
+        ambiguousKeys: [
             'text-stroke'
         ],
-        layer: Layer.CoreNative,
-        colored: true,
+        ambiguousValues: [
+            COLOR_VALUE_REGEX
+        ],
+        layer: Layer.Native,
         variables: [
             'text'
         ],
@@ -985,56 +1030,70 @@ const rules = {
     },
     'text-stroke': {
         unit: 'rem',
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         declare (value) {
             return {
                 '-webkit-text-stroke': value
             };
         }
     },
+    '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'
+            };
+        },
+        layer: Layer.Shorthand
+    },
     'box-shadow': {
-        match: /^s(?:hadow)?:/,
+        key: 'shadow',
+        subkey: 's',
         unit: 'rem',
-        layer: Layer.CoreNative,
-        colored: true
+        layer: Layer.Native
     },
     'table-layout': {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'transform-box': {
-        match: [
+        ambiguousKeys: [
             'transform'
         ],
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'transform-style': {
-        match: [
-            'transform',
-            [
-                'flat',
-                'preserve-3d'
-            ]
+        ambiguousKeys: [
+            'transform'
         ],
-        layer: Layer.CoreNative
+        ambiguousValues: [
+            'flat',
+            'preserve-3d'
+        ],
+        layer: Layer.Native
     },
     'transform-origin': {
-        match: [
-            'transform',
-            [
-                'top',
-                'bottom',
-                'right',
-                'left',
-                'center'
-            ]
-        ],
-        numeric: true,
+        ambiguousKeys: [
+            'transform'
+        ],
+        ambiguousValues: [
+            'top',
+            'bottom',
+            'right',
+            'left',
+            'center',
+            NUMBER_VALUE_REGEX
+        ],
         unit: 'px',
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     transform: {
-        match: /^(?:translate|scale|skew|rotate|perspective|matrix)(?:3d|[XYZ])?\(/,
-        layer: Layer.CoreNative,
+        matcher: /^(?:translate|scale|skew|rotate|perspective|matrix)(?:3d|[XYZ])?\(/,
+        layer: Layer.Native,
         analyze (className) {
             return [
                 className.startsWith('transform') ? className.slice(10) : className
@@ -1045,25 +1104,25 @@ const rules = {
         ]
     },
     'transition-property': {
-        match: /^~property:/,
-        layer: Layer.CoreNative
+        key: '~property',
+        layer: Layer.Native
     },
     'transition-timing-function': {
-        match: /^~easing:/,
-        layer: Layer.CoreNative
+        key: '~easing',
+        layer: Layer.Native
     },
     'transition-duration': {
-        match: /^~duration:/,
-        layer: Layer.CoreNative,
+        key: '~duration',
+        layer: Layer.Native,
         unit: 'ms'
     },
     'transition-delay': {
-        match: /^~delay:/,
-        layer: Layer.CoreNative,
+        key: '~delay',
+        layer: Layer.Native,
         unit: 'ms'
     },
     transition: {
-        match: /^~[^!*>+~:[@_]+\|/,
+        sign: '~',
         analyze (className) {
             if (className.startsWith('~')) {
                 return [
@@ -1071,51 +1130,53 @@ const rules = {
                 ];
             } else {
                 const indexOfColon = className.indexOf(':');
-                this.prefix = className.slice(0, indexOfColon + 1);
+                this.keyToken = className.slice(0, indexOfColon + 1);
                 return [
                     className.slice(indexOfColon + 1)
                 ];
             }
         },
-        layer: Layer.CoreNativeShorthand
+        layer: Layer.NativeShorthand
     },
     'animation-delay': {
-        match: /^@delay:/,
-        layer: Layer.CoreNative,
+        key: '@delay',
+        layer: Layer.Native,
         unit: 'ms'
     },
     'animation-direction': {
-        match: /^@direction:/,
-        layer: Layer.CoreNative
+        key: '@direction',
+        layer: Layer.Native
     },
     'animation-duration': {
-        match: /^@duration:/,
-        layer: Layer.CoreNative,
+        key: '@duration',
+        layer: Layer.Native,
         unit: 'ms'
     },
     'animation-fill-mode': {
-        match: /^@fill:/,
-        layer: Layer.CoreNative
+        key: '@fill',
+        layer: Layer.Native
     },
     'animation-iteration-count': {
-        match: /^@iteration:/,
-        layer: Layer.CoreNative
+        key: '@iteration',
+        layer: Layer.Native
     },
     'animation-name': {
-        match: /^@name:/,
-        layer: Layer.CoreNative
+        key: '@name',
+        layer: Layer.Native,
+        includeAnimations: true
     },
     'animation-play-state': {
-        match: /^@play:/,
-        layer: Layer.CoreNative
+        key: '@play',
+        layer: Layer.Native
     },
     'animation-timing-function': {
-        match: /^@easing:/,
-        layer: Layer.CoreNative
+        key: '@easing',
+        layer: Layer.Native
     },
     animation: {
-        match: /^@[^!*>+~:[@_]+\|/,
-        layer: Layer.CoreNativeShorthand,
+        sign: '@',
+        layer: Layer.NativeShorthand,
+        includeAnimations: true,
         analyze (className) {
             if (className.startsWith('@')) {
                 return [
@@ -1123,7 +1184,7 @@ const rules = {
                 ];
             } else {
                 const indexOfColon = className.indexOf(':');
-                this.prefix = className.slice(0, indexOfColon + 1);
+                this.keyToken = className.slice(0, indexOfColon + 1);
                 return [
                     className.slice(indexOfColon + 1)
                 ];
@@ -1131,54 +1192,73 @@ const rules = {
         }
     },
     'border-collapse': {
-        match: [
-            'b(?:order)?',
-            [
-                'collapse',
-                'separate'
-            ]
+        ambiguousKeys: [
+            'b',
+            'border'
+        ],
+        ambiguousValues: [
+            'collapse',
+            'separate'
         ],
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'border-spacing': {
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native,
+        variables: [
+            'spacing'
+        ]
     },
     // border color
     'border-top-color': {
-        match: [
-            'b(?:t|order-top(?:-color)?)'
+        ambiguousKeys: [
+            'bt',
+            'border-top'
+        ],
+        ambiguousValues: [
+            COLOR_VALUE_REGEX
         ],
-        layer: Layer.CoreNative,
-        colored: true
+        layer: Layer.Native
     },
     'border-bottom-color': {
-        match: [
-            'b(?:b|order-bottom(?:-color)?)'
+        ambiguousKeys: [
+            'bb',
+            'border-bottom'
+        ],
+        ambiguousValues: [
+            COLOR_VALUE_REGEX
         ],
-        layer: Layer.CoreNative,
-        colored: true
+        layer: Layer.Native
     },
     'border-left-color': {
-        match: [
-            'b(?:l|order-left(?:-color)?)'
+        ambiguousKeys: [
+            'bl',
+            'border-left'
         ],
-        layer: Layer.CoreNative,
-        colored: true
+        ambiguousValues: [
+            COLOR_VALUE_REGEX
+        ],
+        layer: Layer.Native
     },
     'border-right-color': {
-        match: [
-            'b(?:r|order-right(?:-color)?)'
+        ambiguousKeys: [
+            'br',
+            'border-right'
+        ],
+        ambiguousValues: [
+            COLOR_VALUE_REGEX
         ],
-        layer: Layer.CoreNative,
-        colored: true
+        layer: Layer.Native
     },
     'border-x-color': {
-        match: [
-            'b(?:x|order-x(?:-color)?)'
+        ambiguousKeys: [
+            'bx',
+            'border-x'
         ],
-        layer: Layer.CoreShorthand,
-        colored: true,
+        ambiguousValues: [
+            COLOR_VALUE_REGEX
+        ],
+        layer: Layer.Shorthand,
         declare (value) {
             return {
                 'border-left-color': value,
@@ -1187,11 +1267,14 @@ const rules = {
         }
     },
     'border-y-color': {
-        match: [
-            'b(?:y|order-y(?:-color)?)'
+        ambiguousKeys: [
+            'by',
+            'border-y'
+        ],
+        ambiguousValues: [
+            COLOR_VALUE_REGEX
         ],
-        layer: Layer.CoreShorthand,
-        colored: true,
+        layer: Layer.Shorthand,
         declare (value) {
             return {
                 'border-top-color': value,
@@ -1200,37 +1283,40 @@ const rules = {
         }
     },
     'border-color': {
-        match: [
-            'b(?:order)?(?:-color)?'
+        ambiguousKeys: [
+            'b',
+            'border'
+        ],
+        ambiguousValues: [
+            COLOR_VALUE_REGEX
         ],
-        layer: Layer.CoreNativeShorthand,
-        colored: true
+        layer: Layer.NativeShorthand
     },
     // border radius
     'border-top-left-radius': {
-        match: /^r(?:tl|lt):/,
+        key: 'rtl',
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'border-top-right-radius': {
-        match: /^r(?:tr|rt):/,
+        key: 'rtr',
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'border-bottom-left-radius': {
-        match: /^r(?:bl|lb):/,
+        key: 'rbl',
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'border-bottom-right-radius': {
-        match: /^r(?:br|rb):/,
+        key: 'rbr',
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'border-top-radius': {
-        match: /^rt:/,
+        key: 'rt',
         unit: 'rem',
-        layer: Layer.CoreShorthand,
+        layer: Layer.Shorthand,
         declare (value) {
             return {
                 'border-top-left-radius': value,
@@ -1239,9 +1325,9 @@ const rules = {
         }
     },
     'border-bottom-radius': {
-        match: /^rb:/,
+        key: 'rb',
         unit: 'rem',
-        layer: Layer.CoreShorthand,
+        layer: Layer.Shorthand,
         declare (value) {
             return {
                 'border-bottom-left-radius': value,
@@ -1250,9 +1336,9 @@ const rules = {
         }
     },
     'border-left-radius': {
-        match: /^rl:/,
+        key: 'rl',
         unit: 'rem',
-        layer: Layer.CoreShorthand,
+        layer: Layer.Shorthand,
         declare (value) {
             return {
                 'border-top-left-radius': value,
@@ -1261,9 +1347,9 @@ const rules = {
         }
     },
     'border-right-radius': {
-        match: /^rr:/,
+        key: 'rr',
         unit: 'rem',
-        layer: Layer.CoreShorthand,
+        layer: Layer.Shorthand,
         declare (value) {
             return {
                 'border-top-right-radius': value,
@@ -1272,45 +1358,50 @@ const rules = {
         }
     },
     'border-radius': {
-        match: /^r:/,
+        key: 'r',
         unit: 'rem',
-        layer: Layer.CoreNativeShorthand
+        layer: Layer.NativeShorthand
     },
     // border style
     'border-top-style': {
-        match: [
-            'b(?:t|order-top(?:-style)?)',
-            BORDER_STYLES
+        ambiguousKeys: [
+            'bt',
+            'border-top'
         ],
-        layer: Layer.CoreNative
+        ambiguousValues: BORDER_STYLE_VALUES,
+        layer: Layer.Native
     },
     'border-bottom-style': {
-        match: [
-            'b(?:b|order-bottom(?:-style)?)',
-            BORDER_STYLES
+        ambiguousKeys: [
+            'bb',
+            'border-bottom'
         ],
-        layer: Layer.CoreNative
+        ambiguousValues: BORDER_STYLE_VALUES,
+        layer: Layer.Native
     },
     'border-left-style': {
-        match: [
-            'b(?:l|order-left(?:-style)?)',
-            BORDER_STYLES
+        ambiguousKeys: [
+            'bl',
+            'border-left'
         ],
-        layer: Layer.CoreNative
+        ambiguousValues: BORDER_STYLE_VALUES,
+        layer: Layer.Native
     },
     'border-right-style': {
-        match: [
-            'b(?:r|order-right(?:-style)?)',
-            BORDER_STYLES
+        ambiguousKeys: [
+            'br',
+            'border-right'
         ],
-        layer: Layer.CoreNative
+        ambiguousValues: BORDER_STYLE_VALUES,
+        layer: Layer.Native
     },
     'border-x-style': {
-        match: [
-            'b(?:x|order-x(?:-style)?)',
-            BORDER_STYLES
+        ambiguousKeys: [
+            'bx',
+            'border-x'
         ],
-        layer: Layer.CoreShorthand,
+        ambiguousValues: BORDER_STYLE_VALUES,
+        layer: Layer.Shorthand,
         declare (value) {
             return {
                 'border-left-style': value,
@@ -1319,11 +1410,12 @@ const rules = {
         }
     },
     'border-y-style': {
-        match: [
-            'b(?:y|order-y(?:-style)?)',
-            BORDER_STYLES
+        ambiguousKeys: [
+            'by',
+            'border-y'
         ],
-        layer: Layer.CoreShorthand,
+        ambiguousValues: BORDER_STYLE_VALUES,
+        layer: Layer.Shorthand,
         declare (value) {
             return {
                 'border-top-style': value,
@@ -1332,52 +1424,68 @@ const rules = {
         }
     },
     'border-style': {
-        match: [
-            'b(?:order)?(?:-style)?',
-            BORDER_STYLES
+        ambiguousKeys: [
+            'b',
+            'border'
         ],
-        layer: Layer.CoreNativeShorthand
+        ambiguousValues: BORDER_STYLE_VALUES,
+        layer: Layer.NativeShorthand
     },
     // border width
     'border-top-width': {
-        match: [
-            'b(?:t|order-top(?:-width)?)'
+        ambiguousKeys: [
+            'bt',
+            'border-top'
+        ],
+        ambiguousValues: [
+            NUMBER_VALUE_REGEX
         ],
-        numeric: true,
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'border-bottom-width': {
-        match: [
-            'b(?:b|order-bottom(?:-width)?)'
+        ambiguousKeys: [
+            'bb',
+            'border-bottom'
+        ],
+        ambiguousValues: [
+            NUMBER_VALUE_REGEX
         ],
-        numeric: true,
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'border-left-width': {
-        match: [
-            'b(?:l|order-left(?:-width)?)'
+        ambiguousKeys: [
+            'bl',
+            'border-left'
+        ],
+        ambiguousValues: [
+            NUMBER_VALUE_REGEX
         ],
-        numeric: true,
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'border-right-width': {
-        match: [
-            'b(?:r|order-right(?:-width)?)'
+        ambiguousKeys: [
+            'br',
+            'border-right'
+        ],
+        ambiguousValues: [
+            NUMBER_VALUE_REGEX
         ],
-        numeric: true,
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'border-x-width': {
-        match: [
-            'b(?:x|order-x(?:-width)?)'
+        ambiguousKeys: [
+            'bx',
+            'border-x'
+        ],
+        ambiguousValues: [
+            NUMBER_VALUE_REGEX
         ],
-        numeric: true,
         unit: 'rem',
-        layer: Layer.CoreShorthand,
+        layer: Layer.Shorthand,
         declare (value) {
             return {
                 'border-left-width': value,
@@ -1386,12 +1494,15 @@ const rules = {
         }
     },
     'border-y-width': {
-        match: [
-            'b(?:y|order-y(?:-width)?)'
+        ambiguousKeys: [
+            'by',
+            'border-y'
+        ],
+        ambiguousValues: [
+            NUMBER_VALUE_REGEX
         ],
-        numeric: true,
         unit: 'rem',
-        layer: Layer.CoreShorthand,
+        layer: Layer.Shorthand,
         declare (value) {
             return {
                 'border-top-width': value,
@@ -1400,95 +1511,97 @@ const rules = {
         }
     },
     'border-width': {
-        match: [
-            'b(?:order)?(?:-width)?'
+        ambiguousKeys: [
+            'b',
+            'border'
+        ],
+        ambiguousValues: [
+            NUMBER_VALUE_REGEX
         ],
-        numeric: true,
         unit: 'rem',
-        layer: Layer.CoreNativeShorthand
+        layer: Layer.NativeShorthand
     },
     // border image
-    'border-image-outset': {
-        unit: 'rem',
-        layer: Layer.CoreNative
-    },
     'border-image-repeat': {
-        match: [
-            'border-image',
-            [
-                'stretch',
-                'repeat',
-                'round',
-                'space'
-            ]
+        ambiguousKeys: [
+            'border-image'
+        ],
+        ambiguousValues: [
+            'stretch',
+            'repeat',
+            'round',
+            'space'
         ],
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'border-image-slice': {
-        layer: Layer.CoreNative
+        ambiguousKeys: [
+            'border-image'
+        ],
+        layer: Layer.Native
     },
     'border-image-source': {
-        match: [
-            'border-image',
-            [
-                'url',
-                'linear-gradient',
-                'radial-gradient',
-                'repeating-linear-gradient',
-                'repeating-radial-gradient',
-                'conic-gradient'
-            ]
-        ],
-        layer: Layer.CoreNative
+        ambiguousKeys: [
+            'border-image'
+        ],
+        ambiguousValues: [
+            IMAGE_VALUE_REGEX
+        ],
+        layer: Layer.Native
     },
     'border-image-width': {
-        match: [
-            'border-image',
-            [
-                'auto'
-            ]
+        ambiguousKeys: [
+            'border-image'
+        ],
+        ambiguousValues: [
+            'auto',
+            NUMBER_VALUE_REGEX
         ],
-        numeric: true,
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native
+    },
+    'border-image-outset': {
+        ambiguousKeys: [
+            'border-image'
+        ],
+        ambiguousValues: [
+            NUMBER_VALUE_REGEX
+        ],
+        unit: 'rem',
+        layer: Layer.Native
     },
     'border-image': {
-        layer: Layer.CoreNativeShorthand
+        layer: Layer.NativeShorthand
     },
     // border
     'border-top': {
-        match: /^bt:/,
-        layer: Layer.CoreNativeShorthand,
+        key: 'bt',
+        layer: Layer.NativeShorthand,
         unit: 'rem',
-        colored: true,
         transformValueComponents: autofillSolidToValueComponent
     },
     'border-bottom': {
-        match: /^bb:/,
-        layer: Layer.CoreNativeShorthand,
+        key: 'bb',
+        layer: Layer.NativeShorthand,
         unit: 'rem',
-        colored: true,
         transformValueComponents: autofillSolidToValueComponent
     },
     'border-left': {
-        match: /^bl:/,
-        layer: Layer.CoreNativeShorthand,
+        key: 'bl',
+        layer: Layer.NativeShorthand,
         unit: 'rem',
-        colored: true,
         transformValueComponents: autofillSolidToValueComponent
     },
     'border-right': {
-        match: /^br:/,
-        layer: Layer.CoreNativeShorthand,
+        key: 'br',
+        layer: Layer.NativeShorthand,
         unit: 'rem',
-        colored: true,
         transformValueComponents: autofillSolidToValueComponent
     },
     'border-x': {
-        match: /^(?:bx|border-x):/,
+        key: 'bx',
         unit: 'rem',
-        colored: true,
-        layer: Layer.CoreShorthand,
+        layer: Layer.Shorthand,
         transformValueComponents: autofillSolidToValueComponent,
         declare (value) {
             return {
@@ -1498,10 +1611,9 @@ const rules = {
         }
     },
     'border-y': {
-        match: /^(?:by|border-y):/,
+        key: 'by',
         unit: 'rem',
-        colored: true,
-        layer: Layer.CoreShorthand,
+        layer: Layer.Shorthand,
         transformValueComponents: autofillSolidToValueComponent,
         declare (value) {
             return {
@@ -1511,41 +1623,38 @@ const rules = {
         }
     },
     border: {
-        match: /^b:/,
+        key: 'b',
         unit: 'rem',
-        colored: true,
-        layer: Layer.CoreNativeShorthand,
+        layer: Layer.NativeShorthand,
         transformValueComponents: autofillSolidToValueComponent
     },
     'background-attachment': {
-        match: [
-            '(?:bg|background)',
-            [
-                'fixed',
-                'local',
-                'scroll'
-            ]
+        ambiguousKeys: [
+            'bg'
+        ],
+        ambiguousValues: [
+            'fixed',
+            'local',
+            'scroll'
         ],
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'background-blend-mode': {
-        layer: Layer.CoreNative
+        key: 'bg-blend',
+        layer: Layer.Native
     },
     'background-color': {
-        match: [
-            '(?:bg|background)'
+        ambiguousKeys: [
+            'bg'
         ],
-        layer: Layer.CoreNative,
-        colored: true
+        ambiguousValues: [
+            COLOR_VALUE_REGEX
+        ],
+        layer: Layer.Native
     },
     'background-clip': {
-        match: [
-            '(?:bg|background)',
-            [
-                'text'
-            ]
-        ],
-        layer: Layer.CoreNative,
+        key: 'bg-clip',
+        layer: Layer.Native,
         declare (value) {
             return {
                 '-webkit-background-clip': value,
@@ -1554,70 +1663,66 @@ const rules = {
         }
     },
     'background-origin': {
-        match: [
-            '(?:bg|background)'
-        ],
-        layer: Layer.CoreNative
+        key: 'bg-origin',
+        layer: Layer.Native
     },
     'background-position': {
-        match: [
-            '(?:bg|background)',
-            [
-                'top',
-                'bottom',
-                'right',
-                'left',
-                'center'
-            ]
-        ],
-        layer: Layer.CoreNative,
+        ambiguousKeys: [
+            'bg'
+        ],
+        ambiguousValues: [
+            'top',
+            'bottom',
+            'right',
+            'left',
+            'center'
+        ],
+        layer: Layer.Native,
         unit: 'px'
     },
     'background-repeat': {
-        match: [
-            '(?:bg|background)',
-            [
-                'space',
-                'round',
-                'repeat',
-                'no-repeat',
-                'repeat-x',
-                'repeat-y'
-            ]
-        ],
-        layer: Layer.CoreNative
+        ambiguousKeys: [
+            'bg'
+        ],
+        ambiguousValues: [
+            'space',
+            'round',
+            'repeat',
+            'no-repeat',
+            'repeat-x',
+            'repeat-y'
+        ],
+        layer: Layer.Native
     },
     'background-size': {
-        match: [
-            '(?:bg|background)',
-            [
-                'auto',
-                'cover',
-                'contain'
-            ]
+        ambiguousKeys: [
+            'bg'
+        ],
+        ambiguousValues: [
+            'auto',
+            'cover',
+            'contain',
+            NUMBER_VALUE_REGEX
         ],
-        numeric: true,
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'background-image': {
-        match: [
-            '(?:bg|background)',
-            [
-                '(?:url|linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradient|conic-gradient)\\(.*\\)'
-            ]
+        ambiguousKeys: [
+            'bg'
+        ],
+        ambiguousValues: [
+            IMAGE_VALUE_REGEX
         ],
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     background: {
-        match: /^bg:/,
-        colored: true,
-        layer: Layer.CoreNativeShorthand
+        key: 'bg',
+        layer: Layer.NativeShorthand
     },
     gradient: {
-        match: /^gradient\(/,
-        layer: Layer.CoreNative,
-        colored: true,
+        matcher: /^gradient\(/,
+        layer: Layer.Shorthand,
         declare (value) {
             return {
                 'background-image': 'linear-' + value
@@ -1625,123 +1730,132 @@ const rules = {
         }
     },
     'mix-blend-mode': {
-        match: /^blend:/,
-        layer: Layer.CoreNative
+        key: 'blend',
+        layer: Layer.Native
     },
     'backdrop-filter': {
-        match: /^bd:/,
-        layer: Layer.CoreNative,
-        colored: true,
+        key: 'bd',
+        layer: Layer.Native,
         declare (value) {
             return {
-                'backdrop-filter': value,
-                '-webkit-backdrop-filter': value
+                '-webkit-backdrop-filter': value,
+                'backdrop-filter': value
             };
         }
     },
     filter: {
-        match: /^(?:blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|opacity|saturate|sepia)\(/,
-        layer: Layer.CoreNative,
-        colored: true
+        matcher: /^(?:blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|opacity|saturate|sepia)\(/,
+        layer: Layer.Native
     },
     fill: {
-        match: /^fill:/,
-        layer: Layer.CoreNative,
-        colored: true
+        layer: Layer.Native
     },
     'stroke-dasharray': {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'stroke-dashoffset': {
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         variables: [
             'spacing'
         ]
     },
     'stroke-width': {
-        match: [
-            'stroke(?:-width)?'
+        ambiguousKeys: [
+            'stroke'
+        ],
+        ambiguousValues: [
+            NUMBER_VALUE_REGEX
         ],
-        numeric: true,
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     stroke: {
-        match: [
-            'stroke'
-        ],
-        layer: Layer.CoreNative,
-        colored: true
+        layer: Layer.Native
     },
     x: {
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         variables: [
             'spacing'
         ]
     },
     y: {
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         variables: [
             'spacing'
         ]
     },
     cx: {
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         variables: [
             'spacing'
         ]
     },
     cy: {
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         variables: [
             'spacing'
         ]
     },
     rx: {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     ry: {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'grid-column-start': {
-        match: /^grid-col(?:umn)?-start:/,
-        layer: Layer.CoreNative
+        key: 'grid-col-start',
+        layer: Layer.Native
     },
     'grid-column-end': {
-        match: /^grid-col(?:umn)?-end:/,
-        layer: Layer.CoreNative
+        key: 'grid-col-end',
+        layer: Layer.Native
     },
-    'grid-column': {
-        match: /^grid-col(?:umn)?(?:-span)?:/,
-        layer: Layer.CoreNativeShorthand,
+    'grid-column-span': {
+        key: 'grid-col-span',
+        layer: Layer.Shorthand,
         transformValue (value) {
-            return this.prefix.slice(-5, -1) === 'span' && value !== 'auto' ? 'span' + ' ' + value + '/' + 'span' + ' ' + value : value;
+            return 'span' + ' ' + value + '/' + 'span' + ' ' + value;
+        },
+        declare (value) {
+            return {
+                'grid-column': value
+            };
         }
     },
+    'grid-column': {
+        key: 'grid-col',
+        layer: Layer.NativeShorthand
+    },
     'grid-columns': {
-        match: /^grid-col(?:umn)?s:/,
+        key: 'grid-cols',
         declare (value) {
             return {
                 display: 'grid',
                 'grid-template-columns': 'repeat' + '(' + value + ',' + 'minmax' + '(' + 0 + ',' + 1 + 'fr' + '))'
             };
         },
-        layer: Layer.Core
+        layer: Layer.Shorthand
     },
     'grid-row-start': {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'grid-row-end': {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
-    'grid-row': {
-        match: /^grid-row-span:/,
-        layer: Layer.CoreNativeShorthand,
+    'grid-row-span': {
+        layer: Layer.Shorthand,
         transformValue (value) {
-            return this.prefix.slice(-5, -1) === 'span' && value !== 'auto' ? 'span' + ' ' + value + '/' + 'span' + ' ' + value : value;
+            return 'span' + ' ' + value + '/' + 'span' + ' ' + value;
+        },
+        declare (value) {
+            return {
+                'grid-row': value
+            };
         }
     },
+    'grid-row': {
+        layer: Layer.NativeShorthand
+    },
     'grid-rows': {
-        match: /^grid-rows:/,
         declare (value) {
             return {
                 display: 'grid',
@@ -1749,187 +1863,188 @@ const rules = {
                 'grid-template-rows': 'repeat' + '(' + value + ',' + 'minmax' + '(' + 0 + ',' + 1 + 'fr' + '))'
             };
         },
-        layer: Layer.Core
+        layer: Layer.Shorthand
     },
     'grid-auto-columns': {
-        match: /^grid-auto-cols:/,
-        layer: Layer.CoreNative
+        key: 'grid-auto-cols',
+        layer: Layer.Native
     },
     'grid-auto-flow': {
-        match: /^grid-flow:/,
-        layer: Layer.CoreNative
+        key: 'grid-flow',
+        layer: Layer.Native
     },
     'grid-auto-rows': {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'grid-template-areas': {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'grid-template-columns': {
-        match: /^grid-template-cols:/,
-        layer: Layer.CoreNative,
+        key: 'grid-template-cols',
+        layer: Layer.Native,
         unit: 'rem'
     },
     'grid-template-rows': {
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         unit: 'rem'
     },
     'grid-template': {
-        layer: Layer.CoreNativeShorthand
+        layer: Layer.NativeShorthand
     },
     'grid-area': {
-        layer: Layer.CoreNativeShorthand
+        layer: Layer.NativeShorthand
     },
     grid: {
-        layer: Layer.CoreNativeShorthand
+        layer: Layer.NativeShorthand
     },
     'column-gap': {
-        match: /^gap-x:/,
+        key: 'gap-x',
         unit: 'rem',
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         variables: [
             'spacing'
         ]
     },
     'row-gap': {
-        match: /^gap-y:/,
+        key: 'gap-y',
         unit: 'rem',
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         variables: [
             'spacing'
         ]
     },
     gap: {
         unit: 'rem',
-        layer: Layer.CoreNativeShorthand,
+        layer: Layer.NativeShorthand,
         variables: [
             'spacing'
         ]
     },
     order: {
-        match: /^o:/,
-        layer: Layer.CoreNative
+        key: 'o',
+        layer: Layer.Native
     },
     'break-inside': {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'break-before': {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'break-after': {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'aspect-ratio': {
-        match: /^aspect:/,
-        layer: Layer.CoreNative
+        key: 'aspect',
+        layer: Layer.Native
     },
     'column-span': {
-        match: /^col-span:/,
-        layer: Layer.CoreNative
+        key: 'col-span',
+        layer: Layer.Native
     },
     'align-content': {
-        match: /^ac:/,
-        layer: Layer.CoreNative
+        subkey: 'ac',
+        layer: Layer.Native
     },
     'align-items': {
-        match: /^ai:/,
-        layer: Layer.CoreNative
+        subkey: 'ai',
+        layer: Layer.Native
     },
     'align-self': {
-        match: /^as:/,
-        layer: Layer.CoreNative
+        subkey: 'as',
+        layer: Layer.Native
     },
     'justify-content': {
-        match: /^jc:/,
-        layer: Layer.CoreNative
+        subkey: 'jc',
+        layer: Layer.Native
     },
     'justify-items': {
-        match: /^ji:/,
-        layer: Layer.CoreNative
+        subkey: 'ji',
+        layer: Layer.Native
     },
     'justify-self': {
-        match: /^js:/,
-        layer: Layer.CoreNative
+        subkey: 'js',
+        layer: Layer.Native
     },
     'place-content': {
-        layer: Layer.CoreNativeShorthand
+        layer: Layer.NativeShorthand
     },
     'place-items': {
-        layer: Layer.CoreNativeShorthand
+        layer: Layer.NativeShorthand
     },
     'place-self': {
-        layer: Layer.CoreNativeShorthand
+        layer: Layer.NativeShorthand
     },
     'list-style-position': {
-        match: [
-            'list-style',
-            [
-                'inside',
-                'outside'
-            ]
+        ambiguousKeys: [
+            'list-style'
+        ],
+        ambiguousValues: [
+            'inside',
+            'outside'
         ],
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'list-style-type': {
-        match: [
-            'list-style',
-            [
-                'disc',
-                'decimal'
-            ]
+        ambiguousKeys: [
+            'list-style'
         ],
-        layer: Layer.CoreNative
+        ambiguousValues: [
+            'disc',
+            'decimal'
+        ],
+        layer: Layer.Native
     },
     'list-style-image': {
-        match: [
-            'list-style',
-            [
-                '(?:url|linear-gradient|radial-gradient|repeating-linear-gradient|repeating-radial-gradient|conic-gradient)\\(.*\\)'
-            ]
+        ambiguousKeys: [
+            'list-style'
+        ],
+        ambiguousValues: [
+            IMAGE_VALUE_REGEX
         ],
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'list-style': {
-        layer: Layer.CoreNativeShorthand
+        layer: Layer.NativeShorthand
     },
     'outline-color': {
-        match: [
+        ambiguousKeys: [
             'outline'
         ],
-        layer: Layer.CoreNative,
-        colored: true
+        ambiguousValues: [
+            COLOR_VALUE_REGEX
+        ],
+        layer: Layer.Native
     },
     'outline-offset': {
         unit: 'rem',
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         variables: [
             'spacing'
         ]
     },
     'outline-style': {
-        match: [
-            'outline',
-            BORDER_STYLES
+        ambiguousKeys: [
+            'outline'
         ],
-        layer: Layer.CoreNative
+        ambiguousValues: BORDER_STYLE_VALUES,
+        layer: Layer.Native
     },
     'outline-width': {
-        match: [
-            'outline',
-            [
-                'medium',
-                'thick',
-                'thin'
-            ]
+        ambiguousKeys: [
+            'outline'
+        ],
+        ambiguousValues: [
+            'medium',
+            'thick',
+            'thin',
+            NUMBER_VALUE_REGEX
         ],
-        numeric: true,
         unit: 'rem',
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     outline: {
         unit: 'rem',
-        layer: Layer.CoreNativeShorthand,
-        colored: true,
+        layer: Layer.NativeShorthand,
         variables: [
             'outline-width',
             'outline-style',
@@ -1939,61 +2054,59 @@ const rules = {
         transformValueComponents: autofillSolidToValueComponent
     },
     'accent-color': {
-        match: /^accent:/,
-        layer: Layer.CoreNative,
-        colored: true
+        key: 'accent',
+        layer: Layer.Native
     },
     appearance: {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'caret-color': {
-        match: /^caret:/,
-        layer: Layer.CoreNative,
-        colored: true,
+        key: 'caret',
+        layer: Layer.Native,
         variables: [
             'text'
         ]
     },
     'scroll-behavior': {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     // scroll margin
     'scroll-margin-left': {
-        match: /^scroll-ml:/,
-        layer: Layer.CoreNative,
+        key: 'scroll-ml',
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     'scroll-margin-right': {
-        match: /^scroll-mr:/,
-        layer: Layer.CoreNative,
+        key: 'scroll-mr',
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     'scroll-margin-top': {
-        match: /^scroll-mt:/,
-        layer: Layer.CoreNative,
+        key: 'scroll-mt',
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     'scroll-margin-bottom': {
-        match: /^scroll-mb:/,
-        layer: Layer.CoreNative,
+        key: 'scroll-mb',
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     'scroll-margin-x': {
-        match: /^(?:scroll-margin-x|scroll-mx):/,
+        key: 'scroll-mx',
         unit: 'rem',
-        layer: Layer.CoreShorthand,
+        layer: Layer.Shorthand,
         declare (value) {
             return {
                 'scroll-margin-left': value,
@@ -2005,9 +2118,9 @@ const rules = {
         ]
     },
     'scroll-margin-y': {
-        match: /^(?:scroll-margin-y|scroll-my):/,
+        key: 'scroll-my',
         unit: 'rem',
-        layer: Layer.CoreShorthand,
+        layer: Layer.Shorthand,
         declare (value) {
             return {
                 'scroll-margin-top': value,
@@ -2019,50 +2132,50 @@ const rules = {
         ]
     },
     'scroll-margin': {
-        match: /^scroll-m:/,
+        key: 'scroll-m',
         unit: 'rem',
-        layer: Layer.CoreNativeShorthand,
+        layer: Layer.NativeShorthand,
         variables: [
             'spacing'
         ]
     },
     // scroll padding
     'scroll-padding-left': {
-        match: /^scroll-pl:/,
-        layer: Layer.CoreNative,
+        key: 'scroll-pl',
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     'scroll-padding-right': {
-        match: /^scroll-pr:/,
-        layer: Layer.CoreNative,
+        key: 'scroll-pr',
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     'scroll-padding-top': {
-        match: /^scroll-pt:/,
-        layer: Layer.CoreNative,
+        key: 'scroll-pt',
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     'scroll-padding-bottom': {
-        match: /^scroll-pb:/,
-        layer: Layer.CoreNative,
+        key: 'scroll-pb',
+        layer: Layer.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     'scroll-padding-x': {
-        match: /^(?:scroll-padding-x|scroll-px):/,
+        key: 'scroll-px',
         unit: 'rem',
-        layer: Layer.CoreShorthand,
+        layer: Layer.Shorthand,
         declare (value) {
             return {
                 'scroll-padding-left': value,
@@ -2074,9 +2187,9 @@ const rules = {
         ]
     },
     'scroll-padding-y': {
-        match: /^(?:scroll-padding-y|scroll-py):/,
+        key: 'scroll-py',
         unit: 'rem',
-        layer: Layer.CoreShorthand,
+        layer: Layer.Shorthand,
         declare (value) {
             return {
                 'scroll-padding-top': value,
@@ -2088,97 +2201,98 @@ const rules = {
         ]
     },
     'scroll-padding': {
-        match: /^scroll-p:/,
+        key: 'scroll-p',
         unit: 'rem',
-        layer: Layer.CoreNativeShorthand,
+        layer: Layer.NativeShorthand,
         variables: [
             'spacing'
         ]
     },
     // scroll snap
     'scroll-snap-align': {
-        match: [
-            'scroll-snap',
-            [
-                'start',
-                'end',
-                'center'
-            ]
+        ambiguousKeys: [
+            'scroll-snap'
+        ],
+        ambiguousValues: [
+            'start',
+            'end',
+            'center'
         ],
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'scroll-snap-stop': {
-        match: [
-            'scroll-snap',
-            [
-                'normal',
-                'always'
-            ]
+        ambiguousKeys: [
+            'scroll-snap'
         ],
-        layer: Layer.CoreNative
+        ambiguousValues: [
+            'normal',
+            'always'
+        ],
+        layer: Layer.Native
     },
     'scroll-snap-type': {
-        match: [
-            'scroll-snap',
-            [
-                'x',
-                'y',
-                'block',
-                'inline',
-                'both'
-            ]
-        ],
-        layer: Layer.CoreNative
+        ambiguousKeys: [
+            'scroll-snap'
+        ],
+        ambiguousValues: [
+            'x',
+            'y',
+            'block',
+            'inline',
+            'both'
+        ],
+        layer: Layer.Native
     },
     'will-change': {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'writing-mode': {
-        match: /^writing:/,
-        layer: Layer.CoreNative
+        key: 'writing',
+        layer: Layer.Native
     },
     direction: {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'shape-outside': {
-        match: [
-            'shape',
-            [
-                '(?:inset|circle|ellipse|polygon|url|linear-gradient)\\(.*\\)'
-            ]
+        ambiguousKeys: [
+            'shape'
         ],
-        layer: Layer.CoreNative
+        ambiguousValues: [
+            /(?:inset|circle|ellipse|polygon|url|linear-gradient)\(.*\)/
+        ],
+        layer: Layer.Native
     },
     'shape-margin': {
-        match: [
+        ambiguousKeys: [
             'shape'
         ],
-        numeric: true,
+        ambiguousValues: [
+            NUMBER_VALUE_REGEX
+        ],
         unit: 'rem',
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         variables: [
             'spacing'
         ]
     },
     'shape-image-threshold': {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'clip-path': {
-        match: /^clip:/,
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     quotes: {
-        layer: Layer.CoreNative
+        layer: Layer.Native
     },
     'mask-image': {
-        layer: Layer.CoreNative,
+        layer: Layer.Native,
         declare (value) {
             return {
-                'mask-image': value,
-                '-webkit-mask-image': value
+                '-webkit-mask-image': value,
+                'mask-image': value
             };
         }
     }
 };
 
-export { BORDER_STYLES, autofillSolidToValueComponent, rules as default };
+export { autofillSolidToValueComponent, rules as default };