postcss-utilities

PostCSS Utility Library

Let's face it. You don't have time to write your own mixins, helpers or shortcuts for your next project. Let postcss-utilities help you instead.

postcss-utilities is a PostCSS plugin that includes the most commonly used mixins, shortcuts and helpers. It's as easy as specifying @util utility-name in your stylesheet, and postcss-utilities will handle the rest for you.

Check out the documentation to get started using postcss-utilities

Try it in the browser!

Motivation

PostCSS has a lot of plugins and some of them use non-standar CSS properties to work as mixins or helpers. This is not a best way for a PostCSS plugin, because developers will not understand what is the source of this property.

"This plugin saves us from many tiny plugins with unknown properties" ‒@ai proposal postcss/issues/645

What is the difference between preprocessor’s mixins libraries?

• You don’t need the extra files in your css codebase for mixins.
• You don’t need mixins for vendor prefixing (use autoprefixer plugin)
• You can use postcss-utilities with LESS, SASS, vanilla CSS or whatever you choice.

List of current utilities

IMPORTANT: The list of utilities is open for suggestions.

• aspect-ratio
• border-color
• border-radius
• border-style
• border-width
• center
• center-block
• circle
• clearfix
• hd breakpoint
• hide-visually
• hr
• margin
• no-hover
• no-js
• padding
• position
• reset-list
• reset-text
• size
• sticky-footer
• text-hide
• triangle
• truncate
• word-break

Examples

Input

.cfx {
    @util clearfix;
}

.box-16-9 {
    background-color: #ccc;
    margin-bottom: 20px;
    @util aspect-ratio(16:9);
}

Output

.cfx:after {
    content: '';
    display: block;
    clear: both;
}

.box-16-9 {
    background-color: #ccc;
    margin-bottom: 20px;
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
}

Usage

postcss([ require('postcss-utilities') ])

See PostCSS docs for examples of your environment.

Contributing

The list of utilities is open for suggestions.

• Do you think that we should include a new utility? Create an issue with you proposal.
• Found an issue? Report it!.
• Would you like to contribute with code or documentation? Send a pull request

Contributors

• Marcus Tisäter

Changelog

v0.4.0

• Change append to replaceWith method (keep the same atRule position for new declarations)
• Fix description and author in package.json