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

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

@@ -1,14 +1,14 @@
 'use strict';
 
 var cssEscape = require('../shared/utils/css-escape.cjs');
-var layer = require('../layer.cjs');
+var syntaxRuleType = require('../syntax-rule-type.cjs');
 var common = require('../common.cjs');
 var autofillSolidStyle = require('../utils/autofill-solid-style.cjs');
 
-const syntaxes = {
+const rules = {
     group: {
         matcher: /^(?:.+?[*_>~+])?\{.+?\}/,
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         analyze (className) {
             let i = 0;
             for(; i < className.length; i++){
@@ -32,12 +32,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
@@ -107,9 +107,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 {
@@ -121,7 +121,7 @@ const syntaxes = {
     },
     variable: {
         matcher: /^\$[\w-]+:/,
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         declare (value) {
             return {
                 ['--' + this.keyToken.slice(1, -1)]: value
@@ -137,7 +137,7 @@ const syntaxes = {
             common.NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'font-weight': {
         ambiguousKeys: [
@@ -147,14 +147,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: [
@@ -165,7 +165,7 @@ const syntaxes = {
             'antialiased',
             'subpixel-antialiased'
         ],
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         declare (value) {
             switch(value){
                 case 'subpixel-antialiased':
@@ -191,7 +191,7 @@ const syntaxes = {
             'italic',
             'oblique'
         ],
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'deg'
     },
     'font-variant-numeric': {
@@ -209,18 +209,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',
@@ -232,11 +232,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'
         ]
@@ -244,7 +244,7 @@ const syntaxes = {
     // margin
     'margin-left': {
         key: 'ml',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -252,7 +252,7 @@ const syntaxes = {
     },
     'margin-right': {
         key: 'mr',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -260,7 +260,7 @@ const syntaxes = {
     },
     'margin-top': {
         key: 'mt',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -268,7 +268,7 @@ const syntaxes = {
     },
     'margin-bottom': {
         key: 'mb',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -278,7 +278,7 @@ const syntaxes = {
         key: 'mx',
         subkey: 'margin-x',
         unit: 'rem',
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'margin-left': value,
@@ -292,7 +292,7 @@ const syntaxes = {
     'margin-y': {
         key: 'my',
         unit: 'rem',
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'margin-top': value,
@@ -306,7 +306,7 @@ const syntaxes = {
     margin: {
         key: 'm',
         unit: 'rem',
-        layer: layer.NativeShorthand,
+        type: syntaxRuleType.NativeShorthand,
         variables: [
             'spacing'
         ]
@@ -314,7 +314,7 @@ const syntaxes = {
     // margin inline
     'margin-inline-start': {
         key: 'mis',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -322,7 +322,7 @@ const syntaxes = {
     },
     'margin-inline-end': {
         key: 'mie',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -331,7 +331,7 @@ const syntaxes = {
     'margin-inline': {
         key: 'mi',
         unit: 'rem',
-        layer: layer.NativeShorthand,
+        type: syntaxRuleType.NativeShorthand,
         variables: [
             'spacing'
         ]
@@ -339,7 +339,7 @@ const syntaxes = {
     // padding
     'padding-left': {
         key: 'pl',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -347,7 +347,7 @@ const syntaxes = {
     },
     'padding-right': {
         key: 'pr',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -355,7 +355,7 @@ const syntaxes = {
     },
     'padding-top': {
         key: 'pt',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -363,7 +363,7 @@ const syntaxes = {
     },
     'padding-bottom': {
         key: 'pb',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -372,7 +372,7 @@ const syntaxes = {
     'padding-x': {
         key: 'px',
         unit: 'rem',
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'padding-left': value,
@@ -386,7 +386,7 @@ const syntaxes = {
     'padding-y': {
         key: 'py',
         unit: 'rem',
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'padding-top': value,
@@ -400,7 +400,7 @@ const syntaxes = {
     padding: {
         key: 'p',
         unit: 'rem',
-        layer: layer.NativeShorthand,
+        type: syntaxRuleType.NativeShorthand,
         variables: [
             'spacing'
         ]
@@ -408,7 +408,7 @@ const syntaxes = {
     // padding inline
     'padding-inline-start': {
         key: 'pis',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -416,7 +416,7 @@ const syntaxes = {
     },
     'padding-inline-end': {
         key: 'pie',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -425,7 +425,7 @@ const syntaxes = {
     'padding-inline': {
         key: 'pi',
         unit: 'rem',
-        layer: layer.NativeShorthand,
+        type: syntaxRuleType.NativeShorthand,
         variables: [
             'spacing'
         ]
@@ -436,7 +436,7 @@ const syntaxes = {
             'flex'
         ],
         unit: 'rem',
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'flex-wrap': {
         ambiguousKeys: [
@@ -447,19 +447,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: [
@@ -471,37 +471,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;
@@ -513,7 +513,7 @@ const syntaxes = {
     },
     'min-size': {
         key: 'min',
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         unit: 'rem',
         declare (_value, valueComponents) {
             const length = valueComponents.length;
@@ -525,7 +525,7 @@ const syntaxes = {
     },
     'max-size': {
         key: 'max',
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         unit: 'rem',
         declare (_value, valueComponents) {
             const length = valueComponents.length;
@@ -539,11 +539,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,
@@ -552,27 +552,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: [
@@ -585,7 +585,7 @@ const syntaxes = {
             'fill',
             'scale-down'
         ],
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'object-position': {
         ambiguousKeys: [
@@ -599,7 +599,7 @@ const syntaxes = {
             'left',
             'center'
         ],
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'text-align': {
         ambiguousKeys: [
@@ -614,7 +614,7 @@ const syntaxes = {
             'start',
             'end'
         ],
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'text-decoration-color': {
         ambiguousKeys: [
@@ -623,7 +623,7 @@ const syntaxes = {
         ambiguousValues: [
             common.COLOR_VALUE_REGEX
         ],
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         variables: [
             'text'
         ]
@@ -639,7 +639,7 @@ const syntaxes = {
             'dashed',
             'wavy'
         ],
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'text-decoration-thickness': {
         ambiguousKeys: [
@@ -649,7 +649,7 @@ const syntaxes = {
             'from-font',
             common.NUMBER_VALUE_REGEX
         ],
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'em'
     },
     'text-decoration-line': {
@@ -661,7 +661,7 @@ const syntaxes = {
             'overline',
             'line-through'
         ],
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'text-decoration': {
         ambiguousKeys: [
@@ -674,7 +674,7 @@ const syntaxes = {
             'line-through'
         ],
         unit: 'rem',
-        layer: layer.NativeShorthand,
+        type: syntaxRuleType.NativeShorthand,
         variables: [
             'text'
         ],
@@ -690,7 +690,7 @@ const syntaxes = {
             'text-underline'
         ],
         unit: 'rem',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         variables: [
             'spacing'
         ]
@@ -705,7 +705,7 @@ const syntaxes = {
             'left',
             'right'
         ],
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'text-overflow': {
         ambiguousKeys: [
@@ -716,7 +716,7 @@ const syntaxes = {
             'ellipsis',
             'clip'
         ],
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'text-orientation': {
         ambiguousKeys: [
@@ -730,7 +730,7 @@ const syntaxes = {
             'sideways',
             'use-glyph-orientation'
         ],
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'text-transform': {
         ambiguousKeys: [
@@ -742,7 +742,7 @@ const syntaxes = {
             'lowercase',
             'capitalize'
         ],
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'text-rendering': {
         ambiguousKeys: [
@@ -754,7 +754,7 @@ const syntaxes = {
             'optimizeLegibility',
             'geometricPrecision'
         ],
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'text-wrap': {
         ambiguousKeys: [
@@ -767,47 +767,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'
@@ -815,7 +815,7 @@ const syntaxes = {
     },
     inset: {
         unit: 'rem',
-        layer: layer.NativeShorthand,
+        type: syntaxRuleType.NativeShorthand,
         variables: [
             'spacing'
         ]
@@ -823,30 +823,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': [
@@ -859,7 +859,7 @@ const syntaxes = {
         }
     },
     'overflow-y': {
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         declare (value) {
             return value === 'overlay' ? {
                 'overflow-y': [
@@ -872,7 +872,7 @@ const syntaxes = {
         }
     },
     overflow: {
-        layer: layer.NativeShorthand,
+        type: syntaxRuleType.NativeShorthand,
         declare (value) {
             return value === 'overlay' ? {
                 overflow: [
@@ -885,42 +885,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,
@@ -929,7 +929,7 @@ const syntaxes = {
         }
     },
     'user-select': {
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         declare (value) {
             return {
                 '-webkit-user-select': value,
@@ -939,7 +939,7 @@ const syntaxes = {
     },
     'text-shadow': {
         unit: 'rem',
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'text-size': {
         ambiguousKeys: [
@@ -957,7 +957,7 @@ const syntaxes = {
                 'line-height': `calc(${value} + ${diff}em)`
             };
         },
-        layer: layer.Shorthand
+        type: syntaxRuleType.Shorthand
     },
     'text-fill-color': {
         ambiguousKeys: [
@@ -967,7 +967,7 @@ const syntaxes = {
         ambiguousValues: [
             common.COLOR_VALUE_REGEX
         ],
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         variables: [
             'text'
         ],
@@ -988,7 +988,7 @@ const syntaxes = {
             common.NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         declare (value) {
             return {
                 '-webkit-text-stroke-width': value
@@ -1002,7 +1002,7 @@ const syntaxes = {
         ambiguousValues: [
             common.COLOR_VALUE_REGEX
         ],
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         declare (value) {
             return {
                 '-webkit-text-stroke-color': value
@@ -1011,7 +1011,7 @@ const syntaxes = {
     },
     'text-stroke': {
         unit: 'rem',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         declare (value) {
             return {
                 '-webkit-text-stroke': value
@@ -1030,22 +1030,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: [
@@ -1055,7 +1055,7 @@ const syntaxes = {
             'flat',
             'preserve-3d'
         ],
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'transform-origin': {
         ambiguousKeys: [
@@ -1070,11 +1070,11 @@ const syntaxes = {
             common.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
@@ -1087,20 +1087,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: {
@@ -1118,46 +1118,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('@')) {
@@ -1182,11 +1182,11 @@ const syntaxes = {
             'collapse',
             'separate'
         ],
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'border-spacing': {
         unit: 'rem',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         variables: [
             'spacing'
         ]
@@ -1200,7 +1200,7 @@ const syntaxes = {
         ambiguousValues: [
             common.COLOR_VALUE_REGEX
         ],
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         variables: [
             'frame'
         ]
@@ -1213,7 +1213,7 @@ const syntaxes = {
         ambiguousValues: [
             common.COLOR_VALUE_REGEX
         ],
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         variables: [
             'frame'
         ]
@@ -1226,7 +1226,7 @@ const syntaxes = {
         ambiguousValues: [
             common.COLOR_VALUE_REGEX
         ],
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         variables: [
             'frame'
         ]
@@ -1239,7 +1239,7 @@ const syntaxes = {
         ambiguousValues: [
             common.COLOR_VALUE_REGEX
         ],
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         variables: [
             'frame'
         ]
@@ -1252,7 +1252,7 @@ const syntaxes = {
         ambiguousValues: [
             common.COLOR_VALUE_REGEX
         ],
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         variables: [
             'frame'
         ],
@@ -1271,7 +1271,7 @@ const syntaxes = {
         ambiguousValues: [
             common.COLOR_VALUE_REGEX
         ],
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         variables: [
             'frame'
         ],
@@ -1290,7 +1290,7 @@ const syntaxes = {
         ambiguousValues: [
             common.COLOR_VALUE_REGEX
         ],
-        layer: layer.NativeShorthand,
+        type: syntaxRuleType.NativeShorthand,
         variables: [
             'frame'
         ]
@@ -1299,27 +1299,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,
@@ -1330,7 +1330,7 @@ const syntaxes = {
     'border-bottom-radius': {
         key: 'rb',
         unit: 'rem',
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'border-bottom-left-radius': value,
@@ -1341,7 +1341,7 @@ const syntaxes = {
     'border-left-radius': {
         key: 'rl',
         unit: 'rem',
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'border-top-left-radius': value,
@@ -1352,7 +1352,7 @@ const syntaxes = {
     'border-right-radius': {
         key: 'rr',
         unit: 'rem',
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'border-top-right-radius': value,
@@ -1363,7 +1363,7 @@ const syntaxes = {
     'border-radius': {
         key: 'r',
         unit: 'rem',
-        layer: layer.NativeShorthand
+        type: syntaxRuleType.NativeShorthand
     },
     // border style
     'border-top-style': {
@@ -1372,7 +1372,7 @@ const syntaxes = {
             'border-top'
         ],
         ambiguousValues: common.BORDER_STYLE_VALUES,
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'border-bottom-style': {
         ambiguousKeys: [
@@ -1380,7 +1380,7 @@ const syntaxes = {
             'border-bottom'
         ],
         ambiguousValues: common.BORDER_STYLE_VALUES,
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'border-left-style': {
         ambiguousKeys: [
@@ -1388,7 +1388,7 @@ const syntaxes = {
             'border-left'
         ],
         ambiguousValues: common.BORDER_STYLE_VALUES,
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'border-right-style': {
         ambiguousKeys: [
@@ -1396,7 +1396,7 @@ const syntaxes = {
             'border-right'
         ],
         ambiguousValues: common.BORDER_STYLE_VALUES,
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'border-x-style': {
         ambiguousKeys: [
@@ -1404,7 +1404,7 @@ const syntaxes = {
             'border-x'
         ],
         ambiguousValues: common.BORDER_STYLE_VALUES,
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'border-left-style': value,
@@ -1418,7 +1418,7 @@ const syntaxes = {
             'border-y'
         ],
         ambiguousValues: common.BORDER_STYLE_VALUES,
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'border-top-style': value,
@@ -1432,7 +1432,7 @@ const syntaxes = {
             'border'
         ],
         ambiguousValues: common.BORDER_STYLE_VALUES,
-        layer: layer.NativeShorthand
+        type: syntaxRuleType.NativeShorthand
     },
     // border width
     'border-top-width': {
@@ -1444,7 +1444,7 @@ const syntaxes = {
             common.NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'border-bottom-width': {
         ambiguousKeys: [
@@ -1455,7 +1455,7 @@ const syntaxes = {
             common.NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'border-left-width': {
         ambiguousKeys: [
@@ -1466,7 +1466,7 @@ const syntaxes = {
             common.NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'border-right-width': {
         ambiguousKeys: [
@@ -1477,7 +1477,7 @@ const syntaxes = {
             common.NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'border-x-width': {
         ambiguousKeys: [
@@ -1488,7 +1488,7 @@ const syntaxes = {
             common.NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'border-left-width': value,
@@ -1505,7 +1505,7 @@ const syntaxes = {
             common.NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'border-top-width': value,
@@ -1522,7 +1522,7 @@ const syntaxes = {
             common.NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: layer.NativeShorthand
+        type: syntaxRuleType.NativeShorthand
     },
     // border image
     'border-image-repeat': {
@@ -1535,13 +1535,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: [
@@ -1550,7 +1550,7 @@ const syntaxes = {
         ambiguousValues: [
             common.IMAGE_VALUE_REGEX
         ],
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'border-image-width': {
         ambiguousKeys: [
@@ -1561,7 +1561,7 @@ const syntaxes = {
             common.NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'border-image-outset': {
         ambiguousKeys: [
@@ -1571,15 +1571,15 @@ const syntaxes = {
             common.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: [
@@ -1588,7 +1588,7 @@ const syntaxes = {
     },
     'border-bottom': {
         key: 'bb',
-        layer: layer.NativeShorthand,
+        type: syntaxRuleType.NativeShorthand,
         unit: 'rem',
         transformValueComponents: autofillSolidStyle,
         variables: [
@@ -1597,7 +1597,7 @@ const syntaxes = {
     },
     'border-left': {
         key: 'bl',
-        layer: layer.NativeShorthand,
+        type: syntaxRuleType.NativeShorthand,
         unit: 'rem',
         transformValueComponents: autofillSolidStyle,
         variables: [
@@ -1606,7 +1606,7 @@ const syntaxes = {
     },
     'border-right': {
         key: 'br',
-        layer: layer.NativeShorthand,
+        type: syntaxRuleType.NativeShorthand,
         unit: 'rem',
         transformValueComponents: autofillSolidStyle,
         variables: [
@@ -1616,7 +1616,7 @@ const syntaxes = {
     'border-x': {
         key: 'bx',
         unit: 'rem',
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         transformValueComponents: autofillSolidStyle,
         variables: [
             'frame'
@@ -1631,7 +1631,7 @@ const syntaxes = {
     'border-y': {
         key: 'by',
         unit: 'rem',
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         transformValueComponents: autofillSolidStyle,
         variables: [
             'frame'
@@ -1646,7 +1646,7 @@ const syntaxes = {
     border: {
         key: 'b',
         unit: 'rem',
-        layer: layer.NativeShorthand,
+        type: syntaxRuleType.NativeShorthand,
         transformValueComponents: autofillSolidStyle,
         variables: [
             'frame'
@@ -1661,11 +1661,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: [
@@ -1674,11 +1674,11 @@ const syntaxes = {
         ambiguousValues: [
             common.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,
@@ -1688,7 +1688,7 @@ const syntaxes = {
     },
     'background-origin': {
         key: 'bg-origin',
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'background-position': {
         ambiguousKeys: [
@@ -1701,7 +1701,7 @@ const syntaxes = {
             'left',
             'center'
         ],
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'px'
     },
     'background-repeat': {
@@ -1716,7 +1716,7 @@ const syntaxes = {
             'repeat-x',
             'repeat-y'
         ],
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'background-size': {
         ambiguousKeys: [
@@ -1729,7 +1729,7 @@ const syntaxes = {
             common.NUMBER_VALUE_REGEX
         ],
         unit: 'rem',
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'background-image': {
         ambiguousKeys: [
@@ -1738,15 +1738,15 @@ const syntaxes = {
         ambiguousValues: [
             common.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
@@ -1755,11 +1755,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,
@@ -1769,16 +1769,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'
         ]
@@ -1790,52 +1790,52 @@ const syntaxes = {
         ambiguousValues: [
             common.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;
         },
@@ -1847,7 +1847,7 @@ const syntaxes = {
     },
     'grid-column': {
         key: 'grid-col',
-        layer: layer.NativeShorthand
+        type: syntaxRuleType.NativeShorthand
     },
     'grid-columns': {
         key: 'grid-cols',
@@ -1857,16 +1857,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;
         },
@@ -1877,7 +1877,7 @@ const syntaxes = {
         }
     },
     'grid-row': {
-        layer: layer.NativeShorthand
+        type: syntaxRuleType.NativeShorthand
     },
     'grid-rows': {
         declare (value) {
@@ -1887,44 +1887,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'
         ]
@@ -1932,71 +1932,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: [
@@ -2006,7 +2006,7 @@ const syntaxes = {
             'inside',
             'outside'
         ],
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'list-style-type': {
         ambiguousKeys: [
@@ -2016,7 +2016,7 @@ const syntaxes = {
             'disc',
             'decimal'
         ],
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'list-style-image': {
         ambiguousKeys: [
@@ -2025,10 +2025,10 @@ const syntaxes = {
         ambiguousValues: [
             common.IMAGE_VALUE_REGEX
         ],
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'list-style': {
-        layer: layer.NativeShorthand
+        type: syntaxRuleType.NativeShorthand
     },
     'outline-color': {
         ambiguousKeys: [
@@ -2037,14 +2037,14 @@ const syntaxes = {
         ambiguousValues: [
             common.COLOR_VALUE_REGEX
         ],
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         variables: [
             'frame'
         ]
     },
     'outline-offset': {
         unit: 'rem',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         variables: [
             'spacing'
         ]
@@ -2054,7 +2054,7 @@ const syntaxes = {
             'outline'
         ],
         ambiguousValues: common.BORDER_STYLE_VALUES,
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'outline-width': {
         ambiguousKeys: [
@@ -2067,11 +2067,11 @@ const syntaxes = {
             common.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',
@@ -2083,25 +2083,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'
@@ -2109,7 +2109,7 @@ const syntaxes = {
     },
     'scroll-margin-right': {
         key: 'scroll-mr',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -2117,7 +2117,7 @@ const syntaxes = {
     },
     'scroll-margin-top': {
         key: 'scroll-mt',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -2125,7 +2125,7 @@ const syntaxes = {
     },
     'scroll-margin-bottom': {
         key: 'scroll-mb',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -2134,7 +2134,7 @@ const syntaxes = {
     'scroll-margin-x': {
         key: 'scroll-mx',
         unit: 'rem',
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'scroll-margin-left': value,
@@ -2148,7 +2148,7 @@ const syntaxes = {
     'scroll-margin-y': {
         key: 'scroll-my',
         unit: 'rem',
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'scroll-margin-top': value,
@@ -2162,7 +2162,7 @@ const syntaxes = {
     'scroll-margin': {
         key: 'scroll-m',
         unit: 'rem',
-        layer: layer.NativeShorthand,
+        type: syntaxRuleType.NativeShorthand,
         variables: [
             'spacing'
         ]
@@ -2170,7 +2170,7 @@ const syntaxes = {
     // scroll padding
     'scroll-padding-left': {
         key: 'scroll-pl',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -2178,7 +2178,7 @@ const syntaxes = {
     },
     'scroll-padding-right': {
         key: 'scroll-pr',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -2186,7 +2186,7 @@ const syntaxes = {
     },
     'scroll-padding-top': {
         key: 'scroll-pt',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -2194,7 +2194,7 @@ const syntaxes = {
     },
     'scroll-padding-bottom': {
         key: 'scroll-pb',
-        layer: layer.Native,
+        type: syntaxRuleType.Native,
         unit: 'rem',
         variables: [
             'spacing'
@@ -2203,7 +2203,7 @@ const syntaxes = {
     'scroll-padding-x': {
         key: 'scroll-px',
         unit: 'rem',
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'scroll-padding-left': value,
@@ -2217,7 +2217,7 @@ const syntaxes = {
     'scroll-padding-y': {
         key: 'scroll-py',
         unit: 'rem',
-        layer: layer.Shorthand,
+        type: syntaxRuleType.Shorthand,
         declare (value) {
             return {
                 'scroll-padding-top': value,
@@ -2231,7 +2231,7 @@ const syntaxes = {
     'scroll-padding': {
         key: 'scroll-p',
         unit: 'rem',
-        layer: layer.NativeShorthand,
+        type: syntaxRuleType.NativeShorthand,
         variables: [
             'spacing'
         ]
@@ -2246,7 +2246,7 @@ const syntaxes = {
             'end',
             'center'
         ],
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'scroll-snap-stop': {
         ambiguousKeys: [
@@ -2256,7 +2256,7 @@ const syntaxes = {
             'normal',
             'always'
         ],
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'scroll-snap-type': {
         ambiguousKeys: [
@@ -2269,17 +2269,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: [
@@ -2288,7 +2288,7 @@ const syntaxes = {
         ambiguousValues: [
             /(?:inset|circle|ellipse|polygon|url|linear-gradient)\(.*\)/
         ],
-        layer: layer.Native
+        type: syntaxRuleType.Native
     },
     'shape-margin': {
         ambiguousKeys: [
@@ -2298,23 +2298,23 @@ const syntaxes = {
             common.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,
@@ -2324,4 +2324,4 @@ const syntaxes = {
     }
 };
 
-module.exports = syntaxes;
+module.exports = rules;