Wrap imported CSS in an at scope rule

[Rheeseyb]

Problem:
User CSS can affect the editor itself. This was fixed by #4604 (and the follow up patch #4611), but that approach is prone to edge cases.

Fix:
As we are primarily targeting Chrome, we can surround user's CSS in @scope (#canvas-container){ ... } at the point of importing in order to scope it to only within the canvas container itself. There are a small number of selectors (e.g. body and :root) that have to be replaced with the :scope selector, but otherwise we can leave the remaining imported CSS untouched.

I've had to update the version of puppeteer used so that we are now running the tests on a version of Chrome that supports this rule (as previously this was breaking the performance tests)

Notes:

• We can see from CSS Cascading and Inheritance Level 6 (@scope) WebKit/standards-positions#13 and [CSS] Activate the CSS @scope feature in stable WebKit/WebKit#21435 that @scope is landing in Safari
• Mozilla are still yet to confirm their position on @scope CSS @scope mozilla/standards-positions#472

[github-actions]

Try me

[relativeci]

Job #9572: Bundle Size — 63.6MiB (-0.04%).

d3024f1(current) vs df0030c master#9568(baseline)

Warning

Bundle removed 3 duplicate packages, 75 duplicate packages remaining – View duplicate packages

Bundle metrics   6 changes 1 regression 3 improvements

	Current Job #9572	Baseline Job #9568
Initial JS	46.37MiB(-0.05%)	46.39MiB
Initial CSS	0B	0B
Cache Invalidation	43.77%	19.32%
Chunks	27	27
Assets	31	31
Modules	4495(-0.11%)	4500
Duplicate Modules	471	471
Duplicate Code	30.67%(+0.03%)	30.66%
Packages	472(-0.63%)	475
Duplicate Packages	75(-3.85%)	78

Bundle size by type   1 change 1 improvement

	Current Job #9572	Baseline Job #9568
JS	63.59MiB (-0.04%)	63.61MiB
HTML	11.54KiB	11.54KiB

---

View job #9572 report View feature/at-rule-scoped-css branch activity

[github-actions]

Performance test results:

[github-actions]

Performance test results:

[github-actions]

Performance test results:

[liady]

very nice