on-demand css (unocss)

[yurks]

Don't we want to use unocss for on-demand css generation?
For now we have to include whole styles ~100kB of css classes for all components, while we use 20-30%.
Using PurgeCSS for cleaning unused classes seems to be unreal to clean it correctly.
But unocss do its work quite good, check the sample config for it

[simonbrunel]

@rstoenescu @hawkeye64 I'm not familiar with Quasar implementation but wouldn't be a good compromise to allow users to disable utility classes so it's possible to use UnoCSS with a Quasar preset without introducing breaking changes? The Quasar preset could be provided by the community if the Quasar team doesn't want to maintain it.

It could be something similar to what Vuetify provides:

• $utilities: false disables spacing, shadow, positioning, etc. classes
• $color-pack: false disabled color palette

Or could even be more specific:

// /src/css/quasar.variables.sass
$utilities: (
  border: false,
  colors: false,
  grid: false,
  interaction: false,
  orientation: false,
  positioning: false,
  scrolling: false,
  sizing: false,
  shadow: false,
  spacing: false,
  typography: false,
  visibility: false,
);

[hawkeye64]

This is being considered for the next major version of Quasar. Unfortunately, adding it now would cause a breaking code situation.

[simonbrunel]

Thanks @hawkeye64 for the update.

I don't understand how it would introduce breaking changes if by default all utilities are enabled (as it is today). The user would have to explicitly disable the utilities via sass variables and then provide his own Quasar compatible UnoCSS preset. I feel it would be a relatively minor change in Quasar v2 that would unlock many Tailwind CSS, Windi CSS, etc. use cases via the (external) use of UnoCSS, while not having to wait until the next major version.

[pratikpatel-aurochs]

Yes because the issue is in quasar lots of built-in class is used with !important. So if you add tailwind the tailwind classed will not work. I think the solution is that quasar needs to add namespace like prefixed with q q-classname so it will not break any other CSS. So the quasar will also work and tailwind will also work without any issue

[MtDalPizzol]

Huge plus one for this.

The problem

I was REALLY frustrated by the poor performance of my project during development with Vite. The devserver started really fast, but HMR took 4s on average, making it completely uusable. My machine was even getting out of memory due to the amount of files being watched. So, I paused and started to investigate and found 2 main performance killers. One of them was Tailwind. I replaced it with UnoCSS then. The second one was quasar/src/css/index.sass.

So, every time I reloaded a page, the JavaScript booted, then it started to load the SASS file, then then get the CSS compiled and then delivering it to the client. So, this would make sense if Vite was picking up only the necessary CSS bits. But when I opened the SASS file, I realized that this is bundling TONS of unused classes like bg-{some-unused-color-palette-color}-5. That means that not only the browser had to parse almost 250kB of unused code, but my machine needed to compile that every single time, and I had to sit and await for ages until I could get simple updates to render.

Workaround

So, for now, I'm removing the import of the SASS file from mais main.js file, and using a simple <link rel="stylesheet" /> that loads the quasar/dist/quasar.prod.css. This completely removes the styles from Vite's workflow, freeing a lot of RAM since it's not being watched anymore and loading pages A LOT faster since it gets required earlier on the page lifecycle, without having to pass through Vite and all the bundling process every single time.

<!-- I have a build step that copy the stylesheet from the node_modules to my public directory -->
<link rel="stylesheet" href="http://localhost/quasar.prod.css" />

<!-- Customize branding colors -->
<style>
:root {
    --q-primary: #8b5cf6;
    --q-secondary: #86198f;
    --q-accent: #d946ef;

    --q-dark: #1e293b;
    --q-dark-page: #0f172a;

    --q-positive: #22c55e;
    --q-negative: #ef4444;
    --q-info: #3b82f6;
    --q-warning: #fbbf24;
}
</style>

I'm still left with the problem of unused code at the end, but at least the dev experience is enhanced until we can get an update that prevents all of this.