A lightweight toolset for writing styles in JavaScript. ✨
npm install --save polished
# or if you're using yarn
yarn add polishedWant to write styles in JavaScript, but also want Sass-style helper functions and mixins? Need a consistent color palette throughout your app? ✨ polished is for you!
- Make your app look great without stress
- Cross framework compatible: No matter if you're using
styled-components, aphrodite, radium, or plain inline styles, as long as you're writing your styles in JavaScript you can use polished! - Switching from a pre-processor to styles in JS made easy
✨ polished modules are meant to be used as stand-alone imports. You should avoid importing the entire library directly:
import { clearFix, animation } from 'polished'
import * as polished from 'polishedimport polished from 'polished'
When ✨ polished modules are imported properly, tree shaking in webpack 2 and Rollup can be leveraged to reduce your bundle size.
See the full documentation at polished.js.org!
You can optionally also use babel-plugin-polished to compile the static function calls out and remove the (already tiny) runtime performance impact of using ✨ polished.
In the documentation you will see examples using object spread properties. ({ ...other }) To enable this syntax in your project add the transform-object-rest-spread plugin (or the stage-3 preset to enable all stage three features) to your Babel configuration.
Mixins
Color
Shorthands
Helpers
Types
When writing styles in JavaScript, many people need Sass-style helper functions to be productive. ✨ polished brings them to you in a nice, lightweight package tailor-made for styles in JavaScript.
The main difference with Sass is that it's written in a functional style and all color functions are curried. This means you can compose them together into your own reusable helpers with a compose function of your choice:
import { compose } from 'ramda' // Replace with any compose() function of your choice
import { lighten, desaturate } from 'polished'
// Create tone() helper
const tone = compose(lighten(10), desaturate(10))First of all, we didn't find another library that had everything we needed, and we don't care about installing a dozen packages separately.
Specifically most other packages that provide color functions do so in an object-oriented style, often with a fluent API that's very different from the Sass-style helpers. This means people that aren't very familiar with JavaScript might shy away from using them.
✨ polished was made as a standard library for everybody, no matter if they know JS inside out or not.
✨ polished is compatible with any library that accepts styles as JS objects. This includes, but is by far not limited to, styled-components, radium, aphrodite, glamor, glamorous, jss and many more!
No matter if you're using inline styles or CSS-in-JS, polished is for you.
Copyright © 2016 Maximilian Stoiber. Licensed under the MIT License, see LICENSE.md for more information!