-
Notifications
You must be signed in to change notification settings - Fork 159
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
Scope editor css to only affect the editor #5708
Conversation
#12521 Bundle Size — 62.13MiB (~+0.01%).
Warning Bundle contains 52 duplicate packages – View duplicate packages Bundle metrics
|
Current #12521 |
Baseline #12519 |
|
---|---|---|
Initial JS | 45.21MiB (~+0.01% ) |
45.21MiB |
Initial CSS | 0B |
0B |
Cache Invalidation | 21.39% |
21.37% |
Chunks | 30 |
30 |
Assets | 33 |
33 |
Modules | 4286 |
4286 |
Duplicate Modules | 517 |
517 |
Duplicate Code | 31.01% |
31.01% |
Packages | 449 |
449 |
Duplicate Packages | 52 |
52 |
Bundle size by type 2 changes
2 regressions
Current #12521 |
Baseline #12519 |
|
---|---|---|
JS | 62.12MiB (~+0.01% ) |
62.12MiB |
HTML | 11.16KiB (+1.7% ) |
10.97KiB |
Bundle analysis report Branch fix/scope-editor-css Project dashboard
body { | ||
margin: 0; | ||
background-color: transparent; | ||
font-family: 'utopian-inter', 'sans-serif'; | ||
font-size: 11px !important; | ||
font-feature-settings: 'cv01', 'tnum', 'zero'; | ||
letter-spacing: 0.2px; | ||
line-height: 17px; | ||
overflow: hidden; | ||
outline: none; | ||
overscroll-behavior-x: contain; | ||
} | ||
|
||
a { | ||
text-decoration: none; | ||
color: #007aff; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This was required as the Hydrogen project includes the body
tag, which by default has a margin. We've always been setting the margin to zero and accidentally relying on the editor CSS bleeding
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
very nice
Problem:
Editor CSS is leaking into the user projects.
Fix:
By wrapping all editor CSS in
@scope
rules that define upper and lower bounds, we can create what's referred to as a "donut scope" which can be applied to everything but the Canvas Container (https://developer.mozilla.org/en-US/docs/Web/CSS/@scope#scope_roots_and_scope_limits).It's best to view this diff with whitespace hidden.
Part of #5697