Введение в PostCSS

Большинство разработчиков, которые проводят время за работой с CSS, знакомы с такими препроцессорами, как Less, Sass и Stylus. Эти инструменты стали важной частью экосистемы веб-разработки. Написание стилей для веб-сайта без использования таких функций, как вложение, переменные или миксины, теперь кажется громоздким и неудобным Хотя каждый из них является отличным и чрезвычайно полезным продуктом, давайте сделаем шаг назад и рассмотрим, является ли использование препроцессоров таким способом действительно лучшим подходом.

Я вижу пару проблем с традицией препроцессоров:

• Они не расширяются. Какой бы препроцессор вы ни выбрали, вы ограничены набором функций, которые он предоставляет. Если вам нужно что-то еще, вам нужно добавить это как отдельный шаг в процессе сборки. Если вам хочется написать собственное расширение, вы сами по себе.
• Вы не можете ничего оставить. Некоторые функции, предоставляемые препроцессорами, такие как @extendмогут быть вам вредны , и вы можете полностью их исключить. К сожалению, хотя вы можете избежать их использования, вы не можете удалить эту часть инструмента, чтобы минимизировать код.
• Они выдвигают стандарты CSS. Можно сказать, что каждый из препроцессоров стал собственным стандартом. К сожалению, они не стремятся быть совместимыми со стандартами W3C, а это значит, что их нельзя использовать в качестве полифилов для раннего тестирования новых стандартов W3C.

Вот тут и приходит PostCSS.

Что такое PostCSS?

PostCSS сам по себе не является препроцессором; это не трансформирует CSS. На самом деле, он сам по себе мало что делает. Он предоставляет синтаксический анализатор CSS и платформу для создания плагинов, которые могут анализировать, связывать, обрабатывать ресурсы, оптимизировать, создавать запасные варианты и иным образом преобразовывать анализируемый CSS. PostCSS анализирует CSS в абстрактном синтаксическом дереве (AST), пропускает его через серию плагинов и затем объединяет обратно в строку. Если вы знакомы с инструментами JavaScript, то можете думать о PostCSS как о Babel для CSS.

В настоящее время существует более 200 плагинов для PostCSS, многие из которых перечислены на странице PostCSS GitHub , а другие можно найти в полезном каталоге PostCSS postcss.parts . PostCSS может быть интегрирован в большинство инструментов сборки, включая Gulp, Grunt, webpack или npm.

Итак, как PostCSS решает проблемы, которые мы перечислили ранее?

• Каждый плагин устанавливается отдельно. Это означает, что вы выбираете, какие из них вам нужны и в каком порядке их следует применять. Обычно плагины могут быть дополнительно настроены с использованием некоторого набора параметров.
• Вы можете написать свои собственные плагины. Каждый плагин PostCSS получает проанализированный CSS в качестве входного параметра, анализирует или изменяет его и возвращает его таким же образом. Это означает, что плагинам не нужно обрабатывать CSS и преобразовывать его обратно в строку. Таким образом, возможность создавать свои собственные плагины не так сложна, как вы думаете.
• PostCSS может быть использован для реализации реальных функций W3C. Существует множество плагинов, предназначенных для реализации функций из новых спецификаций W3C. Это позволит вам писать код, который соответствует стандартам и, вероятно, будет совместим с будущими версиями CSS.

Использование PostCSS

Теория великолепна, но давайте перейдем к сочной практике. Давайте установим PostCSS и посмотрим, что он на самом деле может делать. Мы не будем вдаваться в подробности о настройке правильных сборок проекта, поскольку эта тема заслуживает отдельной статьи. Вместо этого мы запустим PostCSS прямо из командной строки. Вы можете найти больше информации об использовании PostCSS с вашим любимым инструментом для сборки на странице Github .

Установка PostCSS

PostCSS устанавливается через узел и npm, поэтому убедитесь, что они установлены перед началом работы. Чтобы установить PostCSS глобально в вашей системе, запустите:

 npm install -g postcss-cli

Вы можете убедиться, что он работает, запустив:

 postcss --help

Это даст вам список параметров, которые принимает CLI. Вы также можете найти их в документации postcss-cli .

Запуск PostCSS

Теперь, когда у нас установлен PostCSS, давайте поработаем с ним. Создайте файл styles.css Например, определите контейнер flexbox:

 .container {
  display: flex;
}

Flexbox — отличная функция, но для определенных браузеров требуются префиксы поставщиков. Я бы не хотел поддерживать их вручную. К счастью, Autoprefixer , один из самых популярных плагинов PostCSS, делает именно это. Он автоматически добавляет префиксы поставщиков на основе информации, предоставленной через « Могу ли я использовать» . Я покажу вам, как его использовать, чтобы обновлять префиксы наших поставщиков.

Чтобы установить Autoprefixer, запустите:

 npm install -g autoprefixer

Затем перейдите к папке вашего проекта и создайте папку dist

 mkdir dist

 postcss -u autoprefixer styles.css -d dist

 .container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

 {
  "autoprefixer": {
    "browsers": ["last 2 versions"]
  }
}

 postcss styles.css -u autoprefixer -c postcss.json -d dist -w

 :root {
  --container-width: 800px;
}

.container {
  width: var(--container-width);
}

 .container {
  width: 800px;
}

 @custom-selector :--headings h1, h2, h3, h4, h5, h6;

:--headings {
  color: mediumblue;
}

 h1,
h2,
h3,
h4,
h5,
h6 {
  color: mediumblue;
}

 h1 {
  размер-шрифта: 20пикселей;
  цвет: красный;
  цвет-фона: белый;
  вес-шрифта: жирный;
}

 h1 {
  font-size: 20px;
  color: red;
  background-color: white;
  font-weight: bold;
}