[Feature Request] Replace Stylus with SASS

[mitar]

New Functionality

I have been a long lover of Stylus and I was really glad to see that Vuetify is using it. But after some time I realized that Stylus development has stagnated and this really means it is easy to hit issues, especially as CSS continues to be developed.

I would propose that Stylus is replaced with SASS.

Improvements

This would make it future proof and as Vuetify is closing to 1.0 is probably the last moment to do so. Especially as we will be developing themes and so on.

Bugs or Edge Cases it Helps Avoid

There are many bugs reported but not addressed to Stylus, which all software which depends on it can then have. This is especially a problem if one does not want to use a compiled dist version of Vuetify CSS, but import directly Stylus code.

[johnleider]

(╯°□°)╯︵ ┻━┻

[KaelWD]

Duplicate of #1857, but worded a bit better.

Also #543 (comment)

[bonatoc]

I just installed sass-loader and node-sass locally, and I can use either stylus or sass in my .vue files. You can choose to ignore working with stylus and use only sass.
FYI, this is true testing from this HNPWA template with Vuetify added.

[mitar]

But to configure a theme, or access other Vuetify variables, you have to use Stylus,.

[johnleider]

Only for about another week :)

[mitar]

Oh. :-) I hope I will be able to access variables (like padding amounts, etc.) in a week as well. This is very useful to define additional CSS rules matching the same sizes.

[johnleider]

Absolutely, none of that changes, just easier to specify theme specific colors.

[mitar]

OK, but one cannot access variables from SCSS, no? Maybe could variables be exported as CSS variables?

[mitar]

And I still worry that core Stylus styles might break. :-(

[johnleider]

I have no idea where you get that notion from, if you want we can continue this conversation on https://chat.vuetifyjs.com

[johnleider]

Duplicate of #1857

[mrts]

... and #586

I bet this will keep popping up. Would it make sense to arrange a fundraiser for SASS support?

By the way, it seems it is possible to convert SASS to Stylus: https://github.com/mojotech/sass2stylus/, so perhaps there is a way to keep both camps happy.

[johnleider]

Never really thought of that.

[mrts]

And here is some evidence that this will keep popping up more and more as Vuetify gains popularity: http://stateofjs.com/2017/css/results

18 K people have used and will use SASS/SCSS, only 9% (1.7 K / 18 K) say that they will not use it again, whereas 2,4 K people have used and will use Stylus, but 80% (1.9 K / 2.4 K) will not use it again.

Maybe the SASS/SCSS-to-Stylus-and-back-again toolchain would really be a way forward? So that people could freely choose during project generation:

Use SASS, SCSS or Stylus? SASS

[mrts]

I investigated Stylus code a bit and it looks neat and easily extensible. I propose to implement compilation to SASS or SCSS right inside Stylus itself. The Stylus folks look generous and open-minded, so I'm pretty sure they are willing to accept the pull request. The main developer openly acknowledges in stylus/stylus#2282 (comment) that he has no energy to maintain Stylus (kudos to him for being open about that!), so he may feel relieved there is an alternative way forward for the community.

stylus.js is the compiler library entry point. As far as I can see, the only thing required is to implement a custom Compiler and this doesn't look too scary given that the CSS compiler is only 500 lines. I'm probably overly optimistic though :).

@johnleider would you endorse this and add official SASS support to the project generator if someone else takes care of the Stylus-to-SASS/SCSS part in Stylus?

[johnleider]

Yes

[mrts]

Perfect, thank you!

[maziarz]

This would be awesome! Where to start?

[pschaub]

@johnleider Would you agree a PR if we partially change from stylus to SCSS/SASS (step-by-step)?
Or do you want one huge PR to change everything at once?

Should we use SASS or SCSS?

[maziarz]

Without starting a war, i would vouch for SCSS..

[mrts]

@pschaub , @maziarz - @johnleider did not agree with migrating to SASS/SCSS all over. He agreed to keep Stylus, but add official SASS/SCSS support to the project generator if someone else takes care of the Stylus-to-SASS/SCSS compilation part in Stylus.

So the first step is to start playing with Stylus to see how easy it is to convert/compile .styl files to .scss files.

stylus.js is the Stylus compiler library entry point. As far as I can see, the only thing required is to implement a custom Compiler. The CSS compiler is only 500 lines, compiling to SASS/SCSS may or may not be more complex.

Also, take a look at sass2stylus - although it is in Ruby and the direction is reversed, it might be helpful (and the converter itself is encouragingly short - only 270-something lines 👍).

[johnleider]

As we are approaching v1.0 release, current status is Icebox. We have still not agreed to any specific implementation and while there was a following to SASS/SCSS, upon polling our devs, just as many came out to say please keep stylus.

[mrts]

@hellosylvee - there is a clear plan how to implement the compilation (see #2371 (comment)), but no-one has stepped up to do it yet. I myself cannot do it currently.

[jaunkst]

Might be able to transpile the stylus to scss/sass by using the stylus Parser to gain access to the AST from stylContent. Would need to run a spike on it out but it should be possible.

[mrts]

@jaunkst, sounds like a plan :)

[shadowcodex]

@jaunkst @mrts I have already started work on the stylus to scss conversion. I’ll have it done soon ™️

[shadowcodex]

I’m doing it by hand to ensure code completion, readability, and correctness.

[raditsp]

👍

[nmsmith22389]

I converted all of the styles over to scss. It might still need a few tweaks but it's working great so far!

Here's the GitHub page. (it's also on npm)
vuetify-scss

[AlexandreBonneau]

This is great @nmsmith22389 !

But...what now?

The 5th of November 2017, John closed this issue since it had a duplicate...but that duplicate was closed on the 23th of September 2017.
So there aren't really any way to follow-up on this issue since none are opened as of now; not cool!

So...thanks to @nmsmith22389, which did a monumental amount of work, we now have a stylus-free Vuetify.

Since Stylus is still slowly dying (issues piling up, lack of support for new CSS features like grid and custom properties..), perhaps it's time to move on and merge those changes? 😇

What do you think?

[johnleider]

@nmsmith22389 Can you come to the community and chat with me? https://chat.vuetifyjs.com

[nicokoenig]

@johnleider any updates here?

[mrts]

Stylus will be replaced with SCSS in version 2.0, see #6676 and https://github.com/vuetifyjs/vuetify/projects/19

[edwinharly]

Currently I'm depending on the vuetify 1.5 styl files, if I want to upgrade to v2, do I have to convert all to sass ???

[pschaub]

You could try out tools to convert styl to sass:
https://www.npmjs.com/package/stylus-converter

I did not try it out. Maybe there are better tools.

[eing-ooca]

Currently I'm depending on the vuetify 1.5 styl files, if I want to upgrade to v2, do I have to convert all to sass ???

i wanna know too TT

[jacekkarczmarczyk]

If you want to use vuetify variables you need to use sass, if you don't use them you can keep your .styl files