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.

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

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

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

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

Continued from the PR #7260

@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
Open
@Karlinator
Copy link
Contributor

#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

#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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@MathiasWP MathiasWP MathiasWP left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@tanhauhau @Karlinator @MathiasWP