@richaadgigi/stylexui
Version:
Build responsive, beautiful interfaces faster than ever with utility-first classes and smart defaults. No bloat. No fuss. Just results.
71 lines (59 loc) • 2.22 kB
JavaScript
/**
* @richaadgigi/stylexui — vite-plugin-stylexui
*
* Vite plugin to automatically:
* 1. Scan source files for dynamic xui utility classes (e.g. xui-pt-[24px])
* 2. Generate a static CSS file: public/xui-generated.css
* 3. Re-extract on every file change during dev
*
* Usage in vite.config.ts:
* import { stylexui } from '@richaadgigi/stylexui/vite';
* export default defineConfig({
* plugins: [stylexui()],
* });
*
* Then add to your index.html / root layout <head>:
* <link rel="stylesheet" href="/xui-generated.css" />
*/
;
const path = require('path');
const { extractDynamicCSS } = require('./scripts/extract-dynamic-css');
function stylexuiPlugin(xuiOptions = {}) {
let projectRoot = process.cwd();
const getOptions = () => {
const outputFileName = xuiOptions.outputFile || 'xui-generated.css';
const publicDir = path.join(projectRoot, 'public');
const outputPath = path.join(publicDir, outputFileName);
const srcPatterns = xuiOptions.srcPatterns || [
'src/**/*.{ts,tsx,js,jsx,html,mdx}',
'index.html'
];
return { outputPath, srcPatterns, cwd: projectRoot };
};
const runExtraction = async () => {
const { outputPath, srcPatterns, cwd } = getOptions();
try {
await extractDynamicCSS({ outputPath, srcPatterns, cwd });
} catch (e) {
console.warn('[stylexui] CSS extraction warning:', e.message);
}
};
return {
name: 'vite-plugin-stylexui',
configResolved(config) {
projectRoot = config.root || process.cwd();
},
async buildStart() {
await runExtraction();
},
async handleHotUpdate({ file }) {
// Only re-scan if a source file changed (not the generated CSS itself)
if (file.includes('node_modules') || file.includes('xui-generated.css')) return;
// Re-run extraction on any source change to catch new classes
await runExtraction();
}
};
}
module.exports = stylexuiPlugin;
module.exports.default = stylexuiPlugin;
module.exports.stylexui = stylexuiPlugin;