vue-cssgen/generate-css.js

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

#!/usr/bin/env node

import rules from './rules/rules.js';
import fs from 'fs';

const cssRootVars = `
:root {
  --tw-gradient-from: #3b82f6;
  --tw-gradient-to: #9333ea;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
`;

const cssChunks = [];
let needGradientVars = false;

for ( const rule of rules ) {
    if (rule.values && typeof rule.values === 'object') {
        for ( const key in rule.values ) {
            const className = rule.prefix + key;
            if (rule.match.test(className)) {
                const css = rule.css(className);
                if (css) {
                    if (css.includes('var(--tw-gradient-stops)')) needGradientVars = true;
                    cssChunks.push(css);
                }
            }
        }
    } else if (Array.isArray(rule.examples)) {
        for ( const example of rule.examples ) {
            if (rule.match.test(example)) {
                const css = rule.css(example);
                if (css) {
                    if (css.includes('var(--tw-gradient-stops)')) needGradientVars = true;
                    cssChunks.push(css);
                }
            }
        }
    }
}

let fullCss = cssChunks.join('\n\n');
if (needGradientVars) {
    fullCss = cssRootVars.trim() + '\n\n' + fullCss;
}

fs.writeFileSync('all-classes.css', fullCss, 'utf8');
console.log('CSS-файл сгенерирован: all-classes.css');