@master/css 2.0.0-rc.47 → 2.0.0-rc.49

package/dist/config/{syntaxes.mjs → rules.mjs}

@@ -1,12 +1,12 @@
 import cssEscape from '../shared/utils/css-escape.mjs';
-import Layer from '../layer.mjs';
+import SyntaxRuleType from '../syntax-rule-type.mjs';
 import { VALUE_DELIMITERS, NUMBER_VALUE_REGEX, COLOR_VALUE_REGEX, BORDER_STYLE_VALUES, IMAGE_VALUE_REGEX } from '../common.mjs';
 import autofillSolidStyle from '../utils/autofill-solid-style.mjs';
 
-const syntaxes = {
+const rules = {
     group: {
         matcher: /^(?:.+?[*_>~+])?\{.+?\}/,
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         analyze (className) {
             let i = 0;
             for(; i < className.length; i++){
@@ -30,12 +30,12 @@ const syntaxes = {
             };
             const handleRule = (rule)=>{
                 const addProps = (cssText)=>{
-                    const cssProperties = cssText.slice(cssEscape(rule.className).length).match(/\{(.*)\}/)?.[1].split(';');
+                    const cssProperties = cssText.slice(cssEscape(rule.name).length).match(/\{(.*)\}/)?.[1].split(';');
                     if (cssProperties) for (const eachCssProperty of cssProperties){
                         addProp(eachCssProperty);
                     }
                 };
-                for (const eachNative of rule.natives){
+                for (const eachNative of rule.nodes){
                     addProps(eachNative.text);
                 }
                 // animation
@@ -105,9 +105,9 @@ const syntaxes = {
             })('');
             addName();
             for (const eachName of names){
-                const syntaxes = this.css.generate(eachName);
-                if (syntaxes.length) {
-                    for (const eachRule of syntaxes){
+                const rules = this.css.generate(eachName, this.mode);
+                if (rules.length) {
+                    for (const eachRule of rules){
                         handleRule(eachRule);
                     }
                 } else {
@@ -119,7 +119,7 @@ const syntaxes = {
     },
     variable: {
         matcher: /^\$[\w-]+:/,
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         declare (value) {
             return {
                 ['--' + this.keyToken.slice(1, -1)]: value
@@ -135,7 +135,7 @@ const syntaxes = {
             NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'font-weight': {
         ambiguousKeys: [
@@ -145,14 +145,14 @@ const syntaxes = {
         ambiguousValues: [
             'bolder'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'font-family': {
         ambiguousKeys: [
             'font',
             'f'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'font-smoothing': {
         ambiguousKeys: [
@@ -163,7 +163,7 @@ const syntaxes = {
             'antialiased',
             'subpixel-antialiased'
         ],
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         declare (value) {
             switch(value){
                 case 'subpixel-antialiased':
@@ -189,7 +189,7 @@ const syntaxes = {
             'italic',
             'oblique'
         ],
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'deg'
     },
     'font-variant-numeric': {
@@ -207,18 +207,18 @@ const syntaxes = {
             'diagonal-fractions',
             'stacked-fractions'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'font-variant': {
         ambiguousKeys: [
             'font',
             'f'
         ],
-        layer: Layer.NativeShorthand
+        type: SyntaxRuleType.NativeShorthand
     },
     font: {
         subkey: 'f',
-        layer: Layer.NativeShorthand,
+        type: SyntaxRuleType.NativeShorthand,
         variables: [
             'font-family',
             'font-variant',
@@ -230,11 +230,11 @@ const syntaxes = {
     },
     'font-feature-settings': {
         key: 'font-feature',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     color: {
         key: 'fg',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         variables: [
             'text'
         ]
@@ -242,7 +242,7 @@ const syntaxes = {
     // margin
     'margin-left': {
         key: 'ml',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -250,7 +250,7 @@ const syntaxes = {
     },
     'margin-right': {
         key: 'mr',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -258,7 +258,7 @@ const syntaxes = {
     },
     'margin-top': {
         key: 'mt',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -266,7 +266,7 @@ const syntaxes = {
     },
     'margin-bottom': {
         key: 'mb',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -276,7 +276,7 @@ const syntaxes = {
         key: 'mx',
         subkey: 'margin-x',
         unit: 'rem',
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'margin-left': value,
@@ -290,7 +290,7 @@ const syntaxes = {
     'margin-y': {
         key: 'my',
         unit: 'rem',
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'margin-top': value,
@@ -304,7 +304,7 @@ const syntaxes = {
     margin: {
         key: 'm',
         unit: 'rem',
-        layer: Layer.NativeShorthand,
+        type: SyntaxRuleType.NativeShorthand,
         variables: [
             'spacing'
         ]
@@ -312,7 +312,7 @@ const syntaxes = {
     // margin inline
     'margin-inline-start': {
         key: 'mis',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -320,7 +320,7 @@ const syntaxes = {
     },
     'margin-inline-end': {
         key: 'mie',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -329,7 +329,7 @@ const syntaxes = {
     'margin-inline': {
         key: 'mi',
         unit: 'rem',
-        layer: Layer.NativeShorthand,
+        type: SyntaxRuleType.NativeShorthand,
         variables: [
             'spacing'
         ]
@@ -337,7 +337,7 @@ const syntaxes = {
     // padding
     'padding-left': {
         key: 'pl',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -345,7 +345,7 @@ const syntaxes = {
     },
     'padding-right': {
         key: 'pr',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -353,7 +353,7 @@ const syntaxes = {
     },
     'padding-top': {
         key: 'pt',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -361,7 +361,7 @@ const syntaxes = {
     },
     'padding-bottom': {
         key: 'pb',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -370,7 +370,7 @@ const syntaxes = {
     'padding-x': {
         key: 'px',
         unit: 'rem',
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'padding-left': value,
@@ -384,7 +384,7 @@ const syntaxes = {
     'padding-y': {
         key: 'py',
         unit: 'rem',
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'padding-top': value,
@@ -398,7 +398,7 @@ const syntaxes = {
     padding: {
         key: 'p',
         unit: 'rem',
-        layer: Layer.NativeShorthand,
+        type: SyntaxRuleType.NativeShorthand,
         variables: [
             'spacing'
         ]
@@ -406,7 +406,7 @@ const syntaxes = {
     // padding inline
     'padding-inline-start': {
         key: 'pis',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -414,7 +414,7 @@ const syntaxes = {
     },
     'padding-inline-end': {
         key: 'pie',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -423,7 +423,7 @@ const syntaxes = {
     'padding-inline': {
         key: 'pi',
         unit: 'rem',
-        layer: Layer.NativeShorthand,
+        type: SyntaxRuleType.NativeShorthand,
         variables: [
             'spacing'
         ]
@@ -434,7 +434,7 @@ const syntaxes = {
             'flex'
         ],
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'flex-wrap': {
         ambiguousKeys: [
@@ -445,19 +445,19 @@ const syntaxes = {
             'nowrap',
             'wrap-reverse'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'flex-grow': {
         ambiguousKeys: [
             'flex'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'flex-shrink': {
         ambiguousKeys: [
             'flex'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'flex-direction': {
         ambiguousKeys: [
@@ -469,37 +469,37 @@ const syntaxes = {
             'column',
             'column-reverse'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     flex: {
-        layer: Layer.NativeShorthand
+        type: SyntaxRuleType.NativeShorthand
     },
     display: {
         key: 'd',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     width: {
         key: 'w',
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     height: {
         key: 'h',
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'min-width': {
         key: 'min-w',
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'min-height': {
         key: 'min-h',
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     size: {
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         unit: 'rem',
         declare (_value, valueComponents) {
             const length = valueComponents.length;
@@ -511,7 +511,7 @@ const syntaxes = {
     },
     'min-size': {
         key: 'min',
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         unit: 'rem',
         declare (_value, valueComponents) {
             const length = valueComponents.length;
@@ -523,7 +523,7 @@ const syntaxes = {
     },
     'max-size': {
         key: 'max',
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         unit: 'rem',
         declare (_value, valueComponents) {
             const length = valueComponents.length;
@@ -537,11 +537,11 @@ const syntaxes = {
         ambiguousKeys: [
             'box'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'box-decoration-break': {
         key: 'box-decoration',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         declare (value) {
             return {
                 '-webkit-box-decoration-break': value,
@@ -550,27 +550,27 @@ const syntaxes = {
         }
     },
     contain: {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     content: {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'counter-increment': {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'counter-reset': {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'letter-spacing': {
         key: 'tracking',
         subkey: 'ls',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'em'
     },
     'line-height': {
         key: 'leading',
         subkey: 'line-h',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'object-fit': {
         ambiguousKeys: [
@@ -583,7 +583,7 @@ const syntaxes = {
             'fill',
             'scale-down'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'object-position': {
         ambiguousKeys: [
@@ -597,7 +597,7 @@ const syntaxes = {
             'left',
             'center'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'text-align': {
         ambiguousKeys: [
@@ -612,7 +612,7 @@ const syntaxes = {
             'start',
             'end'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'text-decoration-color': {
         ambiguousKeys: [
@@ -621,7 +621,7 @@ const syntaxes = {
         ambiguousValues: [
             COLOR_VALUE_REGEX
         ],
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         variables: [
             'text'
         ]
@@ -637,7 +637,7 @@ const syntaxes = {
             'dashed',
             'wavy'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'text-decoration-thickness': {
         ambiguousKeys: [
@@ -647,7 +647,7 @@ const syntaxes = {
             'from-font',
             NUMBER_VALUE_REGEX
         ],
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'em'
     },
     'text-decoration-line': {
@@ -659,7 +659,7 @@ const syntaxes = {
             'overline',
             'line-through'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'text-decoration': {
         ambiguousKeys: [
@@ -672,7 +672,7 @@ const syntaxes = {
             'line-through'
         ],
         unit: 'rem',
-        layer: Layer.NativeShorthand,
+        type: SyntaxRuleType.NativeShorthand,
         variables: [
             'text'
         ],
@@ -688,7 +688,7 @@ const syntaxes = {
             'text-underline'
         ],
         unit: 'rem',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         variables: [
             'spacing'
         ]
@@ -703,7 +703,7 @@ const syntaxes = {
             'left',
             'right'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'text-overflow': {
         ambiguousKeys: [
@@ -714,7 +714,7 @@ const syntaxes = {
             'ellipsis',
             'clip'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'text-orientation': {
         ambiguousKeys: [
@@ -728,7 +728,7 @@ const syntaxes = {
             'sideways',
             'use-glyph-orientation'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'text-transform': {
         ambiguousKeys: [
@@ -740,7 +740,7 @@ const syntaxes = {
             'lowercase',
             'capitalize'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'text-rendering': {
         ambiguousKeys: [
@@ -752,7 +752,7 @@ const syntaxes = {
             'optimizeLegibility',
             'geometricPrecision'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'text-wrap': {
         ambiguousKeys: [
@@ -765,47 +765,47 @@ const syntaxes = {
             'balance',
             'pretty'
         ],
-        layer: Layer.NativeShorthand
+        type: SyntaxRuleType.NativeShorthand
     },
     'text-indent': {
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'vertical-align': {
         key: 'v',
         subkey: 'vertical',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     columns: {
         key: 'cols',
-        layer: Layer.NativeShorthand
+        type: SyntaxRuleType.NativeShorthand
     },
     'white-space': {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     top: {
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     bottom: {
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     left: {
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
         ]
     },
     right: {
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -813,7 +813,7 @@ const syntaxes = {
     },
     inset: {
         unit: 'rem',
-        layer: Layer.NativeShorthand,
+        type: SyntaxRuleType.NativeShorthand,
         variables: [
             'spacing'
         ]
@@ -821,30 +821,30 @@ const syntaxes = {
     'max-height': {
         key: 'max-h',
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'max-width': {
         key: 'max-w',
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     opacity: {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     visibility: {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     clear: {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     float: {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     isolation: {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'overflow-x': {
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         declare (value) {
             return value === 'overlay' ? {
                 'overflow-x': [
@@ -857,7 +857,7 @@ const syntaxes = {
         }
     },
     'overflow-y': {
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         declare (value) {
             return value === 'overlay' ? {
                 'overflow-y': [
@@ -870,7 +870,7 @@ const syntaxes = {
         }
     },
     overflow: {
-        layer: Layer.NativeShorthand,
+        type: SyntaxRuleType.NativeShorthand,
         declare (value) {
             return value === 'overlay' ? {
                 overflow: [
@@ -883,42 +883,42 @@ const syntaxes = {
         }
     },
     'overscroll-behavior-x': {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'overscroll-behavior-y': {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'overscroll-behavior': {
-        layer: Layer.NativeShorthand
+        type: SyntaxRuleType.NativeShorthand
     },
     'z-index': {
         key: 'z',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     position: {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     cursor: {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'pointer-events': {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     resize: {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'touch-action': {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'word-break': {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'word-spacing': {
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'em'
     },
     'user-drag': {
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         declare (value) {
             return {
                 '-webkit-user-drag': value,
@@ -927,7 +927,7 @@ const syntaxes = {
         }
     },
     'user-select': {
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         declare (value) {
             return {
                 '-webkit-user-select': value,
@@ -937,7 +937,7 @@ const syntaxes = {
     },
     'text-shadow': {
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'text-size': {
         ambiguousKeys: [
@@ -955,7 +955,7 @@ const syntaxes = {
                 'line-height': `calc(${value} + ${diff}em)`
             };
         },
-        layer: Layer.Shorthand
+        type: SyntaxRuleType.Shorthand
     },
     'text-fill-color': {
         ambiguousKeys: [
@@ -965,7 +965,7 @@ const syntaxes = {
         ambiguousValues: [
             COLOR_VALUE_REGEX
         ],
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         variables: [
             'text'
         ],
@@ -986,7 +986,7 @@ const syntaxes = {
             NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         declare (value) {
             return {
                 '-webkit-text-stroke-width': value
@@ -1000,7 +1000,7 @@ const syntaxes = {
         ambiguousValues: [
             COLOR_VALUE_REGEX
         ],
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         declare (value) {
             return {
                 '-webkit-text-stroke-color': value
@@ -1009,7 +1009,7 @@ const syntaxes = {
     },
     'text-stroke': {
         unit: 'rem',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         declare (value) {
             return {
                 '-webkit-text-stroke': value
@@ -1028,22 +1028,22 @@ const syntaxes = {
                 'text-overflow': 'ellipsis'
             };
         },
-        layer: Layer.Shorthand
+        type: SyntaxRuleType.Shorthand
     },
     'box-shadow': {
         key: 'shadow',
         subkey: 's',
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'table-layout': {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'transform-box': {
         ambiguousKeys: [
             'transform'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'transform-style': {
         ambiguousKeys: [
@@ -1053,7 +1053,7 @@ const syntaxes = {
             'flat',
             'preserve-3d'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'transform-origin': {
         ambiguousKeys: [
@@ -1068,11 +1068,11 @@ const syntaxes = {
             NUMBER_VALUE_REGEX
         ],
         unit: 'px',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     transform: {
         matcher: /^(?:translate|scale|skew|rotate|perspective|matrix)(?:3d|[XYZ])?\(/,
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         analyze (className) {
             return [
                 className.startsWith('transform') ? className.slice(10) : className
@@ -1085,20 +1085,20 @@ const syntaxes = {
     },
     'transition-property': {
         key: '~property',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'transition-timing-function': {
         key: '~easing',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'transition-duration': {
         key: '~duration',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'ms'
     },
     'transition-delay': {
         key: '~delay',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'ms'
     },
     transition: {
@@ -1116,46 +1116,46 @@ const syntaxes = {
                 ];
             }
         },
-        layer: Layer.NativeShorthand
+        type: SyntaxRuleType.NativeShorthand
     },
     'animation-delay': {
         key: '@delay',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'ms'
     },
     'animation-direction': {
         key: '@direction',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'animation-duration': {
         key: '@duration',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'ms'
     },
     'animation-fill-mode': {
         key: '@fill',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'animation-iteration-count': {
         key: '@iteration',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'animation-name': {
         key: '@name',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         includeAnimations: true
     },
     'animation-play-state': {
         key: '@play',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'animation-timing-function': {
         key: '@easing',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     animation: {
         sign: '@',
-        layer: Layer.NativeShorthand,
+        type: SyntaxRuleType.NativeShorthand,
         includeAnimations: true,
         analyze (className) {
             if (className.startsWith('@')) {
@@ -1180,11 +1180,11 @@ const syntaxes = {
             'collapse',
             'separate'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'border-spacing': {
         unit: 'rem',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         variables: [
             'spacing'
         ]
@@ -1198,7 +1198,7 @@ const syntaxes = {
         ambiguousValues: [
             COLOR_VALUE_REGEX
         ],
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         variables: [
             'frame'
         ]
@@ -1211,7 +1211,7 @@ const syntaxes = {
         ambiguousValues: [
             COLOR_VALUE_REGEX
         ],
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         variables: [
             'frame'
         ]
@@ -1224,7 +1224,7 @@ const syntaxes = {
         ambiguousValues: [
             COLOR_VALUE_REGEX
         ],
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         variables: [
             'frame'
         ]
@@ -1237,7 +1237,7 @@ const syntaxes = {
         ambiguousValues: [
             COLOR_VALUE_REGEX
         ],
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         variables: [
             'frame'
         ]
@@ -1250,7 +1250,7 @@ const syntaxes = {
         ambiguousValues: [
             COLOR_VALUE_REGEX
         ],
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         variables: [
             'frame'
         ],
@@ -1269,7 +1269,7 @@ const syntaxes = {
         ambiguousValues: [
             COLOR_VALUE_REGEX
         ],
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         variables: [
             'frame'
         ],
@@ -1288,7 +1288,7 @@ const syntaxes = {
         ambiguousValues: [
             COLOR_VALUE_REGEX
         ],
-        layer: Layer.NativeShorthand,
+        type: SyntaxRuleType.NativeShorthand,
         variables: [
             'frame'
         ]
@@ -1297,27 +1297,27 @@ const syntaxes = {
     'border-top-left-radius': {
         key: 'rtl',
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'border-top-right-radius': {
         key: 'rtr',
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'border-bottom-left-radius': {
         key: 'rbl',
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'border-bottom-right-radius': {
         key: 'rbr',
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'border-top-radius': {
         key: 'rt',
         unit: 'rem',
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'border-top-left-radius': value,
@@ -1328,7 +1328,7 @@ const syntaxes = {
     'border-bottom-radius': {
         key: 'rb',
         unit: 'rem',
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'border-bottom-left-radius': value,
@@ -1339,7 +1339,7 @@ const syntaxes = {
     'border-left-radius': {
         key: 'rl',
         unit: 'rem',
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'border-top-left-radius': value,
@@ -1350,7 +1350,7 @@ const syntaxes = {
     'border-right-radius': {
         key: 'rr',
         unit: 'rem',
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'border-top-right-radius': value,
@@ -1361,7 +1361,7 @@ const syntaxes = {
     'border-radius': {
         key: 'r',
         unit: 'rem',
-        layer: Layer.NativeShorthand
+        type: SyntaxRuleType.NativeShorthand
     },
     // border style
     'border-top-style': {
@@ -1370,7 +1370,7 @@ const syntaxes = {
             'border-top'
         ],
         ambiguousValues: BORDER_STYLE_VALUES,
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'border-bottom-style': {
         ambiguousKeys: [
@@ -1378,7 +1378,7 @@ const syntaxes = {
             'border-bottom'
         ],
         ambiguousValues: BORDER_STYLE_VALUES,
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'border-left-style': {
         ambiguousKeys: [
@@ -1386,7 +1386,7 @@ const syntaxes = {
             'border-left'
         ],
         ambiguousValues: BORDER_STYLE_VALUES,
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'border-right-style': {
         ambiguousKeys: [
@@ -1394,7 +1394,7 @@ const syntaxes = {
             'border-right'
         ],
         ambiguousValues: BORDER_STYLE_VALUES,
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'border-x-style': {
         ambiguousKeys: [
@@ -1402,7 +1402,7 @@ const syntaxes = {
             'border-x'
         ],
         ambiguousValues: BORDER_STYLE_VALUES,
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'border-left-style': value,
@@ -1416,7 +1416,7 @@ const syntaxes = {
             'border-y'
         ],
         ambiguousValues: BORDER_STYLE_VALUES,
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'border-top-style': value,
@@ -1430,7 +1430,7 @@ const syntaxes = {
             'border'
         ],
         ambiguousValues: BORDER_STYLE_VALUES,
-        layer: Layer.NativeShorthand
+        type: SyntaxRuleType.NativeShorthand
     },
     // border width
     'border-top-width': {
@@ -1442,7 +1442,7 @@ const syntaxes = {
             NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'border-bottom-width': {
         ambiguousKeys: [
@@ -1453,7 +1453,7 @@ const syntaxes = {
             NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'border-left-width': {
         ambiguousKeys: [
@@ -1464,7 +1464,7 @@ const syntaxes = {
             NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'border-right-width': {
         ambiguousKeys: [
@@ -1475,7 +1475,7 @@ const syntaxes = {
             NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'border-x-width': {
         ambiguousKeys: [
@@ -1486,7 +1486,7 @@ const syntaxes = {
             NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'border-left-width': value,
@@ -1503,7 +1503,7 @@ const syntaxes = {
             NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'border-top-width': value,
@@ -1520,7 +1520,7 @@ const syntaxes = {
             NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: Layer.NativeShorthand
+        type: SyntaxRuleType.NativeShorthand
     },
     // border image
     'border-image-repeat': {
@@ -1533,13 +1533,13 @@ const syntaxes = {
             'round',
             'space'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'border-image-slice': {
         ambiguousKeys: [
             'border-image'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'border-image-source': {
         ambiguousKeys: [
@@ -1548,7 +1548,7 @@ const syntaxes = {
         ambiguousValues: [
             IMAGE_VALUE_REGEX
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'border-image-width': {
         ambiguousKeys: [
@@ -1559,7 +1559,7 @@ const syntaxes = {
             NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'border-image-outset': {
         ambiguousKeys: [
@@ -1569,15 +1569,15 @@ const syntaxes = {
             NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'border-image': {
-        layer: Layer.NativeShorthand
+        type: SyntaxRuleType.NativeShorthand
     },
     // border
     'border-top': {
         key: 'bt',
-        layer: Layer.NativeShorthand,
+        type: SyntaxRuleType.NativeShorthand,
         unit: 'rem',
         transformValueComponents: autofillSolidStyle,
         variables: [
@@ -1586,7 +1586,7 @@ const syntaxes = {
     },
     'border-bottom': {
         key: 'bb',
-        layer: Layer.NativeShorthand,
+        type: SyntaxRuleType.NativeShorthand,
         unit: 'rem',
         transformValueComponents: autofillSolidStyle,
         variables: [
@@ -1595,7 +1595,7 @@ const syntaxes = {
     },
     'border-left': {
         key: 'bl',
-        layer: Layer.NativeShorthand,
+        type: SyntaxRuleType.NativeShorthand,
         unit: 'rem',
         transformValueComponents: autofillSolidStyle,
         variables: [
@@ -1604,7 +1604,7 @@ const syntaxes = {
     },
     'border-right': {
         key: 'br',
-        layer: Layer.NativeShorthand,
+        type: SyntaxRuleType.NativeShorthand,
         unit: 'rem',
         transformValueComponents: autofillSolidStyle,
         variables: [
@@ -1614,7 +1614,7 @@ const syntaxes = {
     'border-x': {
         key: 'bx',
         unit: 'rem',
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         transformValueComponents: autofillSolidStyle,
         variables: [
             'frame'
@@ -1629,7 +1629,7 @@ const syntaxes = {
     'border-y': {
         key: 'by',
         unit: 'rem',
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         transformValueComponents: autofillSolidStyle,
         variables: [
             'frame'
@@ -1644,7 +1644,7 @@ const syntaxes = {
     border: {
         key: 'b',
         unit: 'rem',
-        layer: Layer.NativeShorthand,
+        type: SyntaxRuleType.NativeShorthand,
         transformValueComponents: autofillSolidStyle,
         variables: [
             'frame'
@@ -1659,11 +1659,11 @@ const syntaxes = {
             'local',
             'scroll'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'background-blend-mode': {
         key: 'bg-blend',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'background-color': {
         ambiguousKeys: [
@@ -1672,11 +1672,11 @@ const syntaxes = {
         ambiguousValues: [
             COLOR_VALUE_REGEX
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'background-clip': {
         key: 'bg-clip',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         declare (value) {
             return {
                 '-webkit-background-clip': value,
@@ -1686,7 +1686,7 @@ const syntaxes = {
     },
     'background-origin': {
         key: 'bg-origin',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'background-position': {
         ambiguousKeys: [
@@ -1699,7 +1699,7 @@ const syntaxes = {
             'left',
             'center'
         ],
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'px'
     },
     'background-repeat': {
@@ -1714,7 +1714,7 @@ const syntaxes = {
             'repeat-x',
             'repeat-y'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'background-size': {
         ambiguousKeys: [
@@ -1727,7 +1727,7 @@ const syntaxes = {
             NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'background-image': {
         ambiguousKeys: [
@@ -1736,15 +1736,15 @@ const syntaxes = {
         ambiguousValues: [
             IMAGE_VALUE_REGEX
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     background: {
         key: 'bg',
-        layer: Layer.NativeShorthand
+        type: SyntaxRuleType.NativeShorthand
     },
     gradient: {
         matcher: /^gradient\(/,
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'background-image': 'linear-' + value
@@ -1753,11 +1753,11 @@ const syntaxes = {
     },
     'mix-blend-mode': {
         key: 'blend',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'backdrop-filter': {
         key: 'bd',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         declare (value) {
             return {
                 '-webkit-backdrop-filter': value,
@@ -1767,16 +1767,16 @@ const syntaxes = {
     },
     filter: {
         matcher: /^(?:blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|opacity|saturate|sepia)\(/,
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     fill: {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'stroke-dasharray': {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'stroke-dashoffset': {
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         variables: [
             'spacing'
         ]
@@ -1788,52 +1788,52 @@ const syntaxes = {
         ambiguousValues: [
             NUMBER_VALUE_REGEX
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     stroke: {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     x: {
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         variables: [
             'spacing'
         ]
     },
     y: {
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         variables: [
             'spacing'
         ]
     },
     cx: {
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         variables: [
             'spacing'
         ]
     },
     cy: {
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         variables: [
             'spacing'
         ]
     },
     rx: {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     ry: {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'grid-column-start': {
         key: 'grid-col-start',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'grid-column-end': {
         key: 'grid-col-end',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'grid-column-span': {
         key: 'grid-col-span',
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         transformValue (value) {
             return 'span' + ' ' + value + '/' + 'span' + ' ' + value;
         },
@@ -1845,7 +1845,7 @@ const syntaxes = {
     },
     'grid-column': {
         key: 'grid-col',
-        layer: Layer.NativeShorthand
+        type: SyntaxRuleType.NativeShorthand
     },
     'grid-columns': {
         key: 'grid-cols',
@@ -1855,16 +1855,16 @@ const syntaxes = {
                 'grid-template-columns': 'repeat' + '(' + value + ',' + 'minmax' + '(' + 0 + ',' + 1 + 'fr' + '))'
             };
         },
-        layer: Layer.Shorthand
+        type: SyntaxRuleType.Shorthand
     },
     'grid-row-start': {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'grid-row-end': {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'grid-row-span': {
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         transformValue (value) {
             return 'span' + ' ' + value + '/' + 'span' + ' ' + value;
         },
@@ -1875,7 +1875,7 @@ const syntaxes = {
         }
     },
     'grid-row': {
-        layer: Layer.NativeShorthand
+        type: SyntaxRuleType.NativeShorthand
     },
     'grid-rows': {
         declare (value) {
@@ -1885,44 +1885,44 @@ const syntaxes = {
                 'grid-template-rows': 'repeat' + '(' + value + ',' + 'minmax' + '(' + 0 + ',' + 1 + 'fr' + '))'
             };
         },
-        layer: Layer.Shorthand
+        type: SyntaxRuleType.Shorthand
     },
     'grid-auto-columns': {
         key: 'grid-auto-cols',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'grid-auto-flow': {
         key: 'grid-flow',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'grid-auto-rows': {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'grid-template-areas': {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'grid-template-columns': {
         key: 'grid-template-cols',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem'
     },
     'grid-template-rows': {
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem'
     },
     'grid-template': {
-        layer: Layer.NativeShorthand
+        type: SyntaxRuleType.NativeShorthand
     },
     'grid-area': {
-        layer: Layer.NativeShorthand
+        type: SyntaxRuleType.NativeShorthand
     },
     grid: {
-        layer: Layer.NativeShorthand
+        type: SyntaxRuleType.NativeShorthand
     },
     'column-gap': {
         key: 'gap-x',
         unit: 'rem',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         variables: [
             'spacing'
         ]
@@ -1930,71 +1930,71 @@ const syntaxes = {
     'row-gap': {
         key: 'gap-y',
         unit: 'rem',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         variables: [
             'spacing'
         ]
     },
     gap: {
         unit: 'rem',
-        layer: Layer.NativeShorthand,
+        type: SyntaxRuleType.NativeShorthand,
         variables: [
             'spacing'
         ]
     },
     order: {
         key: 'o',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'break-inside': {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'break-before': {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'break-after': {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'aspect-ratio': {
         key: 'aspect',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'column-span': {
         key: 'col-span',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'align-content': {
         subkey: 'ac',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'align-items': {
         subkey: 'ai',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'align-self': {
         subkey: 'as',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'justify-content': {
         subkey: 'jc',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'justify-items': {
         subkey: 'ji',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'justify-self': {
         subkey: 'js',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'place-content': {
-        layer: Layer.NativeShorthand
+        type: SyntaxRuleType.NativeShorthand
     },
     'place-items': {
-        layer: Layer.NativeShorthand
+        type: SyntaxRuleType.NativeShorthand
     },
     'place-self': {
-        layer: Layer.NativeShorthand
+        type: SyntaxRuleType.NativeShorthand
     },
     'list-style-position': {
         ambiguousKeys: [
@@ -2004,7 +2004,7 @@ const syntaxes = {
             'inside',
             'outside'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'list-style-type': {
         ambiguousKeys: [
@@ -2014,7 +2014,7 @@ const syntaxes = {
             'disc',
             'decimal'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'list-style-image': {
         ambiguousKeys: [
@@ -2023,10 +2023,10 @@ const syntaxes = {
         ambiguousValues: [
             IMAGE_VALUE_REGEX
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'list-style': {
-        layer: Layer.NativeShorthand
+        type: SyntaxRuleType.NativeShorthand
     },
     'outline-color': {
         ambiguousKeys: [
@@ -2035,14 +2035,14 @@ const syntaxes = {
         ambiguousValues: [
             COLOR_VALUE_REGEX
         ],
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         variables: [
             'frame'
         ]
     },
     'outline-offset': {
         unit: 'rem',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         variables: [
             'spacing'
         ]
@@ -2052,7 +2052,7 @@ const syntaxes = {
             'outline'
         ],
         ambiguousValues: BORDER_STYLE_VALUES,
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'outline-width': {
         ambiguousKeys: [
@@ -2065,11 +2065,11 @@ const syntaxes = {
             NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     outline: {
         unit: 'rem',
-        layer: Layer.NativeShorthand,
+        type: SyntaxRuleType.NativeShorthand,
         variables: [
             'outline-width',
             'outline-style',
@@ -2081,25 +2081,25 @@ const syntaxes = {
     },
     'accent-color': {
         key: 'accent',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     appearance: {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'caret-color': {
         key: 'caret',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         variables: [
             'text'
         ]
     },
     'scroll-behavior': {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     // scroll margin
     'scroll-margin-left': {
         key: 'scroll-ml',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -2107,7 +2107,7 @@ const syntaxes = {
     },
     'scroll-margin-right': {
         key: 'scroll-mr',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -2115,7 +2115,7 @@ const syntaxes = {
     },
     'scroll-margin-top': {
         key: 'scroll-mt',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -2123,7 +2123,7 @@ const syntaxes = {
     },
     'scroll-margin-bottom': {
         key: 'scroll-mb',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -2132,7 +2132,7 @@ const syntaxes = {
     'scroll-margin-x': {
         key: 'scroll-mx',
         unit: 'rem',
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'scroll-margin-left': value,
@@ -2146,7 +2146,7 @@ const syntaxes = {
     'scroll-margin-y': {
         key: 'scroll-my',
         unit: 'rem',
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'scroll-margin-top': value,
@@ -2160,7 +2160,7 @@ const syntaxes = {
     'scroll-margin': {
         key: 'scroll-m',
         unit: 'rem',
-        layer: Layer.NativeShorthand,
+        type: SyntaxRuleType.NativeShorthand,
         variables: [
             'spacing'
         ]
@@ -2168,7 +2168,7 @@ const syntaxes = {
     // scroll padding
     'scroll-padding-left': {
         key: 'scroll-pl',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -2176,7 +2176,7 @@ const syntaxes = {
     },
     'scroll-padding-right': {
         key: 'scroll-pr',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -2184,7 +2184,7 @@ const syntaxes = {
     },
     'scroll-padding-top': {
         key: 'scroll-pt',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -2192,7 +2192,7 @@ const syntaxes = {
     },
     'scroll-padding-bottom': {
         key: 'scroll-pb',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -2201,7 +2201,7 @@ const syntaxes = {
     'scroll-padding-x': {
         key: 'scroll-px',
         unit: 'rem',
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'scroll-padding-left': value,
@@ -2215,7 +2215,7 @@ const syntaxes = {
     'scroll-padding-y': {
         key: 'scroll-py',
         unit: 'rem',
-        layer: Layer.Shorthand,
+        type: SyntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'scroll-padding-top': value,
@@ -2229,7 +2229,7 @@ const syntaxes = {
     'scroll-padding': {
         key: 'scroll-p',
         unit: 'rem',
-        layer: Layer.NativeShorthand,
+        type: SyntaxRuleType.NativeShorthand,
         variables: [
             'spacing'
         ]
@@ -2244,7 +2244,7 @@ const syntaxes = {
             'end',
             'center'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'scroll-snap-stop': {
         ambiguousKeys: [
@@ -2254,7 +2254,7 @@ const syntaxes = {
             'normal',
             'always'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'scroll-snap-type': {
         ambiguousKeys: [
@@ -2267,17 +2267,17 @@ const syntaxes = {
             'inline',
             'both'
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'will-change': {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'writing-mode': {
         key: 'writing',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     direction: {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'shape-outside': {
         ambiguousKeys: [
@@ -2286,7 +2286,7 @@ const syntaxes = {
         ambiguousValues: [
             /(?:inset|circle|ellipse|polygon|url|linear-gradient)\(.*\)/
         ],
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'shape-margin': {
         ambiguousKeys: [
@@ -2296,23 +2296,23 @@ const syntaxes = {
             NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         variables: [
             'spacing'
         ]
     },
     'shape-image-threshold': {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'clip-path': {
         key: 'clip',
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     quotes: {
-        layer: Layer.Native
+        type: SyntaxRuleType.Native
     },
     'mask-image': {
-        layer: Layer.Native,
+        type: SyntaxRuleType.Native,
         declare (value) {
             return {
                 '-webkit-mask-image': value,
@@ -2322,4 +2322,4 @@ const syntaxes = {
     }
 };
 
-export { syntaxes as default };
+export { rules as default };