postcss-cheaters

Name Modified Size
README.md2 years ago2.17 KB
index.js2 years ago4.45 KB
package.json2 years ago654
test2 years ago13.72 KB

PostCSS Cheaters

Cheaters is a PostCSS plugin that allows you to write simple CSS declarations.

size

Reduce repetition when width and height are the same.

Cheater CSS:

.usage-1 {
    size: 10px;
}
.usage-2 {
    size: 20px 10px;
}

Rendered CSS:

.usage-1 {
    width: 10px;
    height: 10px;
}
.usage-2 {
    width: 20px;
    height: 10px;
}

margin and padding

Use margin and padding shorthand without necessarily wiping out other declarations. The asterisk (*) value can be used to tell CSS to ignore that particular declaration.

Cheater CSS:

.usage-1 {
    margin: 10px *;
    padding: * 15px;
}
.usage-2 {
    margin: 10px 20px *;
    padding: 10px * 10px 20px;
}

Rendered CSS:

.usage-1 {
    margin-top: 10px;
    margin-bottom: 10px;
    padding-right: 20px;
    padding-left: 20px;
}
.usage-2 {
    margin-top: 10px;
    margin-right: 20px;
    margin-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
}

position

Improve readability by keeping all position values together. Also, take advantage of nesw-style positioning. As before, the asterisk (*) value can be used to tell CSS to ignore that particular declaration.

Cheater CSS:

.usage-1 {
    position: absolute 0;
}
.usage-2 {
    position: fixed 0 0 *;
}
.usage-3 {
    position: 10px * 5px;
}

Rendered CSS:

.usage-1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.usage-2 {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}
.usage-3 {
    top: 10px;
    bottom: 5px;
}

font weight

Use the full range of font weight proper names.

Cheater CSS:

.usage-1 {
    font: light italic "Helvetica Neue";
}
.usage-2 {
    font-weight: medium;
}

Rendered CSS:

.usage-1 {
    font: 300 italic "Helvetica Neue";
}
.usage-2 {
    font-weight: 500;
}

Usage

Node

postcss([ require('postcss-cheaters') ]); // pending

Grunt

// pending

See PostCSS docs for examples for your environment.