Skip to content
A lightweight toolset for writing styles in JavaScript
JavaScript CSS TypeScript
Branch: master
Clone or download
dependabot and bhough Build(deps): Bump npm from 6.10.3 to 6.13.4
Bumps [npm](https://github.com/npm/cli) from 6.10.3 to 6.13.4.
- [Release notes](https://github.com/npm/cli/releases)
- [Changelog](https://github.com/npm/cli/blob/latest/CHANGELOG.md)
- [Commits](npm/cli@v6.10.3...v6.13.4)

Signed-off-by: dependabot[bot] <support@github.com>
Latest commit e7b21ac Dec 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github docs: fix typos (#280) Dec 23, 2017
docs-theme docs(docs layout): hide docs summary on small viewport as well Jan 1, 2019
docs fix(hsl(a)): hsl(a) decimal support Oct 29, 2019
flow-typed/npm chore(flow-typed): Fix for rambda Enum depcreation Jun 15, 2019
src fix(hsl): enable decimal values in hsl representation Oct 29, 2019
.documentation.json address PR fixes May 25, 2019
.editorconfig chore(editorconfig): add editorconfig Dec 9, 2016
.eslintignore style(tests): Linting for tests. Mar 3, 2017
.eslintrc Version 2 Release (#347) Aug 22, 2018
.flowconfig feat(Flow): Type definition improvements (#222) Aug 26, 2017
.gitignore chore(.vscode): Ignore .vscode folder Mar 2, 2019
.npmignore Update .npmignore Aug 24, 2018
.travis.yml build(package.json): update deps Oct 29, 2019
CNAME chore(docs): setup polished.js.org domain Dec 9, 2016
CODEOWNERS chore(CODEOWNERS): Update codeowners Feb 16, 2019
CODE_OF_CONDUCT.md docs(code-of-conduct): Adds Coraline's Code Of Conduct. (#227) Aug 8, 2017
CONTRIBUTING.md Update CONTRIBUTING.md Aug 23, 2018
LICENSE.md Update LICENSE.md Mar 31, 2019
README.md Update README.md Mar 24, 2019
babel.config.js chore(math/errors): Error system base/math improvements Feb 16, 2019
package.json fix(hsl(a)): hsl(a) decimal support Oct 29, 2019
rollup.config.js Upgrade to babel 7 Sep 21, 2018
typescript-test.ts address PR fixes May 25, 2019
yarn.lock Build(deps): Bump npm from 6.10.3 to 6.13.4 Dec 14, 2019

README.md

polished

A lightweight toolset for writing styles in JavaScript.

Build Status codecov Github All Releases

npm install --save polished
# or if you're using yarn
yarn add polished

Want 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, emotion, jss, 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

Docs

See the full documentation at polished.js.org!

Usage

✨ 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 'polished import polished from 'polished'

When ✨ polished modules are imported properly, tree shaking in webpack and Rollup can be leveraged to reduce your bundle size.

Flow Type Definitions

✨ polished has first-class Flow support with zero configuration to assist you in finding type errors while using our modules.

Ignore polished source

Flow frequently updates and it is possible that the version you are running may cause you to run into errors coming from the polished package in your node_modules directory. You can add the following lines to your .flowconfig to ignore polished in those cases:

[ignore]
.*/node_modules/polished/.*

TypeScript Definitions

✨ polished has TypeScript definitions to allow the library to be used in any TypeScript project. You will need to set moduleResolution to node in your tsconfig.json in order to use ✨ polished with TypeScript.

Babel plugin

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.

Object Spread Properties

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.

Why?

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(0.1), desaturate(0.1))

Why not package-xyz?

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.

Compatibility

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.

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

License

Copyright © 2016-2019 Brian Hough, Maximilian Stoiber, & Nik Graf. Licensed under the MIT License, see LICENSE.md for more information!

You can’t perform that action at this time.