search

dotkom / onlineweb-frontend

Next generation frontend for onlineweb
https://online.ntnu.no
23 stars 9 forks source link

Export certain less constants to JS #103

Open plusk opened 5 years ago

plusk commented 5 years ago

Sometimes we style components in the JS instead of CSS due to convenience. This is fine enough, but oftentimes we want the JS-set styling to match with the rest, like using the same colors. Right now that's hard-coded into individual styling, but what we should do is use something like icss syntax (already included in css-modules iirc) to export less-variables to JS, then use those JS constants for the styling. That way, when we change a part of our palette (or similar constant values), the components that are styled through JS also get the changes.

oleast commented 5 years ago

I've though a bit about this, and I'm wondering if it would just be an easier feat to convert to using CSS variables?

They are usable without importing or exporting anything, they just 'work'. The syntax may not be as pleasant, but it might be less of a hassle to use.

plusk commented 5 years ago

Sure, why not? I'm all for CSS becoming more independent of pre-processors, even if the syntax is gross. The approach I detailed in the issue originally isn't really that bad, only thing is that when you export the variable, you have to be sure that you import the same name. If you update the name, you have to remember it in JS, which is a problem just waiting to happen. I'm not sure how nicely they play with pre-processor arithmetics, so there might still be some use-cases for SASS variables or whatever it is we're using these days. Anyone feel free to throw up a PR testing it out though, it shouldn't take too long.

oleast commented 5 years ago

I'm not sure how nicely they play with pre-processor arithmetics, so there might still be some use-cases for SASS variables or whatever it is we're using these days.

The only thing I can think of is that functions such as darken will not work with CSS variables. I don't know how to replace the functionality at this time :/

plusk commented 5 years ago

There is a color/color-mod function coming up that will add that functionality, but it seems to be a long way from being implemented in any browsers. Could be that there is some hack to use the value of the CSS variable for the pre-processing, even if it won't be updated at runtime after having been computed. Right now we're not really doing any updates on those variables anyways, but having the ability might prompt us to mess about with theming etc.