vue-cssgen/rules/fontSizes.js

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

const fontSizeValues = {
    'xs': '0.75rem',
    'sm': '0.875rem',
    'base': '1rem',
    'lg': '1.125rem',
    'xl': '1.25rem',
    '2xl': '1.5rem',
    '3xl': '1.875rem',
    '7xl': '4.5rem',
    '8xl': '6rem',
};

export default [
    {
        match: /^(fs|text)-(xs|sm|base|lg|xl|2xl|3xl|7xl|8xl)$/,
        css: cls => {
            const m = cls.match(/^(fs|text)-(xs|sm|base|lg|xl|2xl|3xl|7xl|8xl)$/);
            if (!m) return null;
            const val = fontSizeValues[m[2]];
            return val ? `.${cls} { font-size: ${val}; }` : null;
        },
        group: 'font',
        desc: 'font-size (by key)',
        modifiable: true,
        examples: ['fs-base', 'fs-lg', 'text-xl', 'text-2xl'],
        values: fontSizeValues,
        prefix: '(fs|text)-'
    },
    {
        // .fs_1-5rem -> font-size: 1.5rem;  .fs_110p -> font-size: 110%;
        match: /^fs_([0-9]+)-(?:([0-9]+))?(rem|px|em)$|^fs_([0-9]+)p$/,
        css: cls => {
            // fs_1-5rem, fs_18px, fs_110p
            let m;
            if ((m = cls.match(/^fs_([0-9]+)-([0-9]+)(rem|px|em)$/))) {
                // пример: fs_1-5rem
                return `.${cls} { font-size: ${m[1]}.${m[2]}${m[3]}; }`;
            } else if ((m = cls.match(/^fs_([0-9]+)(rem|px|em)$/))) {
                // пример: fs_18px
                return `.${cls} { font-size: ${m[1]}${m[2]}; }`;
            } else if ((m = cls.match(/^fs_([0-9]+)p$/))) {
                // пример: fs_110p
                return `.${cls} { font-size: ${m[1]}%; }`;
            }
            return null;
        },
        group: 'font',
        desc: 'font-size (custom value)',
        modifiable: true,
        examples: ['fs_18px', 'fs_1-5rem', 'fs_110p'],
        values: null,
        prefix: 'fs_'
    },
];