Support global styles

[tomahl]

As a user I want the ability to create global styles so that all rules are created and managed within ecsstatic.

This is probably the last piece that prevents the creation of general rules, such as the main stylesheet from being able to use the advantages of css-in-js and thus remaining "disconnected" from other files.

[mayank99]

Thanks for the issue. As I mentioned earlier, the goal of ecsstatic is intentionally very narrow: generate colocated scoped styles at build time. Global styles don't need to be colocated or scoped, so they don't belong in ecsstatic, at least currently.

I am going to leave this issue option. Will revisit if there is more demand for it.

[hyrious]

I can come up with some reasons to NOT add this feature:

The main purpose of :global(...) {} styles is to hack out of scoped styles, this is because in these template frameworks (svelte, vue), all selectors are wrapped in the component scope.

<p>Hello, <em>world</em>!</p>
<style scoped>
  p { margin: 0 }    /* -> p.scope-xxx { margin: 0 }   */
  p em { color: red }  /* -> p.scope-xxx em.scope-xxx { color: red } */
</style>

When you want to target elements that are not part of this component, like in child slots, you need special hacks to target elements in them.

<style scoped>
  p :global(em) { color: red }  /* -> p.scope-xxx em { color: red } */ 
</style>

However, ecsstatic is not that scoped, it only generates one scope to one class name.

scss`
  em { color: red }  // -> .scope-xxx em { color: red }
`

---

We talked about :global() usage in scoped selectors above, now let's talk about the real global selectors, i.e. top-level selectors.

// assume we have a function that generates styles in global scope
let void_ = global_css`
  body { color: red }
`

Will that function be helpful? Maybe.

[mayank99]

@hyrious Thanks, the distinction is helpful.

If this was to be added, I think we could use the same API as styled-components (but without a return value as styles are injected automatically). The benefit of this is syntax highlighting and intellisense will continue to work with the vscode-styled-components extension.

import { createGlobalStyle } from '@acab/ecsstatic';

createGlobalStyle`
 * { box-sizing: border-box; }
`;

But we'll have to think about the scss version too. I'm already quite unhappy with the scss function because it doesn't have syntax-highlighting/intellisense.

---

I would also like to collect a few different use cases for this first. From my perspective, almost every use case can be covered by a separate .css/.scss file.

[tomahl]

Any thoughts regarding this lately @mayank99 ? This small detail, unfortunately, prevents any usage of ts-based design tokens in global styling. The idea of using SC's createGlobalStyle would do just fine.

I am fully aware of the primary goal of this project but this feature would really complete the perfect circle.

[mayank99]

Sure, have fun! https://github.com/mayank99/ecsstatic#global-styles