Support @preprocessor stylus

[the-j0k3r]

Describe the change you'd like

Add @preprocessor stylus to GitHub Dark, would make some additions easier like overrides to some custom things.

Additional context

As of now we cant do this, because the custom syntax themes make stylus output errors related to them. Ive no idea how to make that compliant with preprocessor stylus either,

[silverwind]

What's this exactly? Any info on @preprocessor? Does Stylus now support things like Sass?

[the-j0k3r]

From https://github.com/openstyles/stylus/wiki/UserCSS#what-is-usercss

Preprocessor: Besides standard CSS, these preprocessors are supported: LESS, Stylus-lang and the USO-format. Furthermore you can utilize whatever you want by using live-reload and your own external editor.

Also see https://github.com/openstyles/stylus/wiki/UserCSS-authors#stylus specifically to be able to in addition of regular CSS use stylus lang variables that come in very handy in implementing further functionality.

Not sure about Sass.

[silverwind]

Nice, a shame it's not supporting Sass, my favorite preprocessor. 😉

Thought, I'd stick to CSS unless absolutely required. The only use case so far where I prefer a preproccessor is to do color variation e.g. darken(color, 20%), a feature that's probably not going to be added to CSS in the next few years at least. I don't think we have any such cases in the theme, so I'd say no to a preprocessor currently.

[Mottie]

Stylus does support LESS, and LESS has color operations.

[the-j0k3r]

stylus preprocessor does way more than that, it supports stylus lang much can be done there that it wont/unlikely ever be done in CSS

[silverwind]

I'd rather avoid preprocessors unless there is a really compelling reason for them, color modification being one of them. Regarding other features like nesting or mixins, I'd rather do without because those things complicate debugging in the browser devtools.

[the-j0k3r]

Fair enough, I was mostly thinking about conditionals

like

@var checkbox variable "Variable lable" 1
  if variable {
     .someselector {
        background-color: #639;
  } else
     .someselector {
        background-color: #321;
}

Not just checkbox but others also. Make easier to implement some features,custom changes that people may prefer off/on, its a more granular control easy to follow.

[silverwind]

Such cases can probably be solved via var() fallthrough like

.someselector {
  background: var(--user-color, --default-color);
}

[the-j0k3r]

That was one example, there's more complex things that probably cant be handled like that,