UnoCSS Preset (CSS tree-shaking / Tailwind support)

[stefanvanherwijnen]

UnoCSS Preset (CSS tree-shaking / Tailwind support)

Related:
https://github.com/orgs/quasarframework/projects/2?pane=issue&itemId=11549119
#17386
#17197
#13385
#15467
#16253
https://medium.com/@michelandre.degroot/how-to-use-tailwind-with-bem-in-css-fd3445fbe9c6

Over the years there have been quite some requests for Tailwind support in Quasar and CSS tree-shaking. This sounds much easier than it actually is, but with the arrival of UnoCSS it should be possible.

Over the last weeks I created an UnoCSS Preset which completely replaces quasar.css.
At the moment this reduces the CSS file size from 245K to 176K.

All Quasar classes have been mapped to Tailwind/UnoCSS shortcuts.
In theory, a 1:1 map from quasar.css to UnoCSS should work perfectly, but there are a few problems:

• At the moment I disabled all preflight CSS as adding it does not seem to make a difference and will nullify any CSS size reductions.
  Now included.

• Lighthouse complains about a Cumulative Layout Shift which does not appear in actual use:
  Seemed to be caused by a wrong @unocss/reset/normalize.css import

• Most of the classes seem to be dynamically generated in Quasar's UI source which means half of the classes are in a safelist. Which results in bundling half of the CSS even when it is not used.

• Quasar's flex system relies heavily on child selectors (row > col-...) which cannot be tree-shaken as the parent selector with all children is bundled (and the same syntax (col) is used for rows and columns).
  I have no idea why I thought this was a problem because Tailwind/UnoCSS also uses the same syntax for col in rows and columns. Fixed.

• I suck at CSS so I usually do not have a clue how to fix the simplest CSS errors.

• You cannot actually use this at the moment with @quasar/app-vite (or webpack) as quasar.css is imported statically.
  UnoCSS Preset (CSS tree-shaking / Tailwind support) #17742 (comment)

• Probably something else which I am not thinking of right now.

Other than that, it works for the most simple Quasar based application:
SASS:

UnoCSS:

If anyone wants to give it a try and help out a hand:

pnpm create vitrify --template quasar quasarunocss
cd quasarunocss
pnpm i

# Uncomment unocss and disableSass in vitrify.config.ts

pnpm run dev

Source:
https://github.com/simsustech/vitrify/tree/unocss/packages/vitrify/src/node/plugins/quasar/unocss

@IlCallo

Update:
I trimmed down the safelist and added an extractor for the component CSS and the resulting CSS is now down to 68K. I also fixed some bugs related to normalizing and prerendering.

Update 2: I enabled the previously disabled preflights so in theory it should result in a tree-shaken copy of quasar.css. CSS size now is 79K.

Update 3: CSS for Quasar plugins wasn't included so I added a plugins option to the preset to include all plugin related classes in the safelist. With Dialog and Notify enabled this increases the CSS to 94K.

Update 4: Added @unocss/preset-icons and fixed the flex grid system. Now down to 92K. One not so obvious thing I noticed is that disabled code (i.e. commented out) will still be included in the generated CSS.

[IlCallo]

This is incredible work, thanks for sharing it with us!

I think you kinda guesses why we delayed working on this up until now
Quasar use a lot of classes generated at runtime and tampering this much with our CSS system could cause unforseeable changes down the Cascade
I can't promise you anything, but we'll take a look at your setup, as we were trying to fit in our schedules some time to explore UnoCSS too

I hope your discoveries can lead to us improving Quasar core for everyone as it happened when you experimented with app-vite, in this case to get a more performant and lean CSS system

We could also take into considerations using CSS Layers to lay foundations for Quasar themes

UnoCSS supports its own Layers abstraction, but can also export actual CSS Layers

CC @yusufkandemir @rstoenescu

[IlCallo]

@stefanvanherwijnen

Shouldn't component classes just be included as normal CSS?
UnoCSS is useful for utilty classes, but those component-specific aren't utility classes

Maybe the could be managed via CSS files lazy loading

[stefanvanherwijnen]

I don't think lazy loading will solve anything, as anything that might possibly be lazy loaded is included in the bundle. I think the only alternative is loading the CSS along with a component import (e.g. with sideEffects of an unplugin-vue-components resolver).

The downside of this is that you are still stuck with CSS and can't easily change it.

The approach I used is described at https://medium.com/@michelandre.degroot/how-to-use-tailwind-with-bem-in-css-fd3445fbe9c6.

For extensibility you might even add an optional mapping of a component class to utility classes in the UnoCSS theme. This way it's possible to theme the components without altering the Quasar source code.

[stefanvanherwijnen]

I have added the component BEM classes to the UnoCSS theme. You can now theme (style?) the Quasar components without touching the Quasar source code.

E.g. a quick recreation of a shadcn button (QBtn uses a different font):

...
theme: {
  quasar: {
    components: {
      'q-btn': `items-stretch relative shadow border-none h-9 px-4 py-2`
    }
  }
}
...

...
<q-btn label="Button" class="bg-black text-white" />
...

This already was possible with CSS. But I have never seen anyone actually create a theme with CSS so maybe the use of utility classes will change this.

[stefanvanherwijnen]

I managed to find a way to make it work with Quasar CLI:
pnpm add -D unocss animated-unocss vitrify

quasar.config.js:

...
import UnoCSS from 'unocss/vite'
import { QuasarPreset } from 'vitrify'

export default defineConfig(ctx => ({
    ...
    vitePlugins: [
      {
        name: 'quasar-strip-sass',
        enforce: 'pre',
        // Insert hackerman meme
        transform (code, id) {
          if (code.includes`import 'quasar/dist/quasar.sass'`) {
            code = code.replaceAll('import \'quasar/dist/quasar.sass\'', 'import \'virtual:uno.css\'')
          }
          return code
        }
      }
    ],

    extendViteConf (viteConf, { isClient }) {
      viteConf.plugins.push(UnoCSS({
        enforce: 'pre',
        presets: [
          QuasarPreset({
            plugins: [
              // 'AddressbarColor',
              // 'AppFullscreen',
              // 'AppVisibility',
              // 'BottomSheet',
              // 'Cookies',
              // 'Dark',
              // 'Dialog',
              // 'Loading',
              // 'LoadingBar',
              // 'LocalStorage',
              // 'Meta',
              // 'Notify',
              // 'Platform',
              // 'Screen',
              // 'SessionStorage'
            ]
          })
        ]
      }))
      ...
    }
  }
}))