refactor(compiler): parse tailwind utilities with lightningcss

This commit is contained in:
Rahim
2026-06-23 23:54:59 -07:00
parent 9e7d3da397
commit ce4178778e
2 changed files with 238 additions and 69 deletions
@@ -639,6 +639,14 @@ function App(){ return <PlayButton className={iconButton}/>; }`;
expect(collapse(css)).toContain(collapse('.foo{display:flex;}'));
});
it('preserves multi-branch utilities in extracted CSS assets', async () => {
const source = `function App(){ return <Foo className="container"/>; }`;
const { assets } = await compileTailwind(source, { mode: 'extract', design });
const css = assets[0]!.source;
expect(collapse(css)).toContain(collapse('.foo{width:100%;}'));
expect(css).toMatch(/@media[^{]+{\s*\.foo\s*{\s*max-width:/);
});
it('emits referenced theme variables in extracted CSS', async () => {
// `p-4` lowers to `padding: calc(var(--spacing) * 4)` — the output must
// define `--spacing` so it resolves without a separate Tailwind theme.