Что такое PostCSS? / Тяпк

PostCSS - процессор CSS. Преобразует исходный CSS в модифицированный CSS с помощью плагинов. Немного дезориентирует приставка -post. Нет, это не постпроцессор и, тем более, не препроцессор. Я бы назвал PostCSS трансформатором кода CSS. Он позволяет даже такой код

.some-class {
  высота: 20пикселей;
  отображение: блочное;
  цвет: черный;
  цвет-фона: желтый;
}

Перевести в такой:

.some-class {
  height: 20px;
  display: block;
  color: black;
  background-color: yellow;
}

Ядро PostCSS

У PostCSS есть ядро, непосредственно главный модуль, которое делает 2 вещи:

Создаёт абстрактное синтаксическое дерево (ACT) из CSS-строки. Результат в виде javascript объектов.
Неважно, что содержится в исходном CSS файле, главное наличие CSS правил:
Создаёт CSS строку из абстрактного синтаксического дерева. Результат в виде CSS строки.

Алгоритм работы ядра примерно такой:
Из CSS кода

selector {
    prop1: value1;
    prop2: value2;
    …
    propN: valueN
}

Получаем JS объекты ввиде дерева.

var ast = {
  selector: {
    prop1: value1,
    prop2: value2,
    …
    propN: valueN    
  }
};

Из которых обратно получаем CSS код

selector {
    prop1: value1;
    prop2: value2;
    …
    propN: valueN
}

Ядро PostCSS, самая его главная часть, никаких преобразований не делает. И тут возникает закономерный вопрос. Какого ...

Где преобразования???

Спокойствие, только спокойствие

Всё делают подключаемые JavaScript плагины. В этом вся фишка, плагины подключаются на этапе JS объектов (ACT), совершают некие преобразования, а затем ядро собирает CSS код. Плагины передают между собой по цепочке ACT.

Например плагин autoprefixer из примера выше может сделать так:

var ast = {
  selector: {
    prop1: value1,
    -webkit-prop1: value1,
    -moz-prop1: value1,
    -ms-prop1: value1,
    prop2: value2,
    …
    propN: valueN    
  }
};

Из него получится соответствующий CSS код. Для PostCSS уже написано много крутых плагинов, с их помощью можно сделать свой препроцессор с блекджеком, миксинами и переменными.

Важные плагины PostCSS

Автопрефиксер.
Самый известный PostCSS плагин. Добавляет вендорные префиксы к CSS правилам используя данные о популярности современных браузеров Can I Use. Можно явно указывать поддерживаемость браузеров, например 'last 2 versions', 'ie 8', 'ie 9'
CSSNext
Cssnext – это транспайлер. Вы пишете код на CSS 4, который еще не утвержден в стандарт, а он компилируется в CSS 3 и работает. Когда CSS 4 станет стандартом, вы будете использовать свой код без этого транспайлера
CSSGrace
Cssgrace – это транспайлер)). Вы пишите код на нормальном CSS, а он компилируется в CSS для таких динозавров как IЕ6 или IЕ7.
LostGrid
Умная система сеток. LostGrid использует CSS функцию calc(), чтобы вычислять размеры сетки, что позволяет максимально гибко и быстро создавать любые сетки.