Препроцессоры CSS популярны, но у них есть некоторые недостатки. В этом введении в PostCSS мы рассмотрим преимущества PostCSS, как он работает и чего можно достичь с помощью обширного набора плагинов.
Ценность и ограничения препроцессоров
Большинство разработчиков CSS знакомы с препроцессорами. Инструменты, включая Sass, Less и Stylus, представили такие понятия, как частичные файлы, вложенность, переменные и миксины. Некоторые функции постепенно появляются в собственном CSS, но препроцессор
Возможно, жизнь сложно представить без препроцессора CSS, но есть и минусы:
Препроцессоры нельзя расширять или ограничивать. Большинство препроцессоров представляют собой черный ящик, который предоставляет вам определенный набор поддерживаемых функций. Написание пользовательских функций возможно, но функциональность, выходящая за рамки этого инструмента, остается невозможной — например, встраивание SVG в качестве фонового изображения.
Точно так же вы не можете запретить разработчикам использовать параметры, которых вы бы предпочли избегать, такие как @extendили глубокая вложенность. Линтинг может помочь, но он не остановит препроцессор при компиляции корректного файла.
Препроцессоры имеют собственный синтаксис. Код препроцессора может напоминать CSS, но ни один браузер не может проанализировать файл изначально. Синтаксис отличается, и если ваш инструмент изменится или станет недоступен, ваш код потребует обновлений, чтобы сделать его пригодным для использования.
Преимущества более чем перевешивают эти риски, но есть альтернатива...
Что такое PostCSS?
PostCSS не является препроцессором (хотя может вести себя как таковой). Это инструмент Node.js, который берет действительный CSS и улучшает его. Даже те, кто использует Sass, Less или Stylus, часто запускают шаг PostCSS после первоначальной компиляции CSS. Возможно, вы сталкивались с плагином PostCSS
Сам по себе PostCSS ничего не делает. Это синтаксический анализатор, который токенизирует код CSS для создания абстрактного синтаксического дерева. Плагин может обрабатывать это дерево и соответствующим образом обновлять свойства. Когда все плагины завершат свою работу, PostCSS переформатирует все обратно в строку и выведет в файл CSS.
Доступно около 350 подключаемых модулей, и большинство из них выполняют одну задачу, такую как встраивание @importобъявлений, упрощение calc () функций, обработка ресурсов изображений, анализ синтаксиса, минимизация и многое другое. Более удобный поиск плагинов доступен в каталоге плагинов PostCSS.
Преимущества PostCSS включают в себя:
Вы начинаете со стандартного CSS. PostCSS для CSS — это то же самое, что Babel для JavaScript. Он может использовать стандартную таблицу стилей, которая работает в последних браузерах, и выводить CSS, который работает везде — например, преобразование более нового 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 —help
Установка вашего первого плагина PostCSS
Вам понадобится хотя бы один плагин, чтобы сделать
npm install -g
Чтобы протестировать этот плагин, откройте или создайте новую папку проекта, например 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 {
}
label {
}
Запустите PostCSS из корневой папки проекта, передав входной файл CSS, список плагинов —useи —outputимя файла:
postcss. /src/main.css —use
Если у вас нет ошибок, следующий код будет выведен в новый styles.cssфайл в корне проекта:
/* src/main.css */
/* src/reset.css */
* {
padding: 0;
margin: 0;
}
/* src/elements.css */
body {
}
label {
}
/* sourceMappingURL=data: application/json; base64,...
Обратите внимание, что PostCSS может выводить файлы CSS где угодно, но выходная папка должна существовать; он не создаст для вас структуру папок.
Включение и отключение исходных карт
По умолчанию выводится встроенная исходная карта. Когда скомпилированный файл CSS используется на
стилей будет выделена src/_elements.cssстрока 2, а не styles.cssстрока 8.
Вы можете создать внешнюю исходную карту, добавив в команду переключатель —map (или). В этом мало пользы, кроме того, что файл CSS чище, и браузеру не нужно загружать исходную карту, если не открыты инструменты разработчика. -mpostcss
Вы можете удалить исходную карту с помощью —
Установите и используйте плагин AutoPrefixer
Плагин Autoprefixer часто является первым знакомством разработчика с PostCSS. Он добавляет префиксы поставщиков в соответствии с использованием браузера и правилами, определенными на caniuse.com. Префиксы поставщиков меньше используются в современных браузерах, которые скрывают экспериментальную функциональность за флагами. Однако существуют свойства,
Установите плагин глобально следующим образом:
npm install -g autoprefixer
Затем укажите его как еще одну —useопцию в вашей postcssкоманде:
postcss. /src/main.css —use
Изучите labelобъявление из строки 11, styles.cssчтобы просмотреть свойства с префиксом поставщика:
label {
-
-
-
}
AutoPrefixer использует модуль browserlist, чтобы определить, какие префиксы браузера добавить. По умолчанию:
> 0.5%: браузер с долей рынка не менее 0,5%
last 2 versions: последние две версии этих браузеров
Firefox ESR: включая выпуски расширенной поддержки Firefox
not dead: любой браузер, который не снят с производства
Вы можете изменить эти значения по умолчанию, создав.browserslistrcфайл. Например:
> 2%
Или вы можете добавить «browserslist»массив package.jsonв проект Node.js. Например:
«browserslist»: [
«> 2%»
]
Для таргетинга на браузеры с долей рынка 2% и более требуется только -
label {
-
}
Минимизируйте CSS с помощью cssnano
cssnano минимизирует CSS, удаляя пробелы, комментарии и другие ненужные символы. Результаты будут разными, но вы можете ожидать 30%-го сокращения файлов, которые вы можете развернуть на производственных серверах для повышения производительности
Установите cssnano глобально:
npm install -g cssnano
Затем добавьте его в свою postcssкоманду. Мы также включим —
postcss. /src/main.css —use
Это уменьшает файл CSS до 97 символов:
*{margin:0; padding:0}body{
Автоматическая сборка при изменении исходных файлов
Параметр PostCSS —watchавтоматически создает ваш файл CSS при изменении любого из исходных файлов. Вы также можете добавить —verboseпереключатель, который сообщает, когда происходит сборка:
postcss. /src/main.css —use
Ваш терминал покажет Waiting for file changes. Вносите изменения в любой файл и styles.cssперестраивается. PostCSS также сообщит о любых проблемах, таких как синтаксические ошибки.
Чтобы закончить, нажмите Ctrl| Cmd+ Cв терминале.
Создайте файл конфигурации PostCSS
Команда postcssстанет длинной и громоздкой по мере добавления дополнительных плагинов и опций. Вы можете создать файл конфигурации JavaScript, который определяет все параметры и может логически определить, работает ли он в среде разработки или в рабочей среде.
Создайте файл конфигурации с именем postcss.config.cjsв корне папки вашего проекта. Также обратите внимание на следующее:
вы можете поместить файл в другую папку, но вам нужно будет указать —config
вы можете использовать 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 ('
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 в качестве настраиваемой альтернативы Sass содержит дополнительные примеры конфигурации и параметры плагинов.
