Add support for CSS Cascade Layers

[lvf23]

How about starting support for CSS Cascade Layers to say goodbye to the use of !important forever?

I created a small experimental implementation, and it works! However, the DOM simulation tool, jsdom, doesn’t fully support CSS Layers yet, causing the tests to fail, but it works in the browser.

If there's enough interest in it, I could submit a Pull Request so we can work on this feature.

A comment of interest of this feature was made already: #15467 (comment)

Further reference reading: https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade
Link of implementation: dev...lvf23:quasar:draft/css-layers

[yusufkandemir]

Hello. Thanks for the proposal and experimental work!

The lack of jsdom support is not good due to testing, even if happy-dom is there as an alternative. But, luckily, it seems to have potentially been fixed recently: jsdom/jsdom#2177 (comment)

We might want to make this feature opt-in to avoid any potential problems, until the next major version.

This would be great to have and would resolve conflicts easily for use cases like:

• using other CSS frameworks such as Tailwind
• progressively migrating to Quasar, usually in UMD scenarios
• integrating/embedding some components or "apps" made with Quasar into existing webpages, made using Vue or otherwise

All/most of these have some form of workarounds, but it would be much better to have support for this through CSS layers.

We could also introduce nested layers under quasar like, e.g. "reset"/"normalize", "base", "components", "utilities", etc. for advanced organization/customizations.

I believe this is a good idea. Let us discuss this internally and hopefully come up with a decision. Thanks for your interest!