PostCSS Time Machine

Time Machine fixes mistakes in the design of CSS itself, as described by the CSSWG.

They specifically requested that these should be corrected “if anyone invents a time machine”.

no-wrap

In white-space, nowrap should be called no-wrap.

/* before */

h1 {
    white-space: no-wrap;
}

/* after */

h1 {
    white-space: nowrap;
}

text-middle

In vertical-align, middle should be called text-middle.

/* before */

button {
    vertical-align: text-middle;
}

/* after */

button {
    vertical-align: middle;
}

background-size

In background-size, having one value should duplicate its value, not default the second one to auto.

/* before */

header {
    background-size: 75%;
}

/* after */

header {
    background-size: 75% 75%;
}

background-position

background-position and border-spacing (all 2-axis properties) should take vertical first, to match with the 4-direction properties like margin.

/* before */

body {
    background-position: 0% 50%;
}

table {
    border-spacing: 10px 5px;
}

/* after */

body {
    background-position: 50% 0%;
}

table {
    border-spacing: 5px 10px;
}

z-order

z-index should be called z-order.

/* before */

aside {
    z-order: 10;
}

/* after */

aside {
    z-index: 10;
}

overflow-wrap

word-wrap/overflow-wrap should not exist, and overflow-wrap should be a keyword on white-space.

/* before */

a {
    white-space: overflow-wrap;
}

/* after */

a {
    word-wrap: break-word;
}

corner-radius

border-radius should be corner-radius.

/* before */

button {
    corner-radius: 3px;
}

/* after */

button {
    border-radius: 3px;
}

current-color

currentcolor should be current-color.

/* before */

button {
    box-shadow: 0 0 5px solid current-color;
}

/* after */

button {
    box-shadow: 0 0 5px solid currentColor;
}

rgb & hsl

rgba() and hsla() should not exist, and rgb() and hsl() should have an optional fourth alpha parameter (which should use the same format as R, G, and B or S and L).

/* before */

header {
    background-color: rgb(0, 0, 255, 102);
    color: hsla(170, 50%, 45%, 80%);
}

/* after */

header {
    background-color: rgba(0, 0, 255, .4);
    color: hsla(170, 50%, 45%, .8);
}

Usage

Add Time Machine to your build tool:

npm install postcss-time-machine --save-dev

Node

require('postcss-time-machine')({ /* options */ }).process(YOUR_CSS);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Load Time Machine as a PostCSS plugin:

postcss([
    require('postcss-time-machine')({ /* options */ })
]);

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Enable Time Machine within your Gulpfile:

var postcss = require('gulp-postcss');

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

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Enable Time Machine within your Gruntfile:

grunt.loadNpmTasks('grunt-postcss');

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

Options

Any feature of Time Machine may be disabled by passing a false value to its feature key.

Example:

require('postcss-time-machine')({
    rgba: false
})

Features include background-position, background-size, border-spacing, corner-radius, current-color, hsl, rgb, vertical-align, white-space, and z-order.