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!

[guilbep]

Any news on this ? Seems like a GREAT idea!

[guilbep]

Update: I found something that work!
in the quasar.config.js just replace the quasar.css by an empty one
and in your app.css wrap quasar in the layer you want to create

// Wrap Quasar in a layer
@layer quasar-base {
  @import 'quasar/src/css/index.sass';
}

extendViteConf(viteConf) {
        // Remove Quasar's auto-injected CSS
        if (!viteConf.css) viteConf.css = {};
        if (!viteConf.css.preprocessorOptions)
          viteConf.css.preprocessorOptions = {};
        if (!viteConf.css.preprocessorOptions.scss)
          viteConf.css.preprocessorOptions.scss = {};

        // Prevent Quasar from auto-injecting
        viteConf.resolve = viteConf.resolve || {};
        viteConf.resolve.alias = viteConf.resolve.alias || {};

        // Create an empty alias to block the auto-injection
        viteConf.resolve.alias['quasar/dist/quasar.sass'] = path.resolve(
          __dirname,
          './src/css/empty.scss',
        );
        viteConf.resolve.alias['quasar/dist/quasar.css'] = path.resolve(
          __dirname,
          './src/css/empty.scss',
        );
      },

[yusufkandemir]

Razvan gave it a go and faced some issues. It's been a while, so I can't remember all the details. But, the aim was not just to put everything into a single layer and call it a go. It requires different layers for components, utility classes, etc.

But, anyway, a simpler solution for the above using app-vite v2 would be (non-tested):

build: {
  alias: {
    'quasar/dist/quasar.sass': resolve(import.meta.dirname, './src/css/empty.scss'),
    // If not using SCSS variables:
    'quasar/dist/quasar.css': resolve(import.meta.dirname, './src/css/empty.scss')
  }
}

The rest looks like AI imagination.

[lvf23]

Glad to help you, @guilbep and @yusufkandemir! No more !important to override style anymore! That could be implemented as a single layer and gradually going dividing in multiple layers later if it is possible and in a way that would not disturb the future plans for the framework and community.