Введение в PostCSS

Препроцессоры CSS популярны, но у них есть некоторые недостатки. В этом введении в PostCSS мы рассмотрим преимущества 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:

• Вы начинаете со стандартного CSS. PostCSS для CSS — это то же самое, что Babel для JavaScript. Это может занять стандартную таблицу стилей, которая работает в последних версиях браузеров и вывод CSS, который работает везде — например, transpiling более новое insetсвойство обратно в top, bottom, leftи rightсвойство. Со временем вы можете отказаться от этого процесса, поскольку все больше браузеров поддерживают inset.

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

• Используйте необходимые плагины и функции. PostCSS настраивается, и вы можете использовать необходимые плагины. Например, вы можете поддерживать партиалы и вложение, но не разрешать переменные, циклы, миксины, карты и другие функции, доступные в 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файл и строку. Например, при просмотре стилей будет выделена src/_elements.cssстрока 2, а не styles.cssстрока 8.

Вы можете создать внешнюю исходную карту, добавив к команде переключатель —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 использует модуль списка браузеров, чтобы определить, какие префиксы браузера добавить. По умолчанию:

• 0.5%: браузер с долей рынка не менее 0,5%
• last 2 versions: последние два выпуска этих браузеров
• Firefox ESR: включая выпуски расширенной поддержки Firefox
• not dead: любой браузер, поддержка которого не прекращена

Вы можете изменить эти значения по умолчанию, создав.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в корне папки вашего проекта. Также обратите внимание на следующее:

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

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

// PostCSS configruation
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. Расширение функциональности — это вопрос добавления и настройки дополнительных плагинов. Потратьте немного времени, и вскоре у вас будет рабочий процесс, который можно адаптировать для любого веб-проекта.