Skip to content

[fix] Removal of empty stylesheets created from transitions #7662

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 1 commit into from
Jul 17, 2022
Merged

[fix] Removal of empty stylesheets created from transitions #7662

merged 1 commit into from
Jul 17, 2022

Conversation

@tanhauhau
Copy link
Member

@tanhauhau tanhauhau commented Jul 6, 2022

Before submitting the PR, please make sure you do the following

  • It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
  • Prefix your PR title with [feat], [fix], [chore], or [docs].
  • This message body should clearly illustrate what problems it solves.
  • Ideally, include a test that fails without this PR but passes with it.

Tests

  • Run the tests with npm test and lint the project with npm run lint

Closes

What has been changed?

The style_manager "cleaned up" the stylesheets it made by only clearing their rules. After clearing them, it removed them from its internal map by running managed_styles.clear(). This cleanup was not optimal - it left the style elements empty in the dom.

The proposed change is to remove style-elements created by style_manager, instead of making them empty and letting them stay in the DOM without any references. I also refactored some of the methods from the runtime/internal/dom.ts file that were only used by the style_manager or in the dom.ts file itself.

If you want to reverse-engineer this bug yourself, then start with the append_empty_stylesheet method in the dom.ts file. As long as append_empty_stylesheet is used, there will be bugs related to empty stylesheets. It does the following:

  1. Creates an empty style-element
  2. Appends it to the dom
  3. Returns only the sheet of the new style-element, leaving the style-tag totally unreferenced by any code

@tanhauhau tanhauhau mentioned this pull request Jul 6, 2022
Closed
5 tasks
@tanhauhau
Copy link
Member Author

tanhauhau commented Jul 9, 2022

Continued from the PR #7260

tanhauhau
tanhauhau commented Jul 9, 2022
View reviewed changes
MathiasWP
MathiasWP reviewed Jul 10, 2022
View reviewed changes
@tanhauhau tanhauhau merged commit 26d1455 into sveltejs:master Jul 17, 2022
@MathiasWP MathiasWP deleted the style_manager-stylesheet-cleanup branch July 19, 2022 18:07
@DrCBeatz DrCBeatz mentioned this pull request Aug 1, 2022
Closed
@Karlinator
Copy link
Contributor

Karlinator commented Aug 3, 2022

#4801 which this closes (as well as #6662) are both about CSP, and the empty stylesheet violating most reasonable CSPs by requiring unsafe-inline. I'm not sure this fixes that at all? When appending an ampty stylesheet and then adding to it you can get around the CSP issues by allowing specifically empty stylesheets with 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' (well, apart from in Safari, anyway), but if I'm reading this right that will no longer work since we're appending a style element with content?

If I'm reading this right this will break my app, and I'll have to find some other way to get transitions working.

@MathiasWP
Copy link
Contributor

MathiasWP commented Aug 3, 2022

#4801 which this closes (as well as #6662) are both about CSP, and the empty stylesheet violating most reasonable CSPs by requiring unsafe-inline. I'm not sure this fixes that at all? When appending an ampty stylesheet and then adding to it you can get around the CSP issues by allowing specifically empty stylesheets with 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' (well, apart from in Safari, anyway), but if I'm reading this right that will no longer work since we're appending a style element with content?

If I'm reading this right this will break my app, and I'll have to find some other way to get transitions working.

This PR only fixes the bug of leaving empty stylesheets in the DOM, it does not handle anything related to CSP. I saw the proposed fix that Rich Harris commented on #6662, and it is still possible to implement this. I can look into it 👍

@baseballyama baseballyama mentioned this pull request Sep 3, 2022
Merged
5 tasks
@gyzerok gyzerok mentioned this pull request Aug 4, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@MathiasWP MathiasWP MathiasWP left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@tanhauhau @Karlinator @MathiasWP