Global styles component

API

We will standardize on the @emotion/react API:

import { Global } from '@compiled/react';

<Global 
  styles={{
    h1: { fontSize: 30 }
  }}
/>

Assumptions

• Dynamic declarations can’t work with global styles
• Global styles will be extracted to an external stylesheet

Outstanding questions

• Do we force @font-face declarations to go through this component? Currently they can’t be defined anywhere because it will blow up in prod mode
• How can we conditionally set global styles when they have been extracted to an external stylesheet? If there is no good story for this we may need to just not support this when baked as well.

[itsdouges]

I worked on a spike here for the global component https://github.com/atlassian-labs/compiled/pull/462 a while back. There are a few things that make it difficult because we want to be able to extract everything to an external style sheet.

If we want to be able to extract all CSS, how can we fundamentally support conditional global CSS? Aka, mount a component, styles are applied, unmount a component, styles are removed.

The solution is obvious if its purely a runtime one. It is complicated by extracting. Even more so that we want to support a runtime to extracted story over the lifecycle of compiled components. Fundamentally the answer could simply be - don’t have conditional global styles! Without thinking on names:

• PermanentGlobalStyles component - for adding “always on” global styles
• BrowserBodyStyles component - for adding styles that can be “conditional” that only works on the browser, which adds it to the body element

But the downside is PermanentGlobalStyles goes against regular idiomatic React concepts. You could “unmount” the component and the styles wouldn’t be removed. And it’s even more problematic when you consider third party packages from NPM could set their own global styles, and they aren’t ever removed! Oh no.

One thing we could have in our tool belt is the conditionally render style link elements, perhaps? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link disabled attribute. However seemingly deprecated/not used now, so let’s not.

What if we used media attributes instead? Or re-write the CSS to only apply given certain media queries or selectors. We’d want something that doesn’t affect specificity though.

The downside would be after extracting we’d need applications to have a provider or something to render these links when appropriate, as well as support SSR story. Realistically we’d need that anyway for critical CSS.

Assuming we can still support the conditional CSS once extracted, we’d probably aim to have two style sheets:

1. atomic styles
2. global styles

[itsdouges]

This is something that Compiled won’t currently be supporting. Closing to clean up the issue list.