PostCSS

(and such)

We have a problem, y'all

@function asin($z, $threshold: $default-threshold) {
  $sum: 0;
  $complement: false;
  $sign: $z/abs($z);
  $z: abs($z);

  @if $z > sin(pi()/4) {
    $complement: true;
    $z: sqrt(1 - pow($z, 2));
  }

  $term: $z;
  $i: 0;
  $k: 1;

  @while $term > $threshold {
    $sum: $sum + $term;

    $i: $i + 1;
    $k: $k*(2*$i - 1)/(2*$i);
    $j: 2*$i + 1;

    $term: $k*pow($z, $j)/$j;
  }

  @return $sign * (if($complement, pi()/2 - $sum, $sum));
}

but no, srsly

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments

body
  font 12px Helvetica, Arial, sans-serif

a.button
  border-radius 5px

What we often do

Do you really need all of that?

The Solution?

future CSS in;

robust CSS out

look at how cool this is

/* custom properties */
:root {
  --fontSize: 1rem;
  --mainColor: #12345678;
  --highlightColor: hwb(190, 35%, 20%);
}

/* custom media queries */
@custom-media --viewport-medium (width <= 50rem);

/* some var() & calc() */
body {
  color: var(--mainColor);
  font-size: var(--fontSize);
  line-height: calc(var(--fontSize) * 1.5);
  padding: calc((var(--fontSize) / 2) + 1px);
}

/* custom media query usage */
@media (--viewport-medium) {
  body {
    font-size: calc(var(--fontSize) * 1.2);
  }
}

/* custom selectors */
@custom-selector --heading h1, h2, h3, h4, h5, h6;
--heading { margin-top: 0 }

/* filters */
.blur {
  filter: blur(4px);
}

.sepia {
  filter: sepia(.8);
}

Summarizing

• It's fast (~3x faster than libsass)
• Pretty damned lightweight
• So modular that it should be illegal
• Leverages transformatoins instead of truly transpiling