csstools / postcss-time-machine

Fix mistakes in the design of CSS itself

PostCSS Time Machine

PostCSS 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”.

npx postcss-time-machine SOURCE.css TRANSFORMED.css

Safe Fixes

These fixes do not change the way CSS normally works. They can be individually disabled by passing their short name into the fixes option.

border-box

Box-sizing should be border-box by default.

/* prepended to your css */

* {
  box-sizing: border-box;
}

corner-radius

border-radius should be corner-radius.

button {
  corner-radius: 3px;
}

/* becomes */

button {
  border-radius: 3px;
}

current-color

currentcolor should be current-color.

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

/* becomes */

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

display-type

The display property should be called display-type.

.some-component {
  display-type: grid;
}

/* becomes */

.some-component {
  display: grid;
}

marker-style

The list-style properties should be called marker-style.

.georgian-list {
  marker-style: square;
}

/* becomes */

.georgian-list {
  list-style: square;
}

no-wrap

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

h1 {
  white-space: no-wrap;
}

/* becomes */

h1 {
  white-space: nowrap;
}

overflow-wrap

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

a {
  white-space: overflow-wrap;
}

/* becomes */

a {
  word-wrap: break-word;
}

rgb-hsl

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).

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

/* becomes */

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

text-middle

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

button {
  vertical-align: text-middle;
}

/* becomes */

button {
  vertical-align: middle;
}

z-order

z-index should be called z-order or depth.

aside {
  depth: 10;
}

figure {
  z-order: 10;
}

/* becomes */

aside {
  z-index: 10;
}

figure {
  z-index: 10;
}

Unsafe Fixes

These fixes change the way CSS normally works. They can be individually enabled or disabled by passing their short name into the fixes option, or by setting the useUnsafeFixes option to false.

background-position

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

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

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

/* becomes */

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

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

background-size

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

header {
  background-size: 75%;
}

/* becomes */

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

line-height

line-height: <percentage> should compute to the equivalent line-height: <number>, so that it effectively inherits as a percentage not a length.

p {
  line-height: 200%;
}

/* becomes */

p {
  line-height: 2;
}

link-pseudo

:link should have had the :any-link semantics all along.

:link {
  color: blue;
}

/* becomes */

:link, :visited {
  color: blue;
}

Advanced Usage

Add PostCSS Time Machine to your project:

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

Use PostCSS Time Machine to process your CSS:

const postcssTimeMachine = require('postcss-time-machine');

postcssTimeMachine.process(YOUR_CSS /*, processOptions, pluginOptions */);

Or use it as a PostCSS plugin:

const postcss = require('postcss');
const postcssTimeMachine = require('postcss-time-machine');

postcss([
  postcssTimeMachine(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);

PostCSS Time Machine runs in all Node environments, with special instructions for:

Node	PostCSS CLI	Webpack	Create React App	Gulp	Grunt

Options

fixes

The fixes option lets you individually enable or disable individual fixes.

postcssTimeMachine({
  fixes: {
    'border-box': false // disables adding * { box-sizing: border-box; }
  }
})

useUnsafeFixes

The useUnsafeFixes option determines whether unsafe fixes will be applied or not. Individual features passed into the fixes option will override this. By default, unsafe features are enabled.

postcssTimeMachine({
  useUnsafeFixes: false // disables background-position, background-size, and line-height
})