About Teletype
Join
Будни фронта
@budnifronta
December 14, 2021

Введение в PostCSS

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

Значение и ограничения препроцессоров

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

Трудно представить себе работу без препроцессора CSS, но есть и минусы:

  • Препроцессоры не являются расширяемыми или ограничиваемыми. Большинство препроцессоров - это "черный ящик", который предоставляет вам определенный набор поддерживаемых функций. Можно написать пользовательские функции, но функциональность, выходящая за рамки данного инструмента, остается невозможной - например, вставка SVG в качестве фонового изображения. Аналогично, вы не можете остановить разработчиков, использующих опции, которых вы предпочли бы избежать, такие как @extend или глубокая вложенность. Линтинг может помочь, но он не остановит препроцессор от компиляции корректного файла.
  • Препроцессоры предоставляют свой собственный синтаксис. Код препроцессора может напоминать CSS, но ни один браузер не сможет разобрать этот файл. Синтаксис отличается, и если ваш инструмент изменится или станет недоступным, ваш код потребует обновлений, чтобы сделать его пригодным для использования.

Преимущества более чем превосходят эти риски, но существует альтернатива ...

Что такое PostCSS?

PostCSS - это не препроцессор (хотя он может работать как таковой). Это инструмент Node.js, который берет валидный CSS и улучшает его. Даже те, кто использует Sass, Less или Stylus, часто выполняют шаг PostCSS после первоначальной компиляции CSS. Вероятно, вы сталкивались с плагином PostCSS Autoprefixer, который автоматически добавляет префиксы -webkit, -moz и -ms к свойствам CSS, которые их требуют.

Сам по себе PostCSS ничего не делает. Это синтаксический разборщик, который токенизирует код CSS для создания абстрактного синтаксического дерева. Плагин может обработать это дерево и соответствующим образом обновить свойства. После того, как все плагины завершат свою работу, PostCSS переформатирует все обратно в строку и выводит в файл CSS.

Доступно около 350 плагинов, и большинство из них выполняют одну задачу, например, инлайнинг @import деклараций, упрощение функций calc(), работа с изображениями, линтинг синтаксиса, минификация и многое другое. Более удобный поиск плагинов доступен в каталоге плагинов PostCSS.

Преимущества PostCSS

  • PostCSS является для CSS тем же, чем Babel является для JavaScript. Он может взять стандартную таблицу стилей, которая работает в последних браузерах, и вывести CSS, который работает везде - например, преобразовать новое свойство inset обратно в свойства top, bottom, left и right. Со временем вы можете отказаться от этого процесса, поскольку все больше браузеров поддерживают inset. Конечно, некоторые плагины позволяют анализировать синтаксис препроцессора, который не является стандартным CSS, но вы не обязаны их использовать.
  • Используйте плагины и функции, которые вам нужны. PostCSS является настраиваемым, и вы можете использовать те плагины, которые вам нужны. Например, вы можете поддерживать партиклы (partials) и вложенность, но не разрешать переменные, циклы, миксины, мапы и другие возможности, доступные в Sass.
  • Обеспечьте индивидуальную настройку для каждого проекта. Индивидуальная настройка проекта может расширить или уменьшить набор плагинов, используемых в других местах. Возможности намного разнообразнее, чем у любого препроцессора.
  • Пишите собственные плагины для PostCSS. Существует широкий спектр плагинов для расширения синтаксиса, разбора будущих свойств, добавления возвратов, оптимизации кода, обработки цветов, изображений, шрифтов и даже написания CSS на других языках, таких как испанский и русский. Если вдруг вы не найдете то, что вам нужно, вы можете написать свой собственный плагин PostCSS на JavaScript.
  • Возможно, вы уже используете PostCSS. Вы можете удалить зависимости от препроцессора, если уже используете плагин PostCSS, например AutoPrefixer. PostCSS не обязательно быстрее или легче, чем использование препроцессора, но он может обрабатывать все CSS за один шаг.

Установка PostCSS

