Update/publish calypso sass

[sirreal]

This is a spike to make 3188-gh-happy-tools possible.

This was implemented by addressing issues one at a time as they came up without much thought. It serves to understand what blockers exist, but not necessarily how they should be addressed.

[matticbot]

Test live: https://calypso.live/?branch=update/publish-calypso-sass

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~362 bytes added 📈 [gzipped])

name                parsed_size           gzip_size
woocommerce              +573 B  (+0.0%)     +181 B  (+0.0%)
google-my-business       +573 B  (+0.2%)     +181 B  (+0.2%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~370 bytes added 📈 [gzipped])

name                          parsed_size           gzip_size
async-load-design-playground       +581 B  (+0.0%)     +185 B  (+0.0%)
async-load-design                  +581 B  (+0.0%)     +185 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[sirreal]

Let's wait for #36175

[ockham]

Should we also change packages/calypso-ui accordingly? (See Automattic/jetpack#13490 (comment))

[ockham]

@Automattic/team-calypso I'd be curious to hear your thoughts on this, esp in the context of Automattic/jetpack#13490 (comment) (Does this approach make sense, is it viable?) Luna is spread a bit thin ATM, so it'd be cool to pick your brains 😅

[jsnajdr]

There are two types of shared SCSS files that should be clearly separated:

SCSS header/prelude files that don't output any CSS
These are SCSS variable definitions, functions and "placeholder selectors" that are further used in SCSS rules that output actual CSS:

Base styles that don't belong to any component, but setup the CSS environment

• CSS reset stylesheet
• shared animations (named keyframes definitions)
• styles for form elements, as we apply Calypso styling even to plain input or select elements that don't have any class names

The current client/assets/stylesheets folder mixes them all together without clear distinction. That would be nice to fix first.

The z-index map and function
That's a big 🤦‍♂ that should be removed completely. There's nothing much reusable in it, as it specifies a map of Calypso-specific class names to their respective z-indexes. That map shouldn't be needed at all: instead, our HTML markup should be improved to exploit the natural z-indexing rules and stacking contexts. Described also in the Calypso CSS guidelines

[simison]

FYI, I just did a similar PR in Gutenberg: WordPress/gutenberg#17883

CSS reset stylesheet

This could be turned into a mixin. See example in Gutenberg.

[ockham]

Thanks for that overview, @jsnajdr!

Are those things that Team Calypso can work on in the near future? You clearly seem to have a better grasp of what's going on with those files than I do -- not sure if you also have the time to work on them? 😅

[sirreal]

There are two types of shared SCSS files that should be clearly separated:

💯

SCSS header/prelude files that don't output any CSS
These are SCSS variable definitions, functions and "placeholder selectors" that are further used in SCSS rules that output actual CSS

We can set clear rules here and add tooling to validate that this bit produces no output. We were recently burned by that when we started writing CSS custom properties over and over.

Base styles that don't belong to any component, but setup the CSS environment

• CSS reset stylesheet
• shared animations (named keyframes definitions)
• styles for form elements, as we apply Calypso styling even to plain input or select elements that don't have any class names

CSS variables is another one for this list 😉

[simison]

CSS variables is another one for this list 😉

Which bit specifically? 😁 Performance issues? (we should open an issue about that)

[sirreal]

CSS variables is another one for this list 😉

Which bit specifically? 😁 Performance issues? (we should open an issue about that)

CSS custom properties (like our color schemes) are part of a base style set that don't belong to any component. They belong to the environment and should be included exactly once (we had an issue recently where they were included in every component 😱 — that's the performance issue you mentioned). They're also necessary for more specific styles to work correctly.

[simison]

Adding to the CSS custom properties list: they're not linted. Nothing yells at you if you use a non-existing variable.

[stale]

This issue has been marked as stale and will be closed in seven days. This happened because:

• It has been inactive in the past 9 months.
• It isn't a project or a milestone, and hasn’t been labeled `[Pri] Blocker`, `[Pri] High`, `[Status] Keep Open`, or `OSS Citizen`.

You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation.

[sirreal]

Abandoning this work.