Skip to content

Conversation

@adamwathan
Copy link
Member

Previously, every @apply call would traverse the entire CSS tree looking for a matching class. This is dumb since the CSS tree doesn't change (except for the contents of classes using @apply).

This PR changes this to build a lookup table at the beginning of the whole process so classes can be picked out by index instead of searching. This makes everything a lot faster (10,000 @apply rules dropped from 158s to 8s on my machine.)

The one risk here is if anyone was previously using multi-level @apply calls, like:

.foo {
  color: red;
}

.bar {
  @apply .foo;
}

.baz {
  @apply .bar;
}

Previously this would work (by coincidence, because these rules happened to be in the right order for it to work), but now it won't. This has never been "supported" so I'm not too worried about it, but we can certainly make the failure around this more explicit in a future change.

@adamwathan adamwathan merged commit eacc463 into master Mar 1, 2018
@adamwathan adamwathan deleted the faster-at-apply branch March 1, 2018 01:34
@kbond
Copy link

kbond commented Mar 1, 2018

It was my understanding that classes I created before @tailwind utilities; could be used with @apply after @tailwind utilities;. Will this no longer work with this change?

@adamwathan
Copy link
Member Author

That will still 100% work; it's still using your CSS as the basis for determining what is available to @apply 👍

@kbond
Copy link

kbond commented Mar 1, 2018

Awesome, this cut my build time in half!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants