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.

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

Merged
merged 2 commits into from
May 22, 2024
Merged

Conversation

Rheeseyb
Copy link
Contributor

@Rheeseyb Rheeseyb commented May 17, 2024

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

Copy link
Contributor

github-actions bot commented May 17, 2024

Try me

Copy link

relativeci bot commented May 17, 2024

#12521 Bundle Size — 62.13MiB (~+0.01%).

668bf34(current) vs 6339ece master#12519(baseline)

Warning

Bundle contains 52 duplicate packages – View duplicate packages

Bundle metrics  Change 2 changes Regression 1 regression
                 Current
#12521
     Baseline
#12519
Regression  Initial JS 45.21MiB(~+0.01%) 45.21MiB
No change  Initial CSS 0B 0B
Change  Cache Invalidation 21.39% 21.37%
No change  Chunks 30 30
No change  Assets 33 33
No change  Modules 4286 4286
No change  Duplicate Modules 517 517
No change  Duplicate Code 31.01% 31.01%
No change  Packages 449 449
No change  Duplicate Packages 52 52
Bundle size by type  Change 2 changes Regression 2 regressions
                 Current
#12521
     Baseline
#12519
Regression  JS 62.12MiB (~+0.01%) 62.12MiB
Regression  HTML 11.16KiB (+1.7%) 10.97KiB

Bundle analysis reportBranch fix/scope-editor-cssProject dashboard

Copy link
Contributor

github-actions bot commented May 17, 2024

Performance test results:
(Chart1)
(Chart2)

@Rheeseyb Rheeseyb changed the title (WIP) Scope editor css to only affect the editor Scope editor css to only affect the editor May 21, 2024
@Rheeseyb Rheeseyb marked this pull request as ready for review May 21, 2024 11:15
Comment on lines 1 to 3
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;
}
Copy link
Contributor Author

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

Copy link
Contributor

@liady liady left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

very nice

@gbalint gbalint merged commit 95391b9 into master May 22, 2024
20 checks passed
@gbalint gbalint deleted the fix/scope-editor-css branch May 22, 2024 08:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants