Введение в PostCSS: что такое cssnext и cssnano

Development | Amber | Комментировать запись

PostCSS – это новый инструмент, который упрощает разработку плагинов JavaScript для преобразования стилей. Он открывает множество возможностей для новых плагинов, которые упрощают работу с CSS. Сегодня мы рассмотрим два самых популярных плагина PostCSS: cssnext и cssnano.

Читайте также: Как работает CSS-функция color-mod

cssnext позволяет использовать новейшие функции CSS, которые поддерживаются не во всех браузерах (например переменные CSS и функцию color). Плагин cssnext преобразует ваши стили таким образом, чтобы они работали во всех браузерах. Другими словами, он позволяет вам писать стили фактическим синтаксисом CSS вместо синтаксиса другого препроцессора. Также cssnext автоматически добавляет к стилям префиксы поставщиков, поэтому при написании CSS вам не нужно писать эти префиксы самостоятельно.

Для примера давайте предположим, что у нас есть следующие стили CSS:

:root {
  --text: hotpink;
  --bg-color: #F9EC31;
  --flex-center: {
    display: flex;
    margin: auto;
  }
}

.box {
  background-color: var(--bg-color);
  color: color(hotpink whiteness(25%));
  @apply(--flex-center);
}

.warn {
  @apply(--flex-center);
}

Плагин cssnext преобразует их следующим образом:

.box {
  background-color: #F9EC31;
  color: rgb(255, 64, 159);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
}

.warn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
}

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

Вы можете настроить плагины cssnext и cssnano в соответствии с вашими конкретными потребностями, но в этом мануале мы посмотрим, как они работают по умолчанию. Надеемся охватить большинство сценариев использования этих плагинов.

В этом примере мы будем использовать PostCSS-CLI, но вы можете использовать PostCSS в Webpack или Grunt, если это лучше подходит вашему рабочему процессу.

Установка PostCSS, PostCSS-CLI, cssnext и cssnano

Установите PostCSS вместе с плагинами cssnext и cssnano с помощью npm:

$ npm install --save-dev postcss postcss-cli postcss-cssnext cssnano

Или Yarn:

$ yarn add postcss postcss-cli postcss-cssnext cssnano --dev

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

Через интерфейс командной строки PostCSS мы можем предоставлять входные и выходные файлы, а также плагины PostCSS, которые нужно использовать. Плагины указываются с помощью флага –use, выходной файл – с помощью –ouput, а входной файл просто идет последним, без каких-либо флагов:

$ postcss --use postcss-cssnext --use cssnano --output styles-out.css styles.css

Вы также можете использовать PostCSS CLI в режиме наблюдения, чтобы строка отслеживала изменения во входном файле:

$ postcss --use postcss-cssnext --use cssnano --output styles-out.css styles.css --watch

А еще можно указать более детальные параметры конфигурации в конфигурационном файле json и определить конфигурационный файл с помощью флага –config:

$ postcss --config postcss-config.json

Ваш конфигурационный файл будет выглядеть так:

{
  "use": ["postcss-cssnext", "cssnano"],
  "input": "styles.css",
  "output": "styles-out.css"
}

Сценарий npm

Чтобы упростить рабочий процесс, вы можете просто определить сценарий postcss в файле package.json вашего проекта:

"scripts": {
  "postcss": "postcss --use postcss-cssnext --use cssnano --output styles-out.css styles.css"
}

Все, что вам нужно сделать теперь – запустить такую команду:

$ npm run postcss