Статьи

Введение в 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:

 postcss -u autoprefixer styles.css -d dist

Это говорит о следующем: запустите Autoprefixer для styles.cssdist/styles.css . Теперь, если вы откроете dist/styles.css

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

Если вы запустите PostCSS с флагом -wstyles.css

Конфигурация плагина

Мы можем настроить Autoprefixer для добавления префиксов в соответствии с браузерами, которые мы планируем поддерживать. Это можно сделать с помощью опции browsers При запуске PostCSS через CLI, конфигурация плагина должна быть определена в отдельном файле .json, например, postcss.json Давайте создадим файл в текущей папке и настроим Autoprefixer для поддержки двух самых последних версий каждого браузера.

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

Теперь мы можем перезапустить наблюдатель PostCSS с новым файлом конфигурации:

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

Включение исходных карт

Исходные карты необходимы для отладки скомпилированного CSS. PostCSS может генерировать встроенные исходные карты в выходном файле, если вы добавите опцию --map-m

Еще больше плагинов

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

Чтобы дать вам пример, вот еще несколько плагинов, которые демонстрируют возможности PostCSS.

Плагин пользовательских свойств для переменных CSS

Плагин postcss-custom-properties предназначен для реализации поддержки спецификации пользовательских свойств W3C (она же нативные переменные ). Это позволяет вам определять пользовательские свойства в селекторе с произвольными значениями и ссылаться на них в других местах таблицы стилей.

Это служит аналогично переменным Less и Sass: хранить общие значения и исключать дублирование кода. Основное отличие состоит в том, что механизм определения области действия немного отличается; Подобно обычным свойствам, пользовательские свойства CSS распространяются вдоль каскада элементов, а не в виде блоков.

Вот пример того, как работает этот плагин. Следующий код:

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

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

Будет компилировать в:

 .container {
  width: 800px;
}

Плагин пользовательских селекторов

Плагин postcss-custom-selectors реализует спецификацию Custom Selector . Это позволяет предварительно определять селекторы и ссылаться на них позже в коде. Например, мы можем сохранить все заголовки в одном селекторе и повторно использовать это как переменную:

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

:--headings {
  color: mediumblue;
}

Который будет компилироваться следующим образом:

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

Русский плагин Stylesheets

Вы когда-нибудь хотели изучать русский язык, но были слишком заняты написанием CSS? Не беспокойтесь, теперь вы можете сделать и то и другое, написав CSS на русском языке! Просто используйте плагин Russian Stylesheets . Проверь это:

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

Который переводится на:

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

Ну … я никогда не говорил, что все плагины были одинаково полезны!

Завершение дела

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

Нам нужны не только новые возможности при написании таблиц стилей, нам также нужна модульность, дополнительное знакомство с новыми стандартами, а также гибкие процессы сборки. PostCSS предоставляет именно это и может изменить игру в мире CSS.