Add scoped class feature

[backspace]

On hold: we’ve decided this isn’t worth the increased complexity, it can be accomplished with :global and a unique class name instead. If you would find this feature useful, please let us know in the comments.

---

This adds a __GLIMMER_SCOPED_CSS_CLASS that facilitates style scoping even when working with code we don’t control that generates elements dynamically, such as Ember Power Select.

See here for the AST for the test component.

There are some irksome formatting-only changes, I changed it to use the same Prettier branch as cardstack/boxel because format-on-save was causing test-app/app/components/uses-scoped-classes.gjs to become empty 😖

[lukemelia]

Looking good

[lukemelia]

Nice work. You can really climb an (abstract syntax) tree!

[ef4]

I would have thought that :global() was already a good enough escape hatch for this.

It's true that using global you have to pick a name to use, but that might be a positive, given that the name will be used far from its definition and if it's randomized there's no way to trace it back to its source. (This is not a concern for the rest of our scoped attributes since there's exactly one place that could be responsible for each one, since they're all local.)

[tintinthong]

I would have thought that :global() was already a good enough escape hatch for this.

:global could definitely work as an escapte hatch. But, if I used :global id (as u said, without choosing a name) I will get clashes in CSS. Something like below,"5:17:06 PM" is scoped using this feature but "Some glob..." is styled using a global that clashes.

It's true that using global you have to pick a name to use, but that might be a positive, given that the name will be used far from its definition and if it's randomized there's no way to trace it back to its source. (This is not a concern for the rest of our scoped attributes since there's exactly one place that could be responsible for each one, since they're all local.)

@ef4 Do you mean its confusing to have the same __GLIMMER_SCOPED_CSS_CLASS name in the code base, although in the generated html, two different templates that use __GLIMMER_SCOPED_CSS_CLASS generates a different class name .scopedcss-xyz-abc and .scopedcss-qwe-rty ?? This api not a good idea?

[ef4]

Do you mean its confusing to have the same __GLIMMER_SCOPED_CSS_CLASS name in the code base,

No, I was referring to the generated class name. Using this PR, if you debug the far-away element it will say something like scopedcss-f61ca3e17a-5096f06db6 and you'll have no way of connecting it back to the component that's responsible for it.

Whereas if you did

<template>
  <style>
    :global(.my-special-component) {
        color: red;
    }
  </style>
  <PowerSelect @class="my-special-component" />
</template>

The element would say my-special-component on it and you could search for that name to see where it came from.