Package Exports

postcss-short

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-short) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PostCSS Short

PostCSS Short is a PostCSS plugin that extends shorthand properties in CSS.

Shorthand properties allow you write more concise and often more readable style sheets, saving time and energy.

/* before */

.banner {
    position: fixed 0 0 *;
    size: 100% 48px;
}

.section {
    margin: 40px;
    text: bold center uppercase dimgrey 1.25em 1.5 .05em;
}

.section.inset {
    margin: * auto;
}

/* after */

.banner {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 48px;
}

.section {
    margin: 40px;
    color: dimgrey;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.25em;
    line-height: 1.5;
    letter-spacing: .05em;
}

.section.inset {
    margin-right: 0;
    margin-left: 0;
}

Usage

You just need to follow these two steps to use PostCSS Short:

Add PostCSS to your build tool.
Add PostCSS Short as a PostCSS process.

npm install postcss-short --save-dev

Node

postcss([ require('postcss-short')(/* options */) ])

Grunt

Install Grunt PostCSS:

npm install postcss-short --save-dev

Enable PostCSS Short within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
    postcss: {
        options: {
            processors: [
                require('postcss-short')(/* options */)
            ]
        },
        dist: {
            src: 'css/*.css'
        }
    }
});

Options

allow (Array): If specified, only properties explicitly allowed will be processed.

deny (Array): If specified, deny specific properties from being processed.

prefix (String, Object): prepends a prefix (surrounded by dashes) to the property. This may be useful for preventing clashes with any future syntax.

{
    deny: ['text'], // do not process the text property
    prefix: 's' // process properties with the -s- prefix
}

{
    allow: ['text'], // only process the text property
    prefix: {
        'text': 's' // process the prefixed '-s-text' property
    }
}

Notes

Shorthands are processed for margin, padding, position, size, min-size, max-size, and text.

The asterisk (*) value prevents the overriding of a previous value.

The position property uses the same 1-to-4-value syntax as margin and padding.

The text property shorthands text-related properties; color, font-style, font-variant, font-weight, font-stretch, text-decoration, text-align, text-rendering, text-transform, white-space, font-size, line-height, letter-spacing, word-spacing, and font-family.