SDK: Jetpack Logo Color Wrong due to Broken CSS Variables

[ockham]

As reported by @jeherve in Slack (p1548774845453100-slack-jetpack-gutenberg), the Jetpack logo in the Jetpack Gutenberg sidebar is broken:

While it should look like this:

This is due to this change:

https://github.com/Automattic/wp-calypso/pull/30232/files#diff-b3f6b257d3217c67ad46a47c0acf88bbR32

which made the SDK-built Jetpack Gutenblocks use a CSS variable. However, that CSS variable, which is defined at

wp-calypso/assets/stylesheets/shared/_color-schemes.scss

Line 219 in 34c029e

--color-jetpack: #00be28;

isn't imported into any of the relevant blocks files.

We're reverting this part for now (#30468).

Another proven fix is to import the color schemes file into e.g. jetpack-plugin-sidebar.scss

diff --git a/client/gutenberg/extensions/presets/jetpack/editor-shared/jetpack-plugin-sidebar.scss b/client/gutenberg/extensions/presets/jetpack/editor-shared/jetpack-plugin-sidebar.scss
index 2a9294e8cd..3d038db0c9 100644
--- a/client/gutenberg/extensions/presets/jetpack/editor-shared/jetpack-plugin-sidebar.scss
+++ b/client/gutenberg/extensions/presets/jetpack/editor-shared/jetpack-plugin-sidebar.scss
@@ -1,3 +1,5 @@
+@import 'assets/stylesheets/shared/color-schemes';
+
 .edit-post-pinned-plugins,
 .edit-post-more-menu__content {
        .components-icon-button {

However, we should probably import color definitions at a more 'global' level into our blocks. Furthermore, we also might need to import other Calypso style definitions to be able to reliably use them.

Pinging @Automattic/team-calypso for advice on the 'correct' way to do this.

A @simison @sirreal @ockham collaboration.

[sirreal]

The SDK is intended to provide a Calypso-like environment for building and bundling.

In JavaScript, we expect a certain set of Babel transformations and polyfills. It seems that we need to provide a Calypso SASS "prelude," it might be a section like the following:

wp-calypso/assets/stylesheets/style.scss

Lines 7 to 9 in eb46ec9

	@import 'shared/utils'; // utilities that are used by all CSS but don't produce any code
	@import 'shared/color-schemes'; // import color schemes
	@import 'shared/animation'; // all UI animation

[blowery]

We can fix this by conditionally setting preserve:false in the postcss.config.js file for sdk builds, likely based on an env var. That will remove all of the custom properties in the built CSS.

[blowery]

Working up a PR to do that...

[blowery]

#30505 should do it