New scopedStyleStrategy: none/global

[markpinero]

Body

Summary

Introduce a new scoped style strategy that basically makes is:global default.

Background & Motivation

Both of the current scoped style strategies do not fit my current needs for styling. :where’s compatibility is an issue for older browsers and the class strategy has unintended conflicts to global styles that I like to implement. So adding an option to remove this magic would give full control for my CSS with the added benefit of collocating styles along with their markup.

Goals

• An option to remove all CSS scoping from Astro components.

[matthewp]

I like this. It fits in nicely with what the option is for.

[delucis]

Would this introduce the need for a <style is:scoped> to allow opting in to scoping? And in that case, which scoping strategy would is:scoped imply? Is it set per style block: <style is:scoped="class">? Or do we need two config keys, one for choosing strategy one for disabling scoping:

{
  scopedStyleStrategy: 'class',
  globalStyles: true,
}

[markpinero]

I like the idea of two config keys since we should maintain compatibility the other way and maintain a prescriptive scoping strategy from the top level rather than per block.

[jackholden]

Hi is there any progress on this? Thanks :)

[dnlzro]

Hi there, I'd like to revive this proposal. I'd also be happy to make this my first contribution to Astro, once there's some agreement among maintainers about what to do.

@delucis's proposal of using two config keys seems good to me. Are there any other thoughts or concerns?

[dnlzro]

I forked the main and compiler repos to add the feature. This includes a config key to enable global styles by default, and an is:scoped attribute for <style> tags to override that default. It all seems to be working locally.

Changes will also be needed in the language-tools repo, so that the is:scoped attribute doesn't trigger LSP warnings. And more tests are needed in the main repo.