CSS for future v3

[mila76]

I want to make this discussion like an RFC for discussion on varius idea/proposal/solution and help core member to make quasar even more good.

I put some initial "personal" ideas/issue that i can think and expand if discussion go well

Starting from current "issues":

• not optimized for size
• massive use of !important
• conflict with other sass/css solution
• other

What can be done and other ideas:

• use more q- prefix for conflicts
• remove almost all !important
• remove/reduce as much as possible code that make use of a presence of a class (i'm not sure if is the case)
• fix current sass issues, modularize
• postcss for size (and maybe some other use?)
• use of unoCSS (or similar approach) can build more utilty, optimize size bundle, easy to expand)
• make quasar headless (i dont like this approach, too many breaking change and other issues but worth mentioning)
• make themes (less breaking change but quasar already make use of variable that can do this, maybe can improve even further)
• use another css engine (is not dissimilar of using unoCSS but less flexible?)
• other

[Tofandel]

I was thinking of making an à la carte sass loader for quasar to generate the final css marking each ts component with it's associated import without any refactoring, because you're never using all the components, if we can filter the components we're not using from the css it's already a 30-40% css reduction

Then we can extend this loader even more and add a css purge per component, based on the props used in the templates etc

Btw you can already load quasar without any styles and import your own itself importing the core quasar sass files, but it might be hard to maintain in your own project

I did manage to get tailwind and quasar playing relatively nicely, but the biggest issue of quasar imo is the js and style size especially on mobile. On desktop I get a 98% lighthouse score easily but on mobile the score drops to 30-40 because the css and js take too long to parse (7 seconds according to lighthouse, but I don't know what kind of garbage phone specs they calibrated the test with though)

[patforg]

For the !important issues I would suggest adding a prefix to all css classes.

.q-hidden instead of .hidden for example

[alexrififi]

I agree, this will also solve the problem of conflict with the tailwind

[jclaveau]

Thank you for opening this thread and your suggestions

Mine ones:

• Use CSS variables instead of directly modifying the style attribute of the component for more flexibility
• Sass @import/@use in components to use with @extend:
  • For example, now, to make an @extend .q-py-none, I need @import 'node_modules/quasar/src/css/core/size.sass'; and can't use @use
  • Do not need any import would be much simpler and avoid boilerplate noise
  • I remember having performance issues with it but with a specific import like this one it's ok now
• Even with dense everywhere, the UX is still big on Desktop. Making an app with an UX like Notion.so (especially the left menu) requires paddings and font-sizes not proposed by the regular sizes

[mila76]

A massive improvement can be done with the use of CSS Cascade Layers
browser support