vue-cssgen/rules/flex.js

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

const flexValues = {
    'flex': 'flex',
    'inline-flex': 'inline-flex',
    'inline-block': 'inline-block',
};

const flexGrowValues = {
    '1': '1',
};

const justifyValues = {
    'start': 'flex-start',
    'end': 'flex-end',
    'center': 'center',
    'between': 'space-between',
    'around': 'space-around',
    'evenly': 'space-evenly',
};

export default [
    {
        match: /^flex-(flex|inline-flex)$/,
        css: cls => {
            const m = cls.match(/^flex-(flex|inline-flex)$/);
            if (!m) return null;
            const val = flexValues[m[1]];
            return val ? `.${cls} { display: ${val}; }` : null;
        },
        group: 'flex',
        desc: 'display flex',
        modifiable: true,
        examples: ['flex-flex', 'flex-inline-flex'],
        values: flexValues,
        prefix: 'flex-'
    },
    {
        match: /^flex-(row|row-reverse|col|col-reverse)$/,
        css: cls => {
            const m = cls.match(/^flex-(row|row-reverse|col|col-reverse)$/);
            if (!m) return null;
            // col -> column, col-reverse -> column-reverse
            let val = m[1]
                .replace(/^col$/, 'column')
                .replace(/^col-reverse$/, 'column-reverse');
            return `.${cls} { flex-direction: ${val}; }`;
        },
        group: 'flex',
        desc: 'flex-direction',
        modifiable: true,
        examples: ['flex-row', 'flex-col', 'flex-row-reverse', 'flex-col-reverse'],
        values: null,
        prefix: 'flex-(row|row-reverse|col|col-reverse)'
    },
    {
        match: /^justify-(start|end|center|between|around|evenly)$/,
        css: cls => {
            const m = cls.match(/^justify-(start|end|center|between|around|evenly)$/);
            if (!m) return null;
            const val = justifyValues[m[1]];
            return val ? `.${cls} { justify-content: ${val}; }` : null;
        },
        group: 'flex',
        desc: 'justify-content',
        modifiable: true,
        examples: ['justify-center', 'justify-between', 'justify-around', 'justify-start', 'justify-end', 'justify-evenly'],
        values: justifyValues,
        prefix: 'justify-'
    },
    {
        match: /^items-(start|end|center|baseline|stretch)$/,
        css: cls => {
            const m = cls.match(/^items-(start|end|center|baseline|stretch)$/);
            if (!m) return null;
            const val = m[1];
            return `.${cls} { align-items: ${val}; }`;
        },
        group: 'flex',
        desc: 'align-items',
        modifiable: true,
        examples: ['items-center', 'items-start', 'items-stretch', 'items-end', 'items-baseline'],
        values: null,
        prefix: 'items-(start|end|center|baseline|stretch)'
    },
    {
        match: /^flex-(\d+)$/,
        css: cls => {
            const m = cls.match(/^flex-(\d+)$/);
            if (!m) return null;
            const val = flexGrowValues[m[1]];
            return val ? `.${cls} { flex: ${val} 1 0%; }` : null;
        },
        group: 'flex',
        desc: 'flex grow',
        modifiable: true,
        examples: ['flex-1'],
        values: flexGrowValues,
        prefix: 'flex-'
    },
    {
        match: /^inline-block$/,
        css: cls => {
            return `.${cls} { display: inline-block; }`;
        },
        group: 'display',
        desc: 'display inline-block',
        modifiable: true,
        examples: ['inline-block'],
        values: null,
        prefix: 'inline-block'
    },
];