Hoist universally applied styles

[AngusMorton]

When we have a large number of CSS variables defined in :root, or globally applied CSS resets, the output can get very noisy and long. Deduplicating or hoisting the global variables would allow us to reduce the size of the output and make it less noisy, while still preserving the visual information.

Given a stylesheet

*,
::after,
::before {
  margin: 0;
  padding: 0;
}

<div>
  <span>Content</span>
</div>

The output is very verbose, something like:

  <div style="
      margin: 0;
      padding: 0
    ">
      <style>@scope{:scope{
        &::after {
          margin: 0;
          padding: 0
        }
        &::before {
          margin: 0;
          padding: 0
        }
      }}</style>
      <span style="
        margin: 0;
        padding: 0
      ">
        <style>@scope{:scope{
          &::after {
            margin: 0;
            padding: 0
          }
          &::before {
            margin: 0;
            padding: 0
          }
        }}</style>
        Content
      </span>
    </div>"

It would be nice if we could condense the output to:

"<style>
      * {
        margin: 0;
        padding: 0
      }
      ::after {
        margin: 0;
        padding: 0
      }
      ::before {
        margin: 0;
        padding: 0
      }
</style>
<div>
  <span>
     Content
  </span>
</div>"

I would be happy to contribute if this is something you're interested in.

[DylanPiercey]

@AngusMorton having a dedicated style for global rules seems like a good idea to me. I'm not quite sure the best way to approach this (PR welcome!).

Are you imagining special casing eg * and :root?

[AngusMorton]

Yeah, I'm thinking about special casing the global rules. I'll give it a go tonight and see how far I get!