3 ms·
> this seems to be a way to write the complete CSS in JS, and then to have it compiled into CSS. That isn't what this is although I also had to poke around the
by mbrookes 10y ago
> this seems to be a way to write the complete CSS in JS, and then to have it compiled into CSS.
That isn't what this is although I also had to poke around the source code to figure out what it is exactly.
It's a set of mixins and utility functions that return a js object that is then used as input for either inline styles, or for one of the may CSS in JS libraries that convert do a JS object to CSS.
As for how useful? Well, the color utilities seem to replicate what color.js does, so nothing new there. The mixins seem to be mostly about prefixing, and you're going to need to prefix the rest of your CSS-in-JS anyway - for which there are various standalone libraries, and plugins to the aforementioned libraries.
The shorthands let you do things like:
borderWidth('12px', '24px', '36px', '48px')
=>
{
'border-top-width': '12px',
'border-right-width': '24px',
'border-bottom-width': '36px',
'border-left-width': '48px'
}
Thing is, I can already do that without the expansion:
{
'borderWidth': '12px 24px 36px 48px'
}
As much as I respect the guys behind this, I'd question how useful it is overall.
- mxstbr 10y agoSorry it isn't clear to you, we could definitely do a better job with the README. If you look on the website[0] you'll see actual examples of usage. (I just announced this project on stage at ReactLondon during my talk, so it's very fresh and we haven't had a lot of time to clean up the docs yet) Basically, there is lots of styles in JavaScript libraries floating around, especially in the React ecosystem. The issue is that many people need Sass utility functions and mixins like lighten/darken/clearfix to be productive with their styling, and no real comprehensive "Compass for styles in JavaScript" exists—so this is it. We looked at a lot of existing JavaScript color libraries, but most of them have some sort of fluent API that is very different from the way CSS preprocessors handle these functions. This confuses people and makes the API hard to learn, so we decided to build our own that mimics the Sass API as closely as possible. (apart from being all curried functions that are composeable, which means switching some argument orders around) [0]: https://polished.js.org https://polished.js.org
- pygy_ 10y agoThis was a big missing piece of code in the CSS-in-JS world. Thanks for providing the stdlib (following SASS is definitely a great approach).
- mbrookes 10y agoThanks for the clarification "SASS-like mixins for CSS in JS" sums it up. I did look at the docs, but that doesn't have an explanation of what value this is trying to offer either. If designers are being asked to write CSS-IN-JS, I can get where there the difficulty comes from, but I'd still argue that most of these functions are just moving the chairs around. This [1] IMHO is the defacto JS color lib, but again can see how, if the only thing you know is SASS, it looks a bit to much like real code. [1] https://github.com/brehaut/color-js#color-methods https://github.com/brehaut/color-js#color-methods