vue-cssgen/rules/gradients.js

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

export default [
    {
        match: /^bg-gradient-to-(t|tr|r|br|b|bl|l|tl)$/,
        css: cls => {
            const direction = cls.match(/^bg-gradient-to-(t|tr|r|br|b|bl|l|tl)$/)[1];
            let value;

            switch (direction) {
                case 't':
                    value = 'to top';
                    break;
                case 'tr':
                    value = 'to top right';
                    break;
                case 'r':
                    value = 'to right';
                    break;
                case 'br':
                    value = 'to bottom right';
                    break;
                case 'b':
                    value = 'to bottom';
                    break;
                case 'bl':
                    value = 'to bottom left';
                    break;
                case 'l':
                    value = 'to left';
                    break;
                case 'tl':
                    value = 'to top left';
                    break;
                default:
                    return null;
            }

            return `.${cls} { background-image: linear-gradient(${value}, var(--tw-gradient-stops)); }`;
        },
        group: 'background',
        desc: 'gradient direction',
        modifiable: true,
        examples: ['bg-gradient-to-b', 'bg-gradient-to-br', 'bg-gradient-to-r'],
        values: null,
        prefix: 'bg-gradient-to-'
    },
];