Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

andreypopp/postcss

Open more actions menu
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

67 Commits
67 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PostCSS

PostCSS is a framework for CSS postprocessors. You get a custom JS function to modify CSS, and PostCSS parses CSS, gives you usable JS API to edit CSS node tree and then save modified node tree to new CSS.

For example, let's fix forgotten content propery in ::before and ::after:

var postcss = require('postcss');

var postprocessor = postcss(function (css) {
    css.eachRule(function (rule) {
        if ( rule.selector.match(/::(before|after)/) ) {

            var good = rule.some(function (i) {
                return i.prop == 'content';
            });
            if ( !good ) {
                rule.prepend({ prop: 'content', value: '""' });
            }

        }
    });
});

And then CSS with forgotten content:

a::before {
    width: 10px;
    height: 10px;
    background: black
}

will be fixed by our new postprocessor:

var fixed = postprocessor.process(css);

to:

a::before {
    content: "";
    width: 10px;
    height: 10px;
    background: black
}

Sponsored by Evil Martians.

Features

Preserves code formatting and indentations

PostCSS saves all spaces if you don’t change CSS node and try to copy your coding style if you modify it.

Parses everything

In addition to the unit tests, PostCSS has integration tests to check CSS parser on real-world sites. Right now parser is tested on GitHub, Twitter, Bootstrap and Habrahabr styles.

Also PostCSS parser is very flexible and, for example, can parse any custom or future at-rules, instead of build-in list.

High-level API

PostCSS is not only parser and stringifier. It contains useful tools, which can be used in most of postprocessor:

  1. Safe iterator, which allow to change list inside iteration.
  2. Module to split value list by spaces or commas.

About

Framework for CSS postproccessors

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages

  • CoffeeScript 96.6%
  • CSS 3.4%
Morty Proxy This is a proxified and sanitized view of the page, visit original site.