Utility belt

[chenglou]

The recent update made it so that RCSS's output is directly inlinable as a react style (there's still the different that react style lets you do width: 10, while RCSS only allows width: "10px", but we'll see). This will future-proof RCSS in case we ever switch to style object inlining, when/if it starts to make sense.

By then RCSS can stay as a collection of useful utilities for writing CSS in JS:

• RCSS.rgba()
• RCSS.darken(someValue)
• RCSS.areaInSpritedImages(...)
• RCSS.generateKeyFramesWithInterpolation(...) <- unique keyframe names would be neat

etc.

[charliermarsh]

Can we leverage LESS for some of this? (Given that it's all written in JS anyway.)

[chenglou]

sure

[charliermarsh]

Thoughts on incorporating Autoprefixer-esque functionality into the utility belt? Seems like a natural extension (and it's something I'd find super useful, personally).

[charliermarsh]

I think a good starting point would be to add utility functions for colors, and a lot of that functionality has already been ported over from LESS via tinycolor. My vote would be to add some sort of RCSS.color("...") alias for the tinycolor("...") function. Then, users could just chain the tinycolor utilities like:

color: RCSS.color("red").lighten().desaturate()

If we continue with the LESS comparison: I don't think we really need to worry about mathematical or type-checking utility functions, given that those are easily accessible already within JS. The other examples you give above are quite unique, so we'll figure those out as we go.

Thoughts?

[Raynos]

👎 to re-exporting tinycolor. It's 1k loc and bloats the size of rcss.

However if it's something like require('rcss/color') then that would be cool because you can opt into having to bundle that.

If we are going to add this utility i strongly recommend we refactor rcss to have a require('rcss/thing-i-want') interface to keep the file size down and to keep it modular (i.e. users can pick ONLY the features they want).

I don't mind doing that refactor as a PR myself.

[charliermarsh]

That's a great suggestion. +1.

[chenglou]

@crm416 @Raynos there are way too many inline style libraries in/outside react now, and at least a few of them have better APIs are are more actively maintained. I guess I consider the goal of RCSS achieved?

Maybe it's time to deprecate this? Or pivot this into a utility library like stated. RCSS has always been just a small optimization library.