tailwindcss/integrations
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
..
cli Fix TS2742 error when inferring exported Config type (#19707) 2026-04-29 18:48:08 +00:00
oxide chore: fix some typos in comments (#19475) 2025-12-22 13:09:19 +00:00
postcss Improve codebase quality (#19999) 2026-04-30 23:32:37 +02:00
upgrade Make upgrade tooling more stable (#19846) 2026-03-24 17:24:12 +01:00
vite Add Vue integration test with 1000 components (#20055) 2026-05-14 15:38:51 +02:00
webpack Fix webpack loader cache key for resource queries (#19723) 2026-03-20 16:34:11 +00:00
package.json Update dedent 1.7.0 → 1.7.1 (patch) (#19484) 2025-12-24 10:31:02 -05:00
utils.ts Make integration tests more stable in CI (#19995) 2026-04-30 23:23:36 +02:00
vitest.config.ts Improve integration tests (stability + performance) (#15125) 2024-12-12 13:48:56 +01:00