cswendrowski / FoundryVTT-Custom-CSS

Allows a user to setup custom CSS rules in a FoundryVTT world
GNU General Public License v3.0
11 stars 9 forks source link

SCSS Support #29

Closed OmegaRogue closed 7 months ago

OmegaRogue commented 7 months ago

CSS can be quite verbose, especially when doing more in-depth things. SCSS allows for nesting of css rules and alot of other things that can reduce that verbosity alot, and it has a javascript API that allows compiling it to normal css at runtime https://sass-lang.com/documentation/js-api/

Being able to use scss in custom CSS would allow doing alot more things quite easily and cleanly than it currently is possible.

zeel01 commented 7 months ago

I'm a big fan of Sass, but I have to weigh the utility this adds for most users against the added dependency and upkeep of the module with this feature. Most users of this module are writing small simple styles to make tweaks and fixes, not large scale visual alterations. In fact, most users aren't even writing the styles, just getting snippets from others on Discord. That means that while Sass is really nice, the majority of users will not use or benefit from it.

For more advanced users, it is and always has been recommended that they create a personal module or add styles/scripts to their world manifest. Custom CSS is akin to the Macro system, intended for small simple snippets, typically ones that are niche or of limited general use. For larger stuff, modules are a better choice as you can edit your code in a real editor, use version control, and you aren't storing the code inside the Foundry database. And, you can use preprocessors like Sass, Typescript, etc.

Additionally, native nested CSS rules are already available in the latest versions of Chrome, Edge, Firefox, and Safari: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting. This nesting will work in Custom CSS just fine (though the editor marks it as an error, probably needs updated. I'll have to check if there is an upstream fix for this.)