PostCSS Time Machine一个 PostCSS 库修复了 CSS 本身的一些错误（掘金上也有人分享过）

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.