Jetpack: Various CSS enhancements originating from the Base Styles package

[coder-karen]

The Issue

Various improvements can be made to how CSS variables / selectors are added and used throughout Jetpack. For this specific issue, the suggestions are based on CSS that currently exists in the Base Styles package.

Suggested Changes

The suggestions were made in this PR comment - pasting them in below as is: https://github.com/Automattic/jetpack/pull/28024#issuecomment-1362130569

1. Separate CSS colour variables into their own file. That way they can be imported only where they are needed without pulling in extra CSS, e.g. in https://github.com/Automattic/jetpack/pull/28039 which depends on a single colour variable only.
2. Separate Sass mixins into their own file; same as above, then one can import only mixins if only those are needed.
3. Find if CSS rules affecting body tag directly can be removed, or if those rules should moved into CSS selector unique to Jetpack. If they're needed in multiple places, consider turning it into mixin.
4. Move rest of the CSS selectors (jp-wrap etc) to their own file, or directly be with JS component or somewhere where its clear where they are used, what they do, and only get imported when meant to be imported.
5. Further down the road I suggest exploring use of @use as it avoids loading e.g. colour variables multiple times, and ensures they get loaded just once. Improves devex and performance. :-)

[anomiex]

Regarding color variables in particular, likely we should look into having @wordpress/dependency-extraction-webpack-plugin extract a dependency on a package that provides the variables, both these and those from @automattic/calypso-color-schemes, instead of embedding them in every bundle even once.

Then we also need to look at removing the use of postcss-custom-properties with preserve: false (and also the importFrom, since they're wanting to deprecate that).