Jetpack loads unscoped CSS in the editor

[simison]

Impacted plugin

Jetpack

Steps to Reproduce

When Jetpack plugin is active and connected, following CSS gets loaded at the editor:

* {
	box-sizing: border-box;
}

body {
	min-height: 100%;
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu',
		'Cantarell', 'Helvetica Neue', sans-serif;
}

Especially applying box-sizing: border-box; so widerly from a plugin is problematic. We discovered (p1671618034894909-slack-CBTN58FTJ) that this was causing "reading time" panel in Gutenberg to break visually:

Protecting the element better from such breakage in Gutenberg fixes the issue, but this could still be causing more trouble elsewhere.

The CSS originates from Jetpack base styles package, imported in blocks related code added in the PR 3 months ago:

jetpack/projects/plugins/jetpack/extensions/index.scss

Lines 1 to 3 in a958428

	@import '@automattic/jetpack-base-styles/style';
	.is-beta-extension {

Typically styles in such packages are wrapped in mixins or functions to avoid outputting CSS on mere import;
if imported sass file outputs CSS on import, you might end up the same CSS multiple times in bundles, importing more than you intendendent, etc.

Overly global selectors are avoided as well and instead CSS should be applied to more specific wrapper elements.

See Gutenberg base styles as an example:

• Admin schemes mixin and usage.
• CSS reset mixin and usage.
• CSS wp-admin reset mixin and usage.
• CSS ui component reset mixin and usage.

A clear and concise description of what you expected to happen.

I think there are multiple issues at play:

• Jetpack base styles should be written as mixins, not outputted on import.
• Styles should be scoped more tightly to specific, Jetpack related elements (no body and *).
• Further feedback in the original PR

What actually happened

No response

Browser

No response

Other information

No response

Platform (Simple, Atomic, or both?)

No response

Reproducibility

Consistent

Severity

All

Available workarounds?

No but the platform is still usable

Workaround details

No response

[anomiex]

Note #27622 exists describing the same underlying issue, and already has a PR attached. Let's consolidate discussion there.