postcss-transform-shortcut

Transform Shortcut

Transform Shortcut lets you use shorthand transform properties in CSS, following the CSS Transform Module Level 2 Specification.

/* before */
 
.transform {
    transform: skewX(25deg);
    rotate: 180deg;
    scale: 2 2;
    translate: 10px 10px;
}
 
/* after */
 
.transform {
    transform: skewX(25deg) rotate3d(180deg,0,1) scale3d(2,2,1) translate3d(10px,10px,0px);
}
 

The translate, rotate, and scale properties allow authors to specify simple transforms independently, in a way that maps to typical user interface usage, rather than having to remember the order in transform that keeps the actions of transform(), rotate() and scale() independent and acting in screen coordinates.

The rotate property accepts an angle to rotate an element, and optionally an axis to rotate it around, specified as the X, Y, and Z lengths of an origin-anchored vector. If the axis is unspecified, it defaults to 0 0 1, causing a "2d rotation" in the plane of the screen.

The scale property accepts 1-3 values, each specifying a scale along one axis, in order X, Y, then Z. Unspecified scales default to 1.

The translate property accepts 1-3 values, each specifying a translation against one axis, in the order X, Y, then Z. Unspecified translations default to 0px.

Caveat

Once these new properties are supported natively, you can also use them to style transforms across multiple rules without overwriting a previous rule’s transforms. Unfortunately, I cannot predict how your CSS rules will be inherited without also knowing your DOM. Therefore, this particularly useful feature cannot be simulated at this time.

.button {
    rotate: 45deg;
}
 
.button--warn {
    scale: 2;
}

Usage

Add Transform Shortcut to your build tool:

npm install jonathantneal/postcss-transform-shortcut --save-dev

Node

require('postcss-transform-shortcut').process(YOUR_CSS, { /* options */ });

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load Transform Shortcut as a PostCSS plugin:

postcss([
    require('postcss-transform-shortcut')({ /* options */ })
]).process(YOUR_CSS, /* options */);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable Transform Shortcut within your Gulpfile:

var postcss = require('gulp-postcss');
 
gulp.task('css', function () {
    return gulp.src('./src/*.css').pipe(
        postcss([
            require('postcss-transform-shortcut')({ /* options */ })
        ])
    ).pipe(
        gulp.dest('.')
    );
});

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Enable Transform Shortcut within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');
 
grunt.initConfig({
    postcss: {
        options: {
            use: [
                require('postcss-transform-shortcut')({ /* options */ })
            ]
        },
        dist: {
            src: '*.css'
        }
    }
});