vue-cssgen/rules/spacing.js

Инструмент для автоматизации работы со стилями в Vue 3-проектах

const spacingValues = {
    '0': '0',
    '1': '0.25rem',
    '2': '0.5rem',
    '3': '0.75rem',
    '4': '1rem',
    '6': '1.5rem',
    '8': '2rem',
    '10': '2.5rem',
    '12': '3rem',
    '16': '4rem',
    'auto': 'auto',
};

export default [
    {
        match: /^p-(\d+)$/,
        css: cls => {
            const val = spacingValues[cls.match(/^p-(\d+)$/)[1]];
            return val ? `.${cls} { padding: ${val}; }` : null;
        },
        group: 'spacing',
        desc: 'padding',
        modifiable: true,
        examples: ['p-1', 'p-2', 'p-4'],
        values: spacingValues,
        prefix: 'p-'
    },
    {
        match: /^m-(\d+)$/,
        css: cls => {
            const val = spacingValues[cls.match(/^m-(\d+)$/)[1]];
            return val ? `.${cls} { margin: ${val}; }` : null;
        },
        group: 'spacing',
        desc: 'margin',
        modifiable: true,
        examples: ['m-1', 'm-2', 'm-4'],
        values: spacingValues,
        prefix: 'm-'
    },
    {
        match: /^gap-(\d+)$/,
        css: cls => {
            const val = spacingValues[cls.match(/^gap-(\d+)$/)[1]];
            return val ? `.${cls} { gap: ${val}; }` : null;
        },
        group: 'spacing',
        desc: 'gap',
        modifiable: true,
        examples: ['gap-2', 'gap-4'],
        values: spacingValues,
        prefix: 'gap-'
    },
    {
        match: /^m([trblxy])-(\d+|auto)$/,
        css: cls => {
            const [, dir, size] = cls.match(/^m([trblxy])-(\d+|auto)$/);
            const val = spacingValues[size];
            if (!val) return null;

            let prop;
            switch (dir) {
                case 't':
                    prop = 'margin-top';
                    break;
                case 'r':
                    prop = 'margin-right';
                    break;
                case 'b':
                    prop = 'margin-bottom';
                    break;
                case 'l':
                    prop = 'margin-left';
                    break;
                case 'x':
                    return `.${cls} { margin-left: ${val}; margin-right: ${val}; }`;
                case 'y':
                    return `.${cls} { margin-top: ${val}; margin-bottom: ${val}; }`;
                default:
                    return null;
            }

            return `.${cls} { ${prop}: ${val}; }`;
        },
        group: 'spacing',
        desc: 'margin (t,r,b,l,x,y)',
        modifiable: true,
        examples: ['mt-6', 'mb-10', 'mx-auto'],
        values: spacingValues,
        prefix: 'm(t|r|b|l|x|y)-'
    },
    {
        match: /^p([trblxy])-(\d+)$/,
        css: cls => {
            const [, dir, size] = cls.match(/^p([trblxy])-(\d+)$/);
            const val = spacingValues[size];
            if (!val) return null;

            let prop;
            switch (dir) {
                case 't':
                    prop = 'padding-top';
                    break;
                case 'r':
                    prop = 'padding-right';
                    break;
                case 'b':
                    prop = 'padding-bottom';
                    break;
                case 'l':
                    prop = 'padding-left';
                    break;
                case 'x':
                    return `.${cls} { padding-left: ${val}; padding-right: ${val}; }`;
                case 'y':
                    return `.${cls} { padding-top: ${val}; padding-bottom: ${val}; }`;
                default:
                    return null;
            }

            return `.${cls} { ${prop}: ${val}; }`;
        },
        group: 'spacing',
        desc: 'padding (t,r,b,l,x,y)',
        modifiable: true,
        examples: ['pt-16', 'pb-10', 'py-3'],
        values: spacingValues,
        prefix: 'p(t|r|b|l|x|y)-'
    },
    {
        match: /^space-([xy])-(\d+)$/,
        css: cls => {
            const [, dir, size] = cls.match(/^space-([xy])-(\d+)$/);
            const val = spacingValues[size];
            if (!val) return null;

            if (dir === 'y') {
                return `.${cls} > :not([hidden]) ~ :not([hidden]) { margin-top: ${val}; }`;
            } else if (dir === 'x') {
                return `.${cls} > :not([hidden]) ~ :not([hidden]) { margin-left: ${val}; }`;
            }

            return null;
        },
        group: 'spacing',
        desc: 'space between children',
        modifiable: true,
        examples: ['space-y-4', 'space-x-2'],
        values: spacingValues,
        prefix: 'space-(x|y)-'
    },
];