vue-cssgen/rules/modifiers.js

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

import rules from './rules.js';

const breakpoints = {
    'sm': '640px',
    'md': '768px',
    'lg': '1024px',
};

export default [
    {
        match: /^hover:(.+)$/,
        css: cls => {
            const baseClass = cls.replace(/^hover:/, '');
            // Специальная обработка для hover:bg-blue-700
            if (baseClass === 'bg-blue-700') {
                return `.hover\\:bg-blue-700:hover { background: #1d4ed8; }`;
            }
            const rule = rules.find(r => r.match.test(baseClass));
            if (!rule) return null;
            const baseCss = rule.css(baseClass);
            if (!baseCss) return null;
            return baseCss.replace(`.${baseClass}`, `.hover\\:${baseClass}:hover`);
        },
        group: 'modifier',
        desc: 'hover modifier',
        modifiable: true,
        examples: ['hover:p-2', 'hover:bg-blue', 'hover:fs-lg'],
        values: null,
        prefix: 'hover:p-2'
    },
    {
        match: /^focus:(.+)$/,
        css: cls => {
            const baseClass = cls.replace(/^focus:/, '');
            const rule = rules.find(r => r.match.test(baseClass));
            if (!rule) return null;
            const baseCss = rule.css(baseClass);
            if (!baseCss) return null;
            return baseCss.replace(`.${baseClass}`, `.focus\\:${baseClass}:focus`);
        },
        group: 'modifier',
        desc: 'focus modifier',
        modifiable: true,
        examples: ['focus:p-2', 'focus:bg-blue', 'focus:fs-lg'],
        values: null,
        prefix: 'focus:p-2'
    },
    {
        match: /^(sm|md|lg):(.+)$/,
        css: cls => {
            const [, breakpoint, baseClass] = cls.match(/^(sm|md|lg):(.+)$/);
            const rule = rules.find(r => r.match.test(baseClass));
            if (!rule) return null;
            const baseCss = rule.css(baseClass);
            if (!baseCss) return null;
            const bp = breakpoints[breakpoint];
            return `@media (min-width: ${bp}) { ${baseCss.replace(`.${baseClass}`, `.${cls}`)} }`;
        },
        group: 'modifier',
        desc: 'responsive modifier',
        modifiable: true,
        examples: ['sm:p-2', 'md:bg-blue', 'lg:fs-lg'],
        values: breakpoints,
        prefix: '(sm|md|lg):'
    },
];