vue-cssgen/rules/grid.js

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

const gridValues = {
    'grid': 'grid',
    'inline-grid': 'inline-grid',
};

export default [
    {
        match: /^grid-(grid|inline-grid)$/,
        css: cls => {
            const val = gridValues[cls.match(/^grid-(grid|inline-grid)$/)[1]];
            return val ? `.${cls} { display: ${val}; }` : null;
        },
        group: 'grid',
        desc: 'display grid',
        modifiable: true,
        examples: ['grid-grid', 'grid-inline-grid'],
        values: gridValues,
        prefix: 'grid-'
    },
    {
        match: /^grid-cols-(\d+)$/,
        css: cls => {
            const val = cls.match(/^grid-cols-(\d+)$/)[1];
            return `.${cls} { grid-template-columns: repeat(${val}, minmax(0, 1fr)); }`;
        },
        group: 'grid',
        desc: 'grid-template-columns',
        modifiable: true,
        examples: ['grid-cols-2', 'grid-cols-4'],
        values: null,
        prefix: 'grid-cols-2'
    },
];