Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use local user css cache for apply #7524

Merged
merged 13 commits into from
Feb 25, 2022

Conversation

thecrypticace
Copy link
Contributor

Background

The PR #6580 caused any file using apply to create a new context. This meant that any file that used apply would also carry along the entire content dependency tree. Updating any file covered by content would cause these files to recompile. The original cause of the problem that #6580 was fixing turned out to be a cache invalidation issue. Since user CSS was added to the context things could end up incorrectly shared across files when it comes to apply. However, this would only happen once and future updates would not invalidate the cache. This would manifest as an error about the applied classes being missing in some cases.

Why did it seem to fix the original problem?

By creating a new context for any file containing apply it caused the context to get re-created every time that file was saved. Because of this the CSS was re-scanned and added to the internal user CSS cache that we had on the context.

What are we going to do instead

  1. I've partially reverted Allow all classes for @apply #6580 to ensure that contexts are reused when using @apply. The reason this is safe is because the config can affect apply but content files cannot.
  2. I've added an additional cache for apply to look at the root postcss node that's being passed in instead of internally storing user CSS as individual tailwind plugins.

This is still a work in progress. Some of the code here needs to be cleaned up first.

Fixes #7480

@thecrypticace thecrypticace force-pushed the fix/context-invalidation-for-apply branch 2 times, most recently from 895e521 to 6c4aa56 Compare February 24, 2022 03:13
We were storing user CSS in the context so we could use it with apply. The problem is that this CSS does not get updated on save unless it has a tailwind directive in it resulting in stale apply caches. This could result in either stale generation or errors about missing classes.
@thecrypticace thecrypticace force-pushed the fix/context-invalidation-for-apply branch 2 times, most recently from 549f40c to 8fccb99 Compare February 24, 2022 03:25
@thecrypticace thecrypticace marked this pull request as ready for review February 24, 2022 03:25
The previous method was very inefficient as PostCSS was recursively cloning the entire tree. We only care about cloning the node itself as we’re replacing its children. This is about 4x faster on large CSS blobs.
Copy link
Member

@RobinMalfait RobinMalfait left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Functionally it seems to work great, nice!
I do have some questions / nitpicks.

src/lib/expandApplyAtRules.js Outdated Show resolved Hide resolved
src/lib/expandApplyAtRules.js Outdated Show resolved Hide resolved
src/lib/expandApplyAtRules.js Show resolved Hide resolved
src/lib/expandApplyAtRules.js Outdated Show resolved Hide resolved
tests/apply.test.js Outdated Show resolved Hide resolved
src/lib/expandApplyAtRules.js Outdated Show resolved Hide resolved
@thecrypticace thecrypticace merged commit 910b655 into master Feb 25, 2022
@thecrypticace thecrypticace deleted the fix/context-invalidation-for-apply branch February 25, 2022 13:35
@hivokas
Copy link
Contributor

hivokas commented Feb 26, 2022

@thecrypticace thanks for working on that!

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.

HMR is really slow when there are a lot of Vue components with <style>
3 participants