Feature Request: scss, sass & stylus files

[JohnDeved]

hey, it would be awesome if we could write a scss / stylus files standalone. my proposal is to be able to write a file like this:

./mystyle.styl

html
    background red

and get this back from zero: localhost:3000/mystyle.css

html {
  background: #f00;
}

localhost:3000/mystyle.min.css

html{background:red}

[asadm]

Do you have a use-case for this?

Right now, you can just import .styl files into your HTML and React components and zero will parse them that way and auto-include the .css into your HTML page.

Like in your ./index.html:

<link href="./mystyle.styl" rel="stylesheet">

When you visit localhost:3000/, it will have the parsed css linked in the source.

[JohnDeved]

well for me it would be just expected behavior for the project, seeing how it handles other files. it would basically just create a simple way to host sass/stylus files.

for a use case of the top of my head: if you want to inject a CSS file after the page has been loaded "lazy", something like this would come in handy.

for example if you have a lightmode.styl and a darkmode.styl you would maybe want to only load and inject the "darkmode" css file (localhost:3000/darkmode.min.css) with javascript after the user pressed the "enable darkmode" button.

[JohnDeved]

I'm willing to write a PR if you give me the OK.

[JohnDeved]

no discussion is taken place anymore

[asadm]

I am sorry for not responding to this. I needed more time to think. The only concern I have is darkmode.styl mapping to an endpoint different than it's filename darkmode.min.css. This will be a bit unique to scss/stylus files I guess. Will this behavior conflict with any other usecase?

Alternatively, if we were to go by how other zero handlers work, a darkmode.styl file would be bundled and hosted at /darkmode without any extension. What do you suggest?

[JohnDeved]

making it /darkmode was my first thought also. but then that may conflict with a darkmode.js file... it would be more straight forward to not have a file extension at all sure, but you would end up having the same conflicts at a different place. then on the next thought, the only way not to have any conflicts at all would probably be to not change the extension at all... but then somebody might want to get the uncompiled version of the .styl and is then unable to do so anymore, creating another conflict. but let's be real here, who has an unrelated darkmode.min.css right next to a darkmode.styl. seems unlikely to me. if you want to go the /darkmode way, that's fine by me tho.

I can see if you feel like this is not important or not needed for this project. I just happen to notice it since a feature like that is a must have at my company. we use javascript to lazy inject different stylesheets for different costumes. (to inject logos, colors, etc). But maybe I'm just one of the few people actually depending on such a feature to exist.

I'm gonna reopen this issue. but you are welcome to close it if you don't think this fits your vision for this project.