windicss

import { Processor, HTMLParser } from 'windicss'; import { readFileSync, writeFileSync } from 'fs'; import { resolve } from 'path'; async function generateWindiCSS() { const htmlContent = ` <div class="p-4 bg-blue-500 text-white rounded shadow-lg"> <h1 class="text-2xl font-bold mb-2">Hello Windi CSS!</h1> <p class="text-sm">This is a paragraph with some utility classes.</p> <button class="px-3 py-2 bg-green-500 hover:bg-green-600 rounded">Click Me</button> </div> `; // Initialize the Windi CSS processor const processor = new Processor(); // Parse HTML to extract utility classes const htmlParser = new HTMLParser(htmlContent); const { classes } = htmlParser.parseClasses(); // Interpret the extracted classes to generate Windi CSS utilities const interpreted = processor.interpret(classes.join(' ')); // Generate the actual CSS const { css } = await interpreted.generate(); // Optionally, include preflight base styles const preflightSheet = processor.preflight(); const preflightCSS = preflightSheet.build(); const finalCSS = `${preflightCSS}\n${css}`; const outputPath = resolve('./dist/windicss-output.css'); writeFileSync(outputPath, finalCSS); console.log(`Windi CSS generated and written to ${outputPath}`); } generateWindiCSS().catch(console.error);