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.

  For example, what is not included:

  ...
  [disabled] * {
    outline: 0 !important;
    cursor: not-allowed !important;
  }
    
  
  body:not(.desktop) .desktop-only,
  body.desktop .desktop-hide {
    display: none !important;
  }
  ...

• 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 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.

  quasar/app-vite/templates/entry/client-entry.js

  Line 35 in a89be63

  import 'quasar/dist/quasar.<%= metaConf.css.quasarSrcExt %>'

• 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.