PostCSS требует Node.js, но в этом руководстве демонстрируется, как установить и запустить PostCSS из любой папки - даже из тех, которые не являются проектами Node.js. Вы также можете использовать PostCSS из webpack, Parcel, Gulp.js и других инструментов, но мы будем придерживаться командной строки.

Установите PostCSS глобально в вашей системе, выполнив следующее:

npm install -g postcss-cli

Убедитесь, что он работает, введя это:

postcss --help

Установка вашего первого плагина PostCSS

Чтобы сделать что-то практичное, вам потребуется как минимум один плагин. Хорошим вариантом является плагин импорта PostCSS, который инлайнит все объявления @import и объединяет ваши CSS в один файл. Установите его глобально следующим образом:

npm install -g postcss-import

Чтобы протестировать этот плагин, откройте или создайте новую папку проекта, например cssproject, затем создайте подпапку src для ваших исходных файлов. Создайте файл main.css, чтобы загрузить все партиклы:

/* src/main.css */
@import '_reset';
@import '_elements';

Затем создайте файл _reset.css в той же папке:

/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}

После этого создайте файл _elements.css:

/* src/elements.css */
body {
  font-family: sans-serif;
}

label {
  user-select: none;
}

Запустите PostCSS из корневой папки проекта, передав входной CSS-файл, список плагинов для --use и имя --output файла:

postcss ./src/main.css --use postcss-import --output ./styles.css

Если у вас нет ошибок, следующий код будет выведен в новый файл styles.css в корне проекта:

/* src/main.css */
/* src/reset.css */
* {
  padding: 0;
  margin: 0;
}
/* src/elements.css */
body {
  font-family: sans-serif;
}
label {
  user-select: none;
}
/* sourceMappingURL=data:application/json;base64,...

Обратите внимание, что PostCSS может выводить файлы CSS в любом месте, но папка вывода должна существовать; он не будет создавать структуру папок за вас.

Включение и отключение карт источников

По умолчанию выводится встроенная карта исходного текста. Когда скомпилированный CSS-файл используется в HTML-странице, при его просмотре в инструментах разработчика браузера будет показан исходный src-файл и строка. Например, при просмотре стилей <body> будет выделена строка 2 src/_elements.css, а не строка 8 styles.css.

Вы можете создать внешнюю карту источников, добавив переключатель --map (или -m) к команде postcss. Пользы от этого немного, кроме того, что CSS-файл становится чище, и браузеру не нужно загружать карту исходников, если только не открыты инструменты разработчика.

Вы можете удалить карту источников с помощью опции --no-map. Всегда используйте эту опцию при выводе CSS-файлов для продакшен развертывания.

Установка и использование плагина AutoPrefixer

Плагин Autoprefixer часто является первым знакомством разработчика с PostCSS. Он добавляет префиксы поставщиков в соответствии с использованием браузера и правилами, определенными на сайте caniuse.com. Префиксы поставщиков меньше используются в современных браузерах, которые скрывают экспериментальную функциональность за флагами. Однако все еще существуют свойства, такие как user-select, для которых требуются префиксы -webkit-, -moz- и -ms-.

Установите плагин глобально с помощью этого:

npm install -g autoprefixer

Затем укажите его как еще один параметр --use в команде postcss:

postcss ./src/main.css --use postcss-import --use autoprefixer --output ./styles.css

Изучите объявление label в строке 11 файла styles.css, чтобы увидеть свойства, привязанные к производителю:

label {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

AutoPrefixer использует модуль browserlist для определения того, какие префиксы браузера необходимо добавить. По умолчанию это:

  • > 0,5%: браузер с долей рынка не менее 0,5%
  • последние 2 версии: последние два выпуска этих браузеров
  • Firefox ESR: включая Firefox Extended Support Releases
  • не устаревший: любой браузер, который не снят с производства

Вы можете изменить эти настройки по умолчанию, создав файл .browserslistrc. 

> 2%

Или вы можете добавить массив "browserslist" в package.json в проекте Node.js. 

"browserslist": [
   "> 2%"
]

Для адресации браузеров с долей рынка 2% и более требуется только префикс -webkit- в Safari:

label {
  -webkit-user-select: none;
          user-select: none;
}

Минимизация CSS с помощью cssnano

cssnano минимизирует CSS, удаляя пробелы, комментарии и другие ненужные символы. Результаты могут быть разными, но вы можете ожидать уменьшения файлов на 30%, которые можно развернуть на продакшен серверах для повышения производительности веб-страниц.

Установка cssnano глобально:

npm install -g cssnano

Затем добавьте его в команду postcss. Мы также включим --no-map, чтобы отключить карту источников:

postcss ./src/main.css --use postcss-import --use autoprefixer --use cssnano --no-map --output ./styles.css

Это сокращает CSS-файл до 97 символов:

*{margin:0;padding:0}body{font-family:sans-serif}label{-webkit-user-select:none;user-select:none}

Автоматическая сборка при изменении исходных файлов

Опция PostCSS --watch автоматически собирает ваш CSS-файл при изменении любого из исходных файлов. Вы также можете добавить переключатель --verbose, который сообщает, когда происходит сборка:

postcss ./src/main.css --use postcss-import --use autoprefixer --use cssnano --no-map --output ./styles.css --watch --verbose

Ваш терминал покажет Waiting for file changes. Внесите изменения в любой файл, и файл styles.css будет перестроен. PostCSS также сообщит о любых проблемах, таких как синтаксические ошибки.

Для завершения нажмите Ctrl | Cmd + C в терминале.

Создание файла конфигурации PostCSS

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

Создайте файл конфигурации с именем postcss.config.cjs в корне папки вашего проекта. Также обратите внимание на следующее:

  • вы можете поместить файл в другую папку, но при запуске postcss вам нужно будет указать --config <dir>
  • вы можете использовать postcss.config.js в качестве имени файла, но PostCSS может не работать в проектах Node.js, у которых "type": "module" в package.json

Добавьте следующий код в файл postcss.config.cjs:

// Конфигурация PostCSS
module.exports = (cfg) => {
  const devMode = (cfg.env === 'development');

  return {
    map: devMode ? 'inline' : null,
    plugins: [
      require('postcss-import')(),
      require('autoprefixer')(),
      devMode ? null : require('cssnano')()
    ]
  };
};

PostCSS передает объект cfg, который содержит параметры командной строки. 

{
  cwd: '/home/yourname/cssproject',
  env: undefined,
  options: {
    map: { inline: true },
    parser: undefined,
    syntax: undefined,
    stringifier: undefined
  },
  file: {
    dirname: '/home/yourname/cssproject/src',
    basename: 'main.css',
    extname: '.css'
  }
}

Модуль должен возвращать объект с необязательными свойствами:

  • map: настройка карты источника
  • parser: использовать ли синтаксический анализатор не-CSS (например, плагин scss).
  • plugins: массив плагинов и конфигураций для обработки в указанном порядке

Приведенный выше код определяет, есть ли у команды postcss опция --env. Это сокращение для установки переменной окружения NODE_ENV. Чтобы скомпилировать CSS в режиме разработки, запустите postcss с опцией --env development и, опционально, установите --watch --verbose. Это создает встроенную карту исходников и не минифицирует вывод:

postcss ./src/main.css --output ./styles.css --env development --watch --verbose

Чтобы работать в производственном режиме и компилировать минифицированный CSS без карты исходников, используйте следующее:

postcss ./src/main.css --output ./styles.css

В идеале, вы можете запускать их как скрипты терминала или npm, чтобы еще больше сократить усилия по набору текста.

Опыт PostCSS

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

В руководстве по использованию PostCSS в качестве настраиваемой альтернативы Sass приведено больше примеров конфигурации и вариантов плагинов.

Дальнейшие ссылки:

Источник: https://www.sitepoint.com/an-introduction-to-postcss/

Kodya Temirov
December 14, 2021, 05:19
1 reaction
0 views