Skip to content

Commit b75828d

Browse files
committed
improvement 3: skip work if no new candidates are detected
- We already know a set of candidates from previous runs. - We also already know a set of candidates that are invalid and don't produce anything. This means that an incremental rebuild could give us a new set of candidates that either already exist or are invalid. If nothing changes, then we can re-use the compiled CSS. This actually happens more often than you think, and the bigger your project is the better this optimization will be. For example: ``` // Imagine file A exists: <div class="flex items-center justify-center"></div> <button class="text-red-500">Delete</button> ``` ``` // Now you add a second file B: <div class="text-red-500 flex"></div> ``` You just created a brand new file with a bunch of HTML elements and classes, yet all of the candidates in file B already exist in file A, so nothing changes to the actual generated CSS. Now imagine the other hundreds of files that already contain hundreds of classes. The beauty of this optimization is two-fold: - On small projects, compiling is very fast even without this check. This means it is performant. - On bigger projects, we will be able to re-use existing candidates. This means it stays performant.
1 parent 86493fa commit b75828d

File tree

1 file changed

+10
-0
lines changed

1 file changed

+10
-0
lines changed

packages/tailwindcss/src/index.ts

+10
Original file line numberDiff line numberDiff line change
@@ -187,13 +187,23 @@ export function compile(
187187

188188
return {
189189
rebuild(newRawCandidates: string[]) {
190+
let didChange = false
191+
190192
// Add all new candidates unless we know that they are invalid.
193+
let prevSize = allValidCandidates.size
191194
for (let candidate of newRawCandidates) {
192195
if (!designSystem.isInvalidCandidate(candidate)) {
193196
allValidCandidates.add(candidate)
197+
didChange ||= allValidCandidates.size !== prevSize
194198
}
195199
}
196200

201+
// If no new candidates were added, we can return the original CSS. This
202+
// currently assumes that we only add new candidates and never remove any.
203+
if (!didChange) {
204+
return compiledCss
205+
}
206+
197207
if (tailwindUtilitiesNode) {
198208
let previousAstNodeCount = designSystem.getAstNodeSize()
199209
let newNodes = compileCandidates(allValidCandidates, designSystem).astNodes

0 commit comments

Comments
 (0)