Make CSS Layer order statement dynamic

[tejaede]

MDN - CSS Layer Rule

Mod uses CSS layers to ensure that application CSS takes precedence over mod CSS. As of this writing, all mod packages in the dependency tree are defined as layers on launch. The purpose of this ticket is to explore if we can do this dynamically.

Current - Eagerly define a layer for all mod packages

1. On launch, find all mod packages in the dependencies
2. Sort them in order of most depended on to least depended on.
3. Add a style element to the DOM with a layer rule that has the dependencies in that order.

Example of current behavior

Say todo-list is an application that depends on 3 mod packages: digit, mobile-data, and mod itself. The layer definition would be:

<style>
@layer mod, digit, mobile-data, todo-list;
</style> 

The problem is that this will be the layer definition even if todo-list doesn't load a single component from digit or mobile-data. It would be better to only have a layer for those packages that provide CSS.

Proposal -- Dynamically add layers when components are loaded

1. On launch, add style declaration for the application package and mod

<style>
@layer mod, todo-list;
</style> 

2. When a component is loaded from digit, insert it as a layer.

<style>
@layer mod, digit, todo-list;
</style>