Что такое 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 вещи:

  1. Создаёт абстрактное синтаксическое дерево (ACT) из CSS-строки. Результат в виде javascript объектов.
    Неважно, что содержится в исходном CSS файле, главное наличие CSS правил:
  2. Создаёт 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 станет стандартом, вы будете использовать свой код без этого транспайлера CSSNext

  • CSSGrace
    Cssgrace – это транспайлер)). Вы пишите код на нормальном CSS, а он компилируется в CSS для таких динозавров как IЕ6 или IЕ7. CSSGrace

  • LostGrid
    Умная система сеток. LostGrid использует CSS функцию calc(), чтобы вычислять размеры сетки, что позволяет максимально гибко и быстро создавать любые сетки.

Как сделать из PostCSS аналог препроцессора:

Следует использовать следующие плагины:

Скорость работы PostCSS

За счёт модульности PostCSS работает быстрее SASS, LESS, Stylus и других CSS процессоров. Сравнение скорости CSS процессоров


По мотивам:

Похожие записи

О слайдах

Youtube видео. Мастер-класс Алексея Каптерева "О слайдах", почему большинство презентаций со слайдами — очень скучные и запутанные, и о том, как превратить ваши слайды из ваших противников в ваших союзников.