postCSS Cheat Sheet by XTender

// PRE
body {
  background: resolve('foobar.jpg');
  background: resolve('icons/baz.png');
}
// POST
body {
  background: url('/media/foobar.jpg');
  background: url('/icons/baz.png');
}

// PRE
body {
  width: width('images/foobar.png');
  height: height('images/foobar.png');
  background-size: size('images/foobar.png');
}

// POST
body {
  width: 320px;
  height: 240px;
  background-size: 320px 240px;
}

// PRE
body {
  background: inline('images/foobar.png');
}

// POST
body {
  background: url(data:image/jpeg;base64);
}

// PRE
body {
  background-image: svg("ei#sc-github", "[fill]: black");
}

// POST
body {
  background-image: url(„data:image/svg+xml,%3Csvg%20id%3D%22ei-sc-github-icon%22%20viewBox%3D%220%200%2050….“);
}

//PRE
@utility utilityName {
  color: green;
}
@utility utilityName small {
  color: blue;
}
@component ComponentName {
  color: cyan;

  @modifier modifierName {
    color: yellow;
  }
  @descendent descendentName {
    color: navy;
  }
  @when stateName {
    color: crimson;
  }
}

@component-namespace nmsp {
  @component ComponentName {
    color: red;
  }
}

// POST
.u-utilityName {
  color: green;
}
.u-sm-utilityName {
  color: blue;
}
.ComponentName {
  color: cyan;
}
.ComponentName--modifierName {
  color: yellow;
}
.ComponentName-descendentName {
  color: navy;
}
.ComponentName.is-stateName {
  color: crimson;
}
.nmsp-ComponentName {
  color: red;
}

// PRE
.circle {
  circle: 100px red;
}

// POST
.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
}

// PRE
.foo {
  position: absolute 10px 0;
}
.bar {
  position: fixed 0;
}
.baz {
  position: relative 30% auto 0;
}
.fab {
  position: absolute 10px 0 20px 30px;
}

// POST
.foo {
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 10px;
  left: 0;
}
.bar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.baz {
  position: relative;
  top: 30%;
  right: auto;
  bottom: 0;
  left: auto;
}
.fab {
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 20px;
  left: 30px;
}

// PRE
.Test {
  margin-left: 20px;
  margin-right: @margin-left;
  color: red;
  background: @color url('test.png');
  line-height: 1.5;
  font-size: @(line-height)em;
}

// POST
.Test {
  margin-left: 20px;
  margin-right: 20px;
  color: red;
  background: red url('test.png');
  line-height: 1.5;
  font-size: 1.5em;
}

// PRE
.two {
    size: 20px 10px;
}
.one {
    size: 10px;
}

// POST
.two {
    width: 20px;
    height: 10px;
}
.one {
    width: 10px;
    height: 10px;
}

// PRE
.foo {
  top: center;
  left: center;
}

//POST
.foo {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}