@master/css 2.0.0-rc.4 → 2.0.0-rc.40

package/dist/config/rules.cjs

@@ -0,0 +1,2283 @@
+'use strict';
+
+var cssEscape = require('../shared/utils/css-escape.cjs');
+var layer = require('../layer.cjs');
+var common = require('../common.cjs');
+var autofillSolidStyle = require('../utils/autofill-solid-style.cjs');
+
+const rules = {
+    group: {
+        matcher: /^(?:.+?[*_>~+])?\{.+?\}/,
+        layer: layer.Shorthand,
+        analyze (className) {
+            let i = 0;
+            for(; i < className.length; i++){
+                if (className[i] === '{' && className[i - 1] !== '\\') {
+                    break;
+                }
+            }
+            return [
+                className.slice(i),
+                className.slice(0, i)
+            ];
+        },
+        declare (value) {
+            const declarations = {};
+            const addProp = (propertyName)=>{
+                const indexOfColon = propertyName.indexOf(':');
+                if (indexOfColon !== -1) {
+                    const propName = propertyName.slice(0, indexOfColon);
+                    declarations[propName] = propertyName.slice(indexOfColon + 1);
+                }
+            };
+            const handleRule = (rule)=>{
+                const addProps = (cssText)=>{
+                    const cssProperties = cssText.slice(cssEscape(rule.className).length).match(/\{(.*)\}/)?.[1].split(';');
+                    if (cssProperties) for (const eachCssProperty of cssProperties){
+                        addProp(eachCssProperty);
+                    }
+                };
+                for (const eachNative of rule.natives){
+                    addProps(eachNative.text);
+                }
+                // animation
+                if (rule.animationNames) {
+                    if (!this.animationNames) {
+                        this.animationNames = [];
+                    }
+                    for (const eachKeyframeName of rule.animationNames){
+                        if (!this.animationNames.includes(eachKeyframeName)) {
+                            this.animationNames.push(eachKeyframeName);
+                        }
+                    }
+                }
+                // variable
+                if (rule.variableNames) {
+                    if (!this.variableNames) {
+                        this.variableNames = [];
+                    }
+                    for (const eachVariableName of rule.variableNames){
+                        if (!this.variableNames.includes(eachVariableName)) {
+                            this.variableNames.push(eachVariableName);
+                        }
+                    }
+                }
+            };
+            const names = [];
+            let currentName = '';
+            const addName = ()=>{
+                if (currentName) {
+                    names.push(currentName.replace(/ /g, '|'));
+                    currentName = '';
+                }
+            };
+            let i = 1;
+            (function analyze(end) {
+                for(; i < value.length; i++){
+                    const char = value[i];
+                    if (!end) {
+                        if (char === ';') {
+                            addName();
+                            continue;
+                        }
+                        if (char === '}') {
+                            break;
+                        }
+                    }
+                    currentName += char;
+                    if (end === char) {
+                        if (end === '\'' || end === '"') {
+                            let count = 0;
+                            for(let j = currentName.length - 2;; j--){
+                                if (currentName[j] !== '\\') {
+                                    break;
+                                }
+                                count++;
+                            }
+                            if (count % 2) {
+                                continue;
+                            }
+                        }
+                        break;
+                    } else if (char in common.VALUE_DELIMITERS && end !== '\'' && end !== '"') {
+                        i++;
+                        analyze(common.VALUE_DELIMITERS[char]);
+                    }
+                }
+            })('');
+            addName();
+            for (const eachName of names){
+                const rules = this.css.generate(eachName);
+                if (rules.length) {
+                    for (const eachRule of rules){
+                        handleRule(eachRule);
+                    }
+                } else {
+                    addProp(eachName);
+                }
+            }
+            return declarations;
+        }
+    },
+    variable: {
+        matcher: /^\$[\w-]+:/,
+        layer: layer.Shorthand,
+        declare (value) {
+            return {
+                ['--' + this.keyToken.slice(1, -1)]: value
+            };
+        }
+    },
+    'font-size': {
+        ambiguousKeys: [
+            'font',
+            'f'
+        ],
+        ambiguousValues: [
+            common.NUMBER_VALUE_REGEX
+        ],
+        unit: 'rem',
+        layer: layer.Native
+    },
+    'font-weight': {
+        ambiguousKeys: [
+            'font',
+            'f'
+        ],
+        ambiguousValues: [
+            'bolder'
+        ],
+        layer: layer.Native
+    },
+    'font-family': {
+        ambiguousKeys: [
+            'font',
+            'f'
+        ],
+        layer: layer.Native
+    },
+    'font-smoothing': {
+        ambiguousKeys: [
+            'font',
+            'f'
+        ],
+        ambiguousValues: [
+            'antialiased',
+            'subpixel-antialiased'
+        ],
+        layer: layer.Native,
+        declare (value) {
+            switch(value){
+                case 'subpixel-antialiased':
+                    return {
+                        '-webkit-font-smoothing': 'auto',
+                        '-moz-osx-font-smoothing': 'auto'
+                    };
+                case 'antialiased':
+                    return {
+                        '-webkit-font-smoothing': 'antialiased',
+                        '-moz-osx-font-smoothing': 'grayscale'
+                    };
+            }
+        }
+    },
+    'font-style': {
+        ambiguousKeys: [
+            'font',
+            'f'
+        ],
+        ambiguousValues: [
+            'normal',
+            'italic',
+            'oblique'
+        ],
+        layer: layer.Native,
+        unit: 'deg'
+    },
+    'font-variant-numeric': {
+        ambiguousKeys: [
+            'font',
+            'f'
+        ],
+        ambiguousValues: [
+            'ordinal',
+            'slashed-zero',
+            'lining-nums',
+            'oldstyle-nums',
+            'proportional-nums',
+            'tabular-nums',
+            'diagonal-fractions',
+            'stacked-fractions'
+        ],
+        layer: layer.Native
+    },
+    'font-variant': {
+        ambiguousKeys: [
+            'font',
+            'f'
+        ],
+        layer: layer.NativeShorthand
+    },
+    font: {
+        subkey: 'f',
+        layer: layer.NativeShorthand,
+        variables: [
+            'font-family',
+            'font-variant',
+            'font-weight',
+            'font-size',
+            'font-style',
+            'line-height'
+        ]
+    },
+    'font-feature-settings': {
+        key: 'font-feature',
+        layer: layer.Native
+    },
+    color: {
+        key: 'fg',
+        layer: layer.Native,
+        variables: [
+            'text'
+        ]
+    },
+    // margin
+    'margin-left': {
+        key: 'ml',
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    'margin-right': {
+        key: 'mr',
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    'margin-top': {
+        key: 'mt',
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    'margin-bottom': {
+        key: 'mb',
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    'margin-x': {
+        key: 'mx',
+        subkey: 'margin-x',
+        unit: 'rem',
+        layer: layer.Shorthand,
+        declare (value) {
+            return {
+                'margin-left': value,
+                'margin-right': value
+            };
+        },
+        variables: [
+            'spacing'
+        ]
+    },
+    'margin-y': {
+        key: 'my',
+        unit: 'rem',
+        layer: layer.Shorthand,
+        declare (value) {
+            return {
+                'margin-top': value,
+                'margin-bottom': value
+            };
+        },
+        variables: [
+            'spacing'
+        ]
+    },
+    margin: {
+        key: 'm',
+        unit: 'rem',
+        layer: layer.NativeShorthand,
+        variables: [
+            'spacing'
+        ]
+    },
+    // margin inline
+    'margin-inline-start': {
+        key: 'mis',
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    'margin-inline-end': {
+        key: 'mie',
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    'margin-inline': {
+        key: 'mi',
+        unit: 'rem',
+        layer: layer.NativeShorthand,
+        variables: [
+            'spacing'
+        ]
+    },
+    // padding
+    'padding-left': {
+        key: 'pl',
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    'padding-right': {
+        key: 'pr',
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    'padding-top': {
+        key: 'pt',
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    'padding-bottom': {
+        key: 'pb',
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    'padding-x': {
+        key: 'px',
+        unit: 'rem',
+        layer: layer.Shorthand,
+        declare (value) {
+            return {
+                'padding-left': value,
+                'padding-right': value
+            };
+        },
+        variables: [
+            'spacing'
+        ]
+    },
+    'padding-y': {
+        key: 'py',
+        unit: 'rem',
+        layer: layer.Shorthand,
+        declare (value) {
+            return {
+                'padding-top': value,
+                'padding-bottom': value
+            };
+        },
+        variables: [
+            'spacing'
+        ]
+    },
+    padding: {
+        key: 'p',
+        unit: 'rem',
+        layer: layer.NativeShorthand,
+        variables: [
+            'spacing'
+        ]
+    },
+    // padding inline
+    'padding-inline-start': {
+        key: 'pis',
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    'padding-inline-end': {
+        key: 'pie',
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    'padding-inline': {
+        key: 'pi',
+        unit: 'rem',
+        layer: layer.NativeShorthand,
+        variables: [
+            'spacing'
+        ]
+    },
+    // flex
+    'flex-basis': {
+        ambiguousKeys: [
+            'flex'
+        ],
+        unit: 'rem',
+        layer: layer.Native
+    },
+    'flex-wrap': {
+        ambiguousKeys: [
+            'flex'
+        ],
+        ambiguousValues: [
+            'wrap',
+            'nowrap',
+            'wrap-reverse'
+        ],
+        layer: layer.Native
+    },
+    'flex-grow': {
+        ambiguousKeys: [
+            'flex'
+        ],
+        layer: layer.Native
+    },
+    'flex-shrink': {
+        ambiguousKeys: [
+            'flex'
+        ],
+        layer: layer.Native
+    },
+    'flex-direction': {
+        ambiguousKeys: [
+            'flex'
+        ],
+        ambiguousValues: [
+            'row',
+            'row-reverse',
+            'column',
+            'column-reverse'
+        ],
+        layer: layer.Native
+    },
+    flex: {
+        layer: layer.NativeShorthand
+    },
+    display: {
+        key: 'd',
+        layer: layer.Native
+    },
+    width: {
+        key: 'w',
+        unit: 'rem',
+        layer: layer.Native
+    },
+    height: {
+        key: 'h',
+        unit: 'rem',
+        layer: layer.Native
+    },
+    'min-width': {
+        key: 'min-w',
+        unit: 'rem',
+        layer: layer.Native
+    },
+    'min-height': {
+        key: 'min-h',
+        unit: 'rem',
+        layer: layer.Native
+    },
+    size: {
+        layer: layer.Shorthand,
+        unit: 'rem',
+        declare (_value, valueComponents) {
+            const length = valueComponents.length;
+            return {
+                width: length === 1 ? valueComponents[0].text : valueComponents[0].text,
+                height: length === 1 ? valueComponents[0].text : valueComponents[2].text
+            };
+        }
+    },
+    'min-size': {
+        key: 'min',
+        layer: layer.Shorthand,
+        unit: 'rem',
+        declare (_value, valueComponents) {
+            const length = valueComponents.length;
+            return {
+                'min-width': length === 1 ? valueComponents[0].text : valueComponents[0].text,
+                'min-height': length === 1 ? valueComponents[0].text : valueComponents[2].text
+            };
+        }
+    },
+    'max-size': {
+        key: 'max',
+        layer: layer.Shorthand,
+        unit: 'rem',
+        declare (_value, valueComponents) {
+            const length = valueComponents.length;
+            return {
+                'max-width': length === 1 ? valueComponents[0].text : valueComponents[0].text,
+                'max-height': length === 1 ? valueComponents[0].text : valueComponents[2].text
+            };
+        }
+    },
+    'box-sizing': {
+        ambiguousKeys: [
+            'box'
+        ],
+        layer: layer.Native
+    },
+    'box-decoration-break': {
+        key: 'box-decoration',
+        layer: layer.Native,
+        declare (value) {
+            return {
+                '-webkit-box-decoration-break': value,
+                'box-decoration-break': value
+            };
+        }
+    },
+    contain: {
+        layer: layer.Native
+    },
+    content: {
+        layer: layer.Native
+    },
+    'counter-increment': {
+        layer: layer.Native
+    },
+    'counter-reset': {
+        layer: layer.Native
+    },
+    'letter-spacing': {
+        key: 'tracking',
+        subkey: 'ls',
+        layer: layer.Native,
+        unit: 'em'
+    },
+    'line-height': {
+        key: 'leading',
+        subkey: 'line-h',
+        layer: layer.Native
+    },
+    'object-fit': {
+        ambiguousKeys: [
+            'object',
+            'obj'
+        ],
+        ambiguousValues: [
+            'contain',
+            'cover',
+            'fill',
+            'scale-down'
+        ],
+        layer: layer.Native
+    },
+    'object-position': {
+        ambiguousKeys: [
+            'object',
+            'obj'
+        ],
+        ambiguousValues: [
+            'top',
+            'bottom',
+            'right',
+            'left',
+            'center'
+        ],
+        layer: layer.Native
+    },
+    'text-align': {
+        ambiguousKeys: [
+            'text',
+            't'
+        ],
+        ambiguousValues: [
+            'justify',
+            'center',
+            'left',
+            'right',
+            'start',
+            'end'
+        ],
+        layer: layer.Native
+    },
+    'text-decoration-color': {
+        ambiguousKeys: [
+            'text-decoration'
+        ],
+        ambiguousValues: [
+            common.COLOR_VALUE_REGEX
+        ],
+        layer: layer.Native,
+        variables: [
+            'text'
+        ]
+    },
+    'text-decoration-style': {
+        ambiguousKeys: [
+            'text-decoration'
+        ],
+        ambiguousValues: [
+            'solid',
+            'double',
+            'dotted',
+            'dashed',
+            'wavy'
+        ],
+        layer: layer.Native
+    },
+    'text-decoration-thickness': {
+        ambiguousKeys: [
+            'text-decoration'
+        ],
+        ambiguousValues: [
+            'from-font',
+            common.NUMBER_VALUE_REGEX
+        ],
+        layer: layer.Native,
+        unit: 'em'
+    },
+    'text-decoration-line': {
+        ambiguousKeys: [
+            'text-decoration'
+        ],
+        ambiguousValues: [
+            'underline',
+            'overline',
+            'line-through'
+        ],
+        layer: layer.Native
+    },
+    'text-decoration': {
+        ambiguousKeys: [
+            'text',
+            't'
+        ],
+        ambiguousValues: [
+            'underline',
+            'overline',
+            'line-through'
+        ],
+        unit: 'rem',
+        layer: layer.NativeShorthand,
+        variables: [
+            'text'
+        ],
+        declare (value) {
+            return {
+                '-webkit-text-decoration': value,
+                'text-decoration': value
+            };
+        }
+    },
+    'text-underline-offset': {
+        ambiguousKeys: [
+            'text-underline'
+        ],
+        unit: 'rem',
+        layer: layer.Native,
+        variables: [
+            'spacing'
+        ]
+    },
+    'text-underline-position': {
+        ambiguousKeys: [
+            'text-underline'
+        ],
+        ambiguousValues: [
+            'front-font',
+            'under',
+            'left',
+            'right'
+        ],
+        layer: layer.Native
+    },
+    'text-overflow': {
+        ambiguousKeys: [
+            'text',
+            't'
+        ],
+        ambiguousValues: [
+            'ellipsis',
+            'clip'
+        ],
+        layer: layer.Native
+    },
+    'text-orientation': {
+        ambiguousKeys: [
+            'text',
+            't'
+        ],
+        ambiguousValues: [
+            'mixed',
+            'upright',
+            'sideways-right',
+            'sideways',
+            'use-glyph-orientation'
+        ],
+        layer: layer.Native
+    },
+    'text-transform': {
+        ambiguousKeys: [
+            'text',
+            't'
+        ],
+        ambiguousValues: [
+            'uppercase',
+            'lowercase',
+            'capitalize'
+        ],
+        layer: layer.Native
+    },
+    'text-rendering': {
+        ambiguousKeys: [
+            'text',
+            't'
+        ],
+        ambiguousValues: [
+            'optimizeSpeed',
+            'optimizeLegibility',
+            'geometricPrecision'
+        ],
+        layer: layer.Native
+    },
+    'text-wrap': {
+        ambiguousKeys: [
+            'text',
+            't'
+        ],
+        ambiguousValues: [
+            'wrap',
+            'nowrap',
+            'balance',
+            'pretty'
+        ],
+        layer: layer.NativeShorthand
+    },
+    'text-indent': {
+        unit: 'rem',
+        layer: layer.Native
+    },
+    'vertical-align': {
+        key: 'v',
+        subkey: 'vertical',
+        layer: layer.Native
+    },
+    columns: {
+        key: 'cols',
+        layer: layer.NativeShorthand
+    },
+    'white-space': {
+        layer: layer.Native
+    },
+    top: {
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    bottom: {
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    left: {
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    right: {
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    inset: {
+        unit: 'rem',
+        layer: layer.NativeShorthand,
+        variables: [
+            'spacing'
+        ]
+    },
+    'max-height': {
+        key: 'max-h',
+        unit: 'rem',
+        layer: layer.Native
+    },
+    'max-width': {
+        key: 'max-w',
+        unit: 'rem',
+        layer: layer.Native
+    },
+    opacity: {
+        layer: layer.Native
+    },
+    visibility: {
+        layer: layer.Native
+    },
+    clear: {
+        layer: layer.Native
+    },
+    float: {
+        layer: layer.Native
+    },
+    isolation: {
+        layer: layer.Native
+    },
+    'overflow-x': {
+        layer: layer.Native,
+        declare (value) {
+            return value === 'overlay' ? {
+                'overflow-x': [
+                    'auto',
+                    value
+                ]
+            } : {
+                'overflow-x': value
+            };
+        }
+    },
+    'overflow-y': {
+        layer: layer.Native,
+        declare (value) {
+            return value === 'overlay' ? {
+                'overflow-y': [
+                    'auto',
+                    value
+                ]
+            } : {
+                'overflow-y': value
+            };
+        }
+    },
+    overflow: {
+        layer: layer.NativeShorthand,
+        declare (value) {
+            return value === 'overlay' ? {
+                overflow: [
+                    'auto',
+                    value
+                ]
+            } : {
+                overflow: value
+            };
+        }
+    },
+    'overscroll-behavior-x': {
+        layer: layer.Native
+    },
+    'overscroll-behavior-y': {
+        layer: layer.Native
+    },
+    'overscroll-behavior': {
+        layer: layer.NativeShorthand
+    },
+    'z-index': {
+        key: 'z',
+        layer: layer.Native
+    },
+    position: {
+        layer: layer.Native
+    },
+    cursor: {
+        layer: layer.Native
+    },
+    'pointer-events': {
+        layer: layer.Native
+    },
+    resize: {
+        layer: layer.Native
+    },
+    'touch-action': {
+        layer: layer.Native
+    },
+    'word-break': {
+        layer: layer.Native
+    },
+    'word-spacing': {
+        layer: layer.Native,
+        unit: 'em'
+    },
+    'user-drag': {
+        layer: layer.Native,
+        declare (value) {
+            return {
+                '-webkit-user-drag': value,
+                'user-drag': value
+            };
+        }
+    },
+    'user-select': {
+        layer: layer.Native,
+        declare (value) {
+            return {
+                '-webkit-user-select': value,
+                'user-select': value
+            };
+        }
+    },
+    'text-shadow': {
+        unit: 'rem',
+        layer: layer.Native
+    },
+    'text-size': {
+        ambiguousKeys: [
+            'text',
+            't'
+        ],
+        ambiguousValues: [
+            common.NUMBER_VALUE_REGEX
+        ],
+        unit: 'rem',
+        declare (value) {
+            const diff = .875;
+            return {
+                'font-size': value,
+                'line-height': `calc(${value} + ${diff}em)`
+            };
+        },
+        layer: layer.Shorthand
+    },
+    'text-fill-color': {
+        ambiguousKeys: [
+            'text',
+            't'
+        ],
+        ambiguousValues: [
+            common.COLOR_VALUE_REGEX
+        ],
+        layer: layer.Native,
+        variables: [
+            'text'
+        ],
+        declare (value) {
+            return {
+                '-webkit-text-fill-color': value
+            };
+        }
+    },
+    'text-stroke-width': {
+        ambiguousKeys: [
+            'text-stroke'
+        ],
+        ambiguousValues: [
+            'thin',
+            'medium',
+            'thick',
+            common.NUMBER_VALUE_REGEX
+        ],
+        unit: 'rem',
+        layer: layer.Native,
+        declare (value) {
+            return {
+                '-webkit-text-stroke-width': value
+            };
+        }
+    },
+    'text-stroke-color': {
+        ambiguousKeys: [
+            'text-stroke'
+        ],
+        ambiguousValues: [
+            common.COLOR_VALUE_REGEX
+        ],
+        layer: layer.Native,
+        variables: [
+            'text'
+        ],
+        declare (value) {
+            return {
+                '-webkit-text-stroke-color': value
+            };
+        }
+    },
+    'text-stroke': {
+        unit: 'rem',
+        layer: layer.Native,
+        declare (value) {
+            return {
+                '-webkit-text-stroke': value
+            };
+        }
+    },
+    'text-truncate': {
+        subkey: 'lines',
+        declare (value) {
+            return {
+                display: '-webkit-box',
+                '-webkit-box-orient': 'vertical',
+                '-webkit-line-clamp': value,
+                overflow: 'hidden',
+                'overflow-wrap': 'break-word',
+                'text-overflow': 'ellipsis'
+            };
+        },
+        layer: layer.Shorthand
+    },
+    'box-shadow': {
+        key: 'shadow',
+        subkey: 's',
+        unit: 'rem',
+        layer: layer.Native
+    },
+    'table-layout': {
+        layer: layer.Native
+    },
+    'transform-box': {
+        ambiguousKeys: [
+            'transform'
+        ],
+        layer: layer.Native
+    },
+    'transform-style': {
+        ambiguousKeys: [
+            'transform'
+        ],
+        ambiguousValues: [
+            'flat',
+            'preserve-3d'
+        ],
+        layer: layer.Native
+    },
+    'transform-origin': {
+        ambiguousKeys: [
+            'transform'
+        ],
+        ambiguousValues: [
+            'top',
+            'bottom',
+            'right',
+            'left',
+            'center',
+            common.NUMBER_VALUE_REGEX
+        ],
+        unit: 'px',
+        layer: layer.Native
+    },
+    transform: {
+        matcher: /^(?:translate|scale|skew|rotate|perspective|matrix)(?:3d|[XYZ])?\(/,
+        layer: layer.Native,
+        analyze (className) {
+            return [
+                className.startsWith('transform') ? className.slice(10) : className
+            ];
+        },
+        variables: [
+            'spacing'
+        ]
+    },
+    'transition-property': {
+        key: '~property',
+        layer: layer.Native
+    },
+    'transition-timing-function': {
+        key: '~easing',
+        layer: layer.Native
+    },
+    'transition-duration': {
+        key: '~duration',
+        layer: layer.Native,
+        unit: 'ms'
+    },
+    'transition-delay': {
+        key: '~delay',
+        layer: layer.Native,
+        unit: 'ms'
+    },
+    transition: {
+        sign: '~',
+        analyze (className) {
+            if (className.startsWith('~')) {
+                return [
+                    className.slice(1)
+                ];
+            } else {
+                const indexOfColon = className.indexOf(':');
+                this.keyToken = className.slice(0, indexOfColon + 1);
+                return [
+                    className.slice(indexOfColon + 1)
+                ];
+            }
+        },
+        layer: layer.NativeShorthand
+    },
+    'animation-delay': {
+        key: '@delay',
+        layer: layer.Native,
+        unit: 'ms'
+    },
+    'animation-direction': {
+        key: '@direction',
+        layer: layer.Native
+    },
+    'animation-duration': {
+        key: '@duration',
+        layer: layer.Native,
+        unit: 'ms'
+    },
+    'animation-fill-mode': {
+        key: '@fill',
+        layer: layer.Native
+    },
+    'animation-iteration-count': {
+        key: '@iteration',
+        layer: layer.Native
+    },
+    'animation-name': {
+        key: '@name',
+        layer: layer.Native,
+        includeAnimations: true
+    },
+    'animation-play-state': {
+        key: '@play',
+        layer: layer.Native
+    },
+    'animation-timing-function': {
+        key: '@easing',
+        layer: layer.Native
+    },
+    animation: {
+        sign: '@',
+        layer: layer.NativeShorthand,
+        includeAnimations: true,
+        analyze (className) {
+            if (className.startsWith('@')) {
+                return [
+                    className.slice(1)
+                ];
+            } else {
+                const indexOfColon = className.indexOf(':');
+                this.keyToken = className.slice(0, indexOfColon + 1);
+                return [
+                    className.slice(indexOfColon + 1)
+                ];
+            }
+        }
+    },
+    'border-collapse': {
+        ambiguousKeys: [
+            'b',
+            'border'
+        ],
+        ambiguousValues: [
+            'collapse',
+            'separate'
+        ],
+        layer: layer.Native
+    },
+    'border-spacing': {
+        unit: 'rem',
+        layer: layer.Native,
+        variables: [
+            'spacing'
+        ]
+    },
+    // border color
+    'border-top-color': {
+        ambiguousKeys: [
+            'bt',
+            'border-top'
+        ],
+        ambiguousValues: [
+            common.COLOR_VALUE_REGEX
+        ],
+        layer: layer.Native
+    },
+    'border-bottom-color': {
+        ambiguousKeys: [
+            'bb',
+            'border-bottom'
+        ],
+        ambiguousValues: [
+            common.COLOR_VALUE_REGEX
+        ],
+        layer: layer.Native
+    },
+    'border-left-color': {
+        ambiguousKeys: [
+            'bl',
+            'border-left'
+        ],
+        ambiguousValues: [
+            common.COLOR_VALUE_REGEX
+        ],
+        layer: layer.Native
+    },
+    'border-right-color': {
+        ambiguousKeys: [
+            'br',
+            'border-right'
+        ],
+        ambiguousValues: [
+            common.COLOR_VALUE_REGEX
+        ],
+        layer: layer.Native
+    },
+    'border-x-color': {
+        ambiguousKeys: [
+            'bx',
+            'border-x'
+        ],
+        ambiguousValues: [
+            common.COLOR_VALUE_REGEX
+        ],
+        layer: layer.Shorthand,
+        declare (value) {
+            return {
+                'border-left-color': value,
+                'border-right-color': value
+            };
+        }
+    },
+    'border-y-color': {
+        ambiguousKeys: [
+            'by',
+            'border-y'
+        ],
+        ambiguousValues: [
+            common.COLOR_VALUE_REGEX
+        ],
+        layer: layer.Shorthand,
+        declare (value) {
+            return {
+                'border-top-color': value,
+                'border-bottom-color': value
+            };
+        }
+    },
+    'border-color': {
+        ambiguousKeys: [
+            'b',
+            'border'
+        ],
+        ambiguousValues: [
+            common.COLOR_VALUE_REGEX
+        ],
+        layer: layer.NativeShorthand
+    },
+    // border radius
+    'border-top-left-radius': {
+        key: 'rtl',
+        unit: 'rem',
+        layer: layer.Native
+    },
+    'border-top-right-radius': {
+        key: 'rtr',
+        unit: 'rem',
+        layer: layer.Native
+    },
+    'border-bottom-left-radius': {
+        key: 'rbl',
+        unit: 'rem',
+        layer: layer.Native
+    },
+    'border-bottom-right-radius': {
+        key: 'rbr',
+        unit: 'rem',
+        layer: layer.Native
+    },
+    'border-top-radius': {
+        key: 'rt',
+        unit: 'rem',
+        layer: layer.Shorthand,
+        declare (value) {
+            return {
+                'border-top-left-radius': value,
+                'border-top-right-radius': value
+            };
+        }
+    },
+    'border-bottom-radius': {
+        key: 'rb',
+        unit: 'rem',
+        layer: layer.Shorthand,
+        declare (value) {
+            return {
+                'border-bottom-left-radius': value,
+                'border-bottom-right-radius': value
+            };
+        }
+    },
+    'border-left-radius': {
+        key: 'rl',
+        unit: 'rem',
+        layer: layer.Shorthand,
+        declare (value) {
+            return {
+                'border-top-left-radius': value,
+                'border-bottom-left-radius': value
+            };
+        }
+    },
+    'border-right-radius': {
+        key: 'rr',
+        unit: 'rem',
+        layer: layer.Shorthand,
+        declare (value) {
+            return {
+                'border-top-right-radius': value,
+                'border-bottom-right-radius': value
+            };
+        }
+    },
+    'border-radius': {
+        key: 'r',
+        unit: 'rem',
+        layer: layer.NativeShorthand
+    },
+    // border style
+    'border-top-style': {
+        ambiguousKeys: [
+            'bt',
+            'border-top'
+        ],
+        ambiguousValues: common.BORDER_STYLE_VALUES,
+        layer: layer.Native
+    },
+    'border-bottom-style': {
+        ambiguousKeys: [
+            'bb',
+            'border-bottom'
+        ],
+        ambiguousValues: common.BORDER_STYLE_VALUES,
+        layer: layer.Native
+    },
+    'border-left-style': {
+        ambiguousKeys: [
+            'bl',
+            'border-left'
+        ],
+        ambiguousValues: common.BORDER_STYLE_VALUES,
+        layer: layer.Native
+    },
+    'border-right-style': {
+        ambiguousKeys: [
+            'br',
+            'border-right'
+        ],
+        ambiguousValues: common.BORDER_STYLE_VALUES,
+        layer: layer.Native
+    },
+    'border-x-style': {
+        ambiguousKeys: [
+            'bx',
+            'border-x'
+        ],
+        ambiguousValues: common.BORDER_STYLE_VALUES,
+        layer: layer.Shorthand,
+        declare (value) {
+            return {
+                'border-left-style': value,
+                'border-right-style': value
+            };
+        }
+    },
+    'border-y-style': {
+        ambiguousKeys: [
+            'by',
+            'border-y'
+        ],
+        ambiguousValues: common.BORDER_STYLE_VALUES,
+        layer: layer.Shorthand,
+        declare (value) {
+            return {
+                'border-top-style': value,
+                'border-bottom-style': value
+            };
+        }
+    },
+    'border-style': {
+        ambiguousKeys: [
+            'b',
+            'border'
+        ],
+        ambiguousValues: common.BORDER_STYLE_VALUES,
+        layer: layer.NativeShorthand
+    },
+    // border width
+    'border-top-width': {
+        ambiguousKeys: [
+            'bt',
+            'border-top'
+        ],
+        ambiguousValues: [
+            common.NUMBER_VALUE_REGEX
+        ],
+        unit: 'rem',
+        layer: layer.Native
+    },
+    'border-bottom-width': {
+        ambiguousKeys: [
+            'bb',
+            'border-bottom'
+        ],
+        ambiguousValues: [
+            common.NUMBER_VALUE_REGEX
+        ],
+        unit: 'rem',
+        layer: layer.Native
+    },
+    'border-left-width': {
+        ambiguousKeys: [
+            'bl',
+            'border-left'
+        ],
+        ambiguousValues: [
+            common.NUMBER_VALUE_REGEX
+        ],
+        unit: 'rem',
+        layer: layer.Native
+    },
+    'border-right-width': {
+        ambiguousKeys: [
+            'br',
+            'border-right'
+        ],
+        ambiguousValues: [
+            common.NUMBER_VALUE_REGEX
+        ],
+        unit: 'rem',
+        layer: layer.Native
+    },
+    'border-x-width': {
+        ambiguousKeys: [
+            'bx',
+            'border-x'
+        ],
+        ambiguousValues: [
+            common.NUMBER_VALUE_REGEX
+        ],
+        unit: 'rem',
+        layer: layer.Shorthand,
+        declare (value) {
+            return {
+                'border-left-width': value,
+                'border-right-width': value
+            };
+        }
+    },
+    'border-y-width': {
+        ambiguousKeys: [
+            'by',
+            'border-y'
+        ],
+        ambiguousValues: [
+            common.NUMBER_VALUE_REGEX
+        ],
+        unit: 'rem',
+        layer: layer.Shorthand,
+        declare (value) {
+            return {
+                'border-top-width': value,
+                'border-bottom-width': value
+            };
+        }
+    },
+    'border-width': {
+        ambiguousKeys: [
+            'b',
+            'border'
+        ],
+        ambiguousValues: [
+            common.NUMBER_VALUE_REGEX
+        ],
+        unit: 'rem',
+        layer: layer.NativeShorthand
+    },
+    // border image
+    'border-image-repeat': {
+        ambiguousKeys: [
+            'border-image'
+        ],
+        ambiguousValues: [
+            'stretch',
+            'repeat',
+            'round',
+            'space'
+        ],
+        layer: layer.Native
+    },
+    'border-image-slice': {
+        ambiguousKeys: [
+            'border-image'
+        ],
+        layer: layer.Native
+    },
+    'border-image-source': {
+        ambiguousKeys: [
+            'border-image'
+        ],
+        ambiguousValues: [
+            common.IMAGE_VALUE_REGEX
+        ],
+        layer: layer.Native
+    },
+    'border-image-width': {
+        ambiguousKeys: [
+            'border-image'
+        ],
+        ambiguousValues: [
+            'auto',
+            common.NUMBER_VALUE_REGEX
+        ],
+        unit: 'rem',
+        layer: layer.Native
+    },
+    'border-image-outset': {
+        ambiguousKeys: [
+            'border-image'
+        ],
+        ambiguousValues: [
+            common.NUMBER_VALUE_REGEX
+        ],
+        unit: 'rem',
+        layer: layer.Native
+    },
+    'border-image': {
+        layer: layer.NativeShorthand
+    },
+    // border
+    'border-top': {
+        key: 'bt',
+        layer: layer.NativeShorthand,
+        unit: 'rem',
+        transformValueComponents: autofillSolidStyle
+    },
+    'border-bottom': {
+        key: 'bb',
+        layer: layer.NativeShorthand,
+        unit: 'rem',
+        transformValueComponents: autofillSolidStyle
+    },
+    'border-left': {
+        key: 'bl',
+        layer: layer.NativeShorthand,
+        unit: 'rem',
+        transformValueComponents: autofillSolidStyle
+    },
+    'border-right': {
+        key: 'br',
+        layer: layer.NativeShorthand,
+        unit: 'rem',
+        transformValueComponents: autofillSolidStyle
+    },
+    'border-x': {
+        key: 'bx',
+        unit: 'rem',
+        layer: layer.Shorthand,
+        transformValueComponents: autofillSolidStyle,
+        declare (value) {
+            return {
+                'border-left': value,
+                'border-right': value
+            };
+        }
+    },
+    'border-y': {
+        key: 'by',
+        unit: 'rem',
+        layer: layer.Shorthand,
+        transformValueComponents: autofillSolidStyle,
+        declare (value) {
+            return {
+                'border-top': value,
+                'border-bottom': value
+            };
+        }
+    },
+    border: {
+        key: 'b',
+        unit: 'rem',
+        layer: layer.NativeShorthand,
+        transformValueComponents: autofillSolidStyle
+    },
+    'background-attachment': {
+        ambiguousKeys: [
+            'bg'
+        ],
+        ambiguousValues: [
+            'fixed',
+            'local',
+            'scroll'
+        ],
+        layer: layer.Native
+    },
+    'background-blend-mode': {
+        key: 'bg-blend',
+        layer: layer.Native
+    },
+    'background-color': {
+        ambiguousKeys: [
+            'bg'
+        ],
+        ambiguousValues: [
+            common.COLOR_VALUE_REGEX
+        ],
+        layer: layer.Native
+    },
+    'background-clip': {
+        key: 'bg-clip',
+        layer: layer.Native,
+        declare (value) {
+            return {
+                '-webkit-background-clip': value,
+                'background-clip': value
+            };
+        }
+    },
+    'background-origin': {
+        key: 'bg-origin',
+        layer: layer.Native
+    },
+    'background-position': {
+        ambiguousKeys: [
+            'bg'
+        ],
+        ambiguousValues: [
+            'top',
+            'bottom',
+            'right',
+            'left',
+            'center'
+        ],
+        layer: layer.Native,
+        unit: 'px'
+    },
+    'background-repeat': {
+        ambiguousKeys: [
+            'bg'
+        ],
+        ambiguousValues: [
+            'space',
+            'round',
+            'repeat',
+            'no-repeat',
+            'repeat-x',
+            'repeat-y'
+        ],
+        layer: layer.Native
+    },
+    'background-size': {
+        ambiguousKeys: [
+            'bg'
+        ],
+        ambiguousValues: [
+            'auto',
+            'cover',
+            'contain',
+            common.NUMBER_VALUE_REGEX
+        ],
+        unit: 'rem',
+        layer: layer.Native
+    },
+    'background-image': {
+        ambiguousKeys: [
+            'bg'
+        ],
+        ambiguousValues: [
+            common.IMAGE_VALUE_REGEX
+        ],
+        layer: layer.Native
+    },
+    background: {
+        key: 'bg',
+        layer: layer.NativeShorthand
+    },
+    gradient: {
+        matcher: /^gradient\(/,
+        layer: layer.Shorthand,
+        declare (value) {
+            return {
+                'background-image': 'linear-' + value
+            };
+        }
+    },
+    'mix-blend-mode': {
+        key: 'blend',
+        layer: layer.Native
+    },
+    'backdrop-filter': {
+        key: 'bd',
+        layer: layer.Native,
+        declare (value) {
+            return {
+                '-webkit-backdrop-filter': value,
+                'backdrop-filter': value
+            };
+        }
+    },
+    filter: {
+        matcher: /^(?:blur|brightness|contrast|drop-shadow|grayscale|hue-rotate|invert|opacity|saturate|sepia)\(/,
+        layer: layer.Native
+    },
+    fill: {
+        layer: layer.Native
+    },
+    'stroke-dasharray': {
+        layer: layer.Native
+    },
+    'stroke-dashoffset': {
+        layer: layer.Native,
+        variables: [
+            'spacing'
+        ]
+    },
+    'stroke-width': {
+        ambiguousKeys: [
+            'stroke'
+        ],
+        ambiguousValues: [
+            common.NUMBER_VALUE_REGEX
+        ],
+        layer: layer.Native
+    },
+    stroke: {
+        layer: layer.Native
+    },
+    x: {
+        layer: layer.Native,
+        variables: [
+            'spacing'
+        ]
+    },
+    y: {
+        layer: layer.Native,
+        variables: [
+            'spacing'
+        ]
+    },
+    cx: {
+        layer: layer.Native,
+        variables: [
+            'spacing'
+        ]
+    },
+    cy: {
+        layer: layer.Native,
+        variables: [
+            'spacing'
+        ]
+    },
+    rx: {
+        layer: layer.Native
+    },
+    ry: {
+        layer: layer.Native
+    },
+    'grid-column-start': {
+        key: 'grid-col-start',
+        layer: layer.Native
+    },
+    'grid-column-end': {
+        key: 'grid-col-end',
+        layer: layer.Native
+    },
+    'grid-column-span': {
+        key: 'grid-col-span',
+        layer: layer.Shorthand,
+        transformValue (value) {
+            return 'span' + ' ' + value + '/' + 'span' + ' ' + value;
+        },
+        declare (value) {
+            return {
+                'grid-column': value
+            };
+        }
+    },
+    'grid-column': {
+        key: 'grid-col',
+        layer: layer.NativeShorthand
+    },
+    'grid-columns': {
+        key: 'grid-cols',
+        declare (value) {
+            return {
+                display: 'grid',
+                'grid-template-columns': 'repeat' + '(' + value + ',' + 'minmax' + '(' + 0 + ',' + 1 + 'fr' + '))'
+            };
+        },
+        layer: layer.Shorthand
+    },
+    'grid-row-start': {
+        layer: layer.Native
+    },
+    'grid-row-end': {
+        layer: layer.Native
+    },
+    'grid-row-span': {
+        layer: layer.Shorthand,
+        transformValue (value) {
+            return 'span' + ' ' + value + '/' + 'span' + ' ' + value;
+        },
+        declare (value) {
+            return {
+                'grid-row': value
+            };
+        }
+    },
+    'grid-row': {
+        layer: layer.NativeShorthand
+    },
+    'grid-rows': {
+        declare (value) {
+            return {
+                display: 'grid',
+                'grid-auto-flow': 'column',
+                'grid-template-rows': 'repeat' + '(' + value + ',' + 'minmax' + '(' + 0 + ',' + 1 + 'fr' + '))'
+            };
+        },
+        layer: layer.Shorthand
+    },
+    'grid-auto-columns': {
+        key: 'grid-auto-cols',
+        layer: layer.Native
+    },
+    'grid-auto-flow': {
+        key: 'grid-flow',
+        layer: layer.Native
+    },
+    'grid-auto-rows': {
+        layer: layer.Native
+    },
+    'grid-template-areas': {
+        layer: layer.Native
+    },
+    'grid-template-columns': {
+        key: 'grid-template-cols',
+        layer: layer.Native,
+        unit: 'rem'
+    },
+    'grid-template-rows': {
+        layer: layer.Native,
+        unit: 'rem'
+    },
+    'grid-template': {
+        layer: layer.NativeShorthand
+    },
+    'grid-area': {
+        layer: layer.NativeShorthand
+    },
+    grid: {
+        layer: layer.NativeShorthand
+    },
+    'column-gap': {
+        key: 'gap-x',
+        unit: 'rem',
+        layer: layer.Native,
+        variables: [
+            'spacing'
+        ]
+    },
+    'row-gap': {
+        key: 'gap-y',
+        unit: 'rem',
+        layer: layer.Native,
+        variables: [
+            'spacing'
+        ]
+    },
+    gap: {
+        unit: 'rem',
+        layer: layer.NativeShorthand,
+        variables: [
+            'spacing'
+        ]
+    },
+    order: {
+        key: 'o',
+        layer: layer.Native
+    },
+    'break-inside': {
+        layer: layer.Native
+    },
+    'break-before': {
+        layer: layer.Native
+    },
+    'break-after': {
+        layer: layer.Native
+    },
+    'aspect-ratio': {
+        key: 'aspect',
+        layer: layer.Native
+    },
+    'column-span': {
+        key: 'col-span',
+        layer: layer.Native
+    },
+    'align-content': {
+        subkey: 'ac',
+        layer: layer.Native
+    },
+    'align-items': {
+        subkey: 'ai',
+        layer: layer.Native
+    },
+    'align-self': {
+        subkey: 'as',
+        layer: layer.Native
+    },
+    'justify-content': {
+        subkey: 'jc',
+        layer: layer.Native
+    },
+    'justify-items': {
+        subkey: 'ji',
+        layer: layer.Native
+    },
+    'justify-self': {
+        subkey: 'js',
+        layer: layer.Native
+    },
+    'place-content': {
+        layer: layer.NativeShorthand
+    },
+    'place-items': {
+        layer: layer.NativeShorthand
+    },
+    'place-self': {
+        layer: layer.NativeShorthand
+    },
+    'list-style-position': {
+        ambiguousKeys: [
+            'list-style'
+        ],
+        ambiguousValues: [
+            'inside',
+            'outside'
+        ],
+        layer: layer.Native
+    },
+    'list-style-type': {
+        ambiguousKeys: [
+            'list-style'
+        ],
+        ambiguousValues: [
+            'disc',
+            'decimal'
+        ],
+        layer: layer.Native
+    },
+    'list-style-image': {
+        ambiguousKeys: [
+            'list-style'
+        ],
+        ambiguousValues: [
+            common.IMAGE_VALUE_REGEX
+        ],
+        layer: layer.Native
+    },
+    'list-style': {
+        layer: layer.NativeShorthand
+    },
+    'outline-color': {
+        ambiguousKeys: [
+            'outline'
+        ],
+        ambiguousValues: [
+            common.COLOR_VALUE_REGEX
+        ],
+        layer: layer.Native
+    },
+    'outline-offset': {
+        unit: 'rem',
+        layer: layer.Native,
+        variables: [
+            'spacing'
+        ]
+    },
+    'outline-style': {
+        ambiguousKeys: [
+            'outline'
+        ],
+        ambiguousValues: common.BORDER_STYLE_VALUES,
+        layer: layer.Native
+    },
+    'outline-width': {
+        ambiguousKeys: [
+            'outline'
+        ],
+        ambiguousValues: [
+            'medium',
+            'thick',
+            'thin',
+            common.NUMBER_VALUE_REGEX
+        ],
+        unit: 'rem',
+        layer: layer.Native
+    },
+    outline: {
+        unit: 'rem',
+        layer: layer.NativeShorthand,
+        variables: [
+            'outline-width',
+            'outline-style',
+            'outline-offset',
+            'outline-color'
+        ],
+        transformValueComponents: autofillSolidStyle
+    },
+    'accent-color': {
+        key: 'accent',
+        layer: layer.Native
+    },
+    appearance: {
+        layer: layer.Native
+    },
+    'caret-color': {
+        key: 'caret',
+        layer: layer.Native,
+        variables: [
+            'text'
+        ]
+    },
+    'scroll-behavior': {
+        layer: layer.Native
+    },
+    // scroll margin
+    'scroll-margin-left': {
+        key: 'scroll-ml',
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    'scroll-margin-right': {
+        key: 'scroll-mr',
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    'scroll-margin-top': {
+        key: 'scroll-mt',
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    'scroll-margin-bottom': {
+        key: 'scroll-mb',
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    'scroll-margin-x': {
+        key: 'scroll-mx',
+        unit: 'rem',
+        layer: layer.Shorthand,
+        declare (value) {
+            return {
+                'scroll-margin-left': value,
+                'scroll-margin-right': value
+            };
+        },
+        variables: [
+            'spacing'
+        ]
+    },
+    'scroll-margin-y': {
+        key: 'scroll-my',
+        unit: 'rem',
+        layer: layer.Shorthand,
+        declare (value) {
+            return {
+                'scroll-margin-top': value,
+                'scroll-margin-bottom': value
+            };
+        },
+        variables: [
+            'spacing'
+        ]
+    },
+    'scroll-margin': {
+        key: 'scroll-m',
+        unit: 'rem',
+        layer: layer.NativeShorthand,
+        variables: [
+            'spacing'
+        ]
+    },
+    // scroll padding
+    'scroll-padding-left': {
+        key: 'scroll-pl',
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    'scroll-padding-right': {
+        key: 'scroll-pr',
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    'scroll-padding-top': {
+        key: 'scroll-pt',
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    'scroll-padding-bottom': {
+        key: 'scroll-pb',
+        layer: layer.Native,
+        unit: 'rem',
+        variables: [
+            'spacing'
+        ]
+    },
+    'scroll-padding-x': {
+        key: 'scroll-px',
+        unit: 'rem',
+        layer: layer.Shorthand,
+        declare (value) {
+            return {
+                'scroll-padding-left': value,
+                'scroll-padding-right': value
+            };
+        },
+        variables: [
+            'spacing'
+        ]
+    },
+    'scroll-padding-y': {
+        key: 'scroll-py',
+        unit: 'rem',
+        layer: layer.Shorthand,
+        declare (value) {
+            return {
+                'scroll-padding-top': value,
+                'scroll-padding-bottom': value
+            };
+        },
+        variables: [
+            'spacing'
+        ]
+    },
+    'scroll-padding': {
+        key: 'scroll-p',
+        unit: 'rem',
+        layer: layer.NativeShorthand,
+        variables: [
+            'spacing'
+        ]
+    },
+    // scroll snap
+    'scroll-snap-align': {
+        ambiguousKeys: [
+            'scroll-snap'
+        ],
+        ambiguousValues: [
+            'start',
+            'end',
+            'center'
+        ],
+        layer: layer.Native
+    },
+    'scroll-snap-stop': {
+        ambiguousKeys: [
+            'scroll-snap'
+        ],
+        ambiguousValues: [
+            'normal',
+            'always'
+        ],
+        layer: layer.Native
+    },
+    'scroll-snap-type': {
+        ambiguousKeys: [
+            'scroll-snap'
+        ],
+        ambiguousValues: [
+            'x',
+            'y',
+            'block',
+            'inline',
+            'both'
+        ],
+        layer: layer.Native
+    },
+    'will-change': {
+        layer: layer.Native
+    },
+    'writing-mode': {
+        key: 'writing',
+        layer: layer.Native
+    },
+    direction: {
+        layer: layer.Native
+    },
+    'shape-outside': {
+        ambiguousKeys: [
+            'shape'
+        ],
+        ambiguousValues: [
+            /(?:inset|circle|ellipse|polygon|url|linear-gradient)\(.*\)/
+        ],
+        layer: layer.Native
+    },
+    'shape-margin': {
+        ambiguousKeys: [
+            'shape'
+        ],
+        ambiguousValues: [
+            common.NUMBER_VALUE_REGEX
+        ],
+        unit: 'rem',
+        layer: layer.Native,
+        variables: [
+            'spacing'
+        ]
+    },
+    'shape-image-threshold': {
+        layer: layer.Native
+    },
+    'clip-path': {
+        key: 'clip',
+        layer: layer.Native
+    },
+    quotes: {
+        layer: layer.Native
+    },
+    'mask-image': {
+        layer: layer.Native,
+        declare (value) {
+            return {
+                '-webkit-mask-image': value,
+                'mask-image': value
+            };
+        }
+    }
+};
+
+module.exports = rules;