PostCSS: Improve error recovery #17754
Merged
Conversation
This file contains hidden or 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
philipp-spiess
force-pushed
the
fix/postcss-error-restoration
branch
3 times, most recently
from
f41a425 to
5c76efd
Compare
| // in some situations so we instead log the error and continue with an empty stylesheet. | ||
| console.error(error) | ||
| root.removeAll() | ||
| } |
There was a problem hiding this comment.
I'd love if we could re-organize the code somehow so we're not wrapping 200 lines in a try/catch but this is probably fine for now.
ps you should be able to move the createCompiler() definition out of it
philipp-spiess
force-pushed
the
fix/postcss-error-restoration
branch
from
5c76efd to
5083222
Compare
This commit addresses an issue where the PostCSS plugin would get stuck in an error state when processing files with invalid @apply directives, particularly affecting Angular 19 applications. The fix: 1. Adds error recovery in the @apply directive processor to gracefully handle errors 2. Prevents the PostCSS plugin from getting stuck in an error state after encountering an invalid @apply directive
philipp-spiess
force-pushed
the
fix/postcss-error-restoration
branch
from
5083222 to
1802309
Compare
thecrypticace
approved these changes
Apr 24, 2025
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.
Closes #17295
This commit addresses an issue where the PostCSS plugin would get stuck in an error state when processing files with e.g. invalid @apply directives.
This change prevents the PostCSS plugin from getting stuck in an error states particularly when the error happened inside an
@imported CSS files (as these were not registered as dependencies correctly before).Error overlays
Some frameworks (e.g. Angular 19 or Next.js) handle errors inside PostCSS transforms to render a nice error overlay. This works well and gives immediate feedback that something went wrong. However, even when dependencies are registered before an error is thrown, these frameworks will not consider changes to these dependencies anymore when an error occurs, as you can see in this Next.js example:
Screen.Recording.2025-04-23.at.14.42.16.mov
To avoid conditions where errors are not recoverable, this PR makes it so that these overlays will no longer show up in the app and only be logged to the output console. This will need follow-up upstream work before we can revisit this.
Test plan
@import-ed files@applybehavior.