fix(webpack): pass dependencies to cached css files #1080
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@jneander amazing! Thank you! May I ask you to run |
jneander
force-pushed
the
watched-css-dependencies
branch
from
666245c to
b97495d
Compare
When webpack is run with `--watch` or with `webpack-dev-server`, the generated css output will not be updated when dependencies imported into Linaria JavaScript source files, causing the resulting output to be stale. The changes to the `ICache` interfaces are backward-compatible to avoid breaking any external implementations provided to the webpack builders using the prior versions of the interfaces.
jneander
force-pushed
the
watched-css-dependencies
branch
from
b97495d to
98422a2
Compare
|
@Anber Of course! Apologies for missing that step. 😞 I've added that with the latest changes. Do let me know if there's anything you'd like changed. Good news for the webpack 4 version: The types in DefinitelyTyped have been updated! So I went ahead and reincorporated the changes into the |
Anber
approved these changes
Oct 17, 2022
|
Thank you, @Anber! 🎉 |
|
@all-contributors please add @jneander for code |
|
I've put up a pull request to add @jneander! 🎉 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
When webpack is run with
--watchor withwebpack-dev-server, the generated css output will not be updated when dependencies imported into Linaria JavaScript source files, causing the resulting output to be stale.The changes to the
ICacheinterfaces are backward-compatible to avoid breaking any external implementations provided to the webpack builders using the prior versions of the interfaces.Motivation
This addresses #1077.
Summary
Webpack allows adding dependencies to modules. Since the
*.linaria.jsand*.linaria.cssfiles need to be in sync in order to generate the correct changes in webpack's watch mode, the css loader needs to have access to that dependency list so that it can tell webpack when it needs to change. The logical place for this was in the cache provider. But rather than update the cached data type and break the contract on the api, I opted to add an optional set of methods which implementers don't need to worry about unless they need to address this same issue using their own cache implementation.These changes apply to both
@linaria/webpack4-loaderand@linaria/webpack5-loader.Test plan
The proof-of-concept for this fix came from hacking the
@linaria/webpack5-loaderinstallation used in another project. When the changes are applied to the installation, the desired behavior is realized. The intended behavior has been verified using a demo project for both the webpack 4 and webpack 5 versions.To verify the behavior, follow the test plan in the example repo linked in #1077. At step 5, the behavior described will be corrected after these changes are applied.