tailwindcss/integrations/vite
Robin Malfait 0db226a222
Add Vue integration test with 1000 components (#20055)
This PR adds an integration test with Vue where we use a 1000 components
and where each component references a CSS file via `@reference`. Each
component has a unique class that uses `@apply`.

There are some discussions in
https://github.com/tailwindlabs/tailwindcss/discussions/16429 that
mention that this causes OOM issues. Right now I can't reproduce that,
and even with a 1000 components, it produces CSS in a reasonable time:
```
vite v7.3.3 building client environment for production...
✓ 2011 modules transformed.
dist/index.html                   0.23 kB │ gzip:  0.18 kB
dist/assets/index-DNVNFkYQ.css  106.65 kB │ gzip: 10.79 kB
dist/assets/index-B8v7EbAN.js   223.84 kB │ gzip: 49.81 kB
✓ built in 3.17s
```

I also started a Vite server and triggered file changes to see if the
memory would grow forever, which it didn't. After a 1000 changes,
everything still behaves smoothly:
<img width="1694" height="1856" alt="image"
src="https://github.com/user-attachments/assets/b16800ae-4dce-4f0d-9d97-25f4cab21c1c"
/>

Making changes manually to a single component, result in proper HMR
request that update the browser:


https://github.com/user-attachments/assets/5c79ffc6-2329-4341-9d25-82b000093e31

This test is here to make sure that it keeps working in the future.

---

If I remove all `@reference` references, and usages of `@apply`, then
the build time is indeed faster:
```
vite v7.3.3 building client environment for production...
✓ 2011 modules transformed.
dist/index.html                   0.23 kB │ gzip:  0.18 kB
dist/assets/index-CcxXccJ1.css  106.61 kB │ gzip: 10.76 kB
dist/assets/index-M92YFF0G.js   223.84 kB │ gzip: 49.81 kB
✓ built in 1.97s
```

So we go from `1.97s` → `3.17s`, which is a `1.2s` increase when you use
`@reference` with `@apply` in 1000 files for a fresh build.

I also saw some comments about the CSS growing whenever `@reference` was
used, but as you can see in the snippets above they are at a stable
size.

## Test plan

1. All tests still pass

[ci-all] For testing on Windows / macOS

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
2026-05-14 15:38:51 +02:00
..
astro.test.ts Fallback to config.createResolver for client and ssr environments in @tailwindcss/vite (#19679) 2026-02-17 19:59:57 +00:00
config.test.ts feat: add Vite 7 support to the @tailwindcss/vite plugin (#18384) 2025-06-24 12:31:17 -04:00
css-modules.test.ts feat: add Vite 7 support to the @tailwindcss/vite plugin (#18384) 2025-06-24 12:31:17 -04:00
html-style-blocks.test.ts feat: add Vite 7 support to the @tailwindcss/vite plugin (#18384) 2025-06-24 12:31:17 -04:00
ignored-packages.test.ts feat: add Vite 7 support to the @tailwindcss/vite plugin (#18384) 2025-06-24 12:31:17 -04:00
index.test.ts Improve codebase quality (#19999) 2026-04-30 23:32:37 +02:00
multi-root.test.ts feat: add Vite 7 support to the @tailwindcss/vite plugin (#18384) 2025-06-24 12:31:17 -04:00
nuxt.test.ts Make integration tests more stable in CI (#19995) 2026-04-30 23:23:36 +02:00
other-transforms.test.ts feat: add Vite 7 support to the @tailwindcss/vite plugin (#18384) 2025-06-24 12:31:17 -04:00
qwik.test.ts Vite: Don't register the current CSS file as a dependency on itself (#17533) 2025-04-03 18:50:16 +02:00
react-router.test.ts Cleanup inconsistencies related to (regex) escapes (#19804) 2026-03-15 22:04:58 +01:00
resolvers.test.ts 4.3.0 (#20023) 2026-05-08 22:03:59 +02:00
solidstart.test.ts Fix Vite issues with SolidStart (#16052) 2025-01-30 16:58:20 +01:00
source-maps.test.ts feat: add Vite 7 support to the @tailwindcss/vite plugin (#18384) 2025-06-24 12:31:17 -04:00
ssr.test.ts Add support for Vite 8 in @tailwindcss/vite (#19790) 2026-03-12 20:54:34 +01:00
svelte.test.ts Cleanup inconsistencies related to (regex) escapes (#19804) 2026-03-15 22:04:58 +01:00
sveltekit.test.ts Fix issue around resolving paths in @tailwindcss/vite (#19947) 2026-04-21 14:11:46 +02:00
url-rewriting.test.ts feat: add Vite 7 support to the @tailwindcss/vite plugin (#18384) 2025-06-24 12:31:17 -04:00
virtual-modules.test.ts Vite: Don't crash with virtual module dependencies (#16780) 2025-02-25 11:29:58 +01:00
vue.test.ts Add Vue integration test with 1000 components (#20055) 2026-05-14 15:38:51 +02:00