vue-cssgen/rules/container.js

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

const maxWidthValues = {
    '4xl': '56rem',
    '5xl': '64rem',
    '6xl': '72rem',
};

export default [
    {
        match: /^container$/,
        css: cls => {
            return `.${cls} { width: 100%; margin-left: auto; margin-right: auto; }`;
        },
        group: 'layout',
        desc: 'container',
        modifiable: true,
        examples: ['container'],
        values: null,
        prefix: 'container'
    },
    {
        match: /^max-w-(\d+xl)$/,
        css: cls => {
            const val = maxWidthValues[cls.match(/^max-w-(\d+xl)$/)[1]];
            return val ? `.${cls} { max-width: ${val}; }` : null;
        },
        group: 'sizing',
        desc: 'max-width',
        modifiable: true,
        examples: ['max-w-4xl', 'max-w-5xl', 'max-w-6xl'],
        values: maxWidthValues,
        prefix: 'max-w-'
    },
];