skeleton/packages/plugin/scripts/compile-css-to-js.ts

import postcss, { type PluginCreator } from 'postcss';
import postcssJs from 'postcss-js';
import { readFileSync } from 'fs';
import postcssImport from 'postcss-import';
import tw from 'tailwindcss';
import type { Config } from 'tailwindcss';
import { corePlugin } from '../src/tailwind/core.js';

// tailwind needs to fix their exports :]
const tailwindcss = tw as unknown as PluginCreator<string | Config | { config: string | Config }>;

// Transpiles all of our library's CSS to JS
export async function transpileCssToJs(cssEntryPath: string, plugins: Config['plugins'] = []) {
	const selectors: string[] = [];

	// We'll first get all the custom class names,
	// then we can feed that into the TW preprocessor as the `content`
	// so that TW can detect and generate them properly

	const css = readFileSync(cssEntryPath, 'utf8');
	const processor = postcss([postcssImport()]);
	const result = await processor.process(css, { from: cssEntryPath });

	result.root.walk((node) => {
		if (node.type === 'rule') {
			selectors.push(...node.selectors);
		}
	});

	// Custom tailwind config so that we only use the necessities
	const twConfig = {
		darkMode: 'class',
		content: [{ raw: selectors.join(' ') }],
		plugins: [
			corePlugin,
			// add skeleton component classes for the base styles
			...plugins
		]
	} satisfies Config;

	const result2 = await postcss([postcssImport(), tailwindcss(twConfig)]).process(css, { from: cssEntryPath });
	if (result2.root.type === 'document') throw Error('This should never happen');

	const cssInJs = postcssJs.objectify(result2.root);

	return cssInJs;
}