PostCSS в CSS — вне Autoprefixer

PostCSS в CSS — вне Autoprefixer

От автора: могу поспорить, что когда вы думаете о PostCSS CSS, вам приходит на ум что-то типа…
Дни с момента выхода последнего JavaScript фреймворка. Регулярные обновления по поводу того, сколько дней прошло с момента выхода JavaScript фреймворка или библиотеки dayssincelastjavascriptframework.com. Но правда в том, что PostCSS существует практически так же долго, как и React!

Почему PostCSS?

Самый распространённый вид использования PostCSS – это полная интеграция с Autoprefixer (Просто один из многих PostCSS плагинов. Сам по себе не является библиотекой.)

display: flex;
// становится
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

Написать такую логику вне более традиционных SASS / LESS миксинов и автоматически сделать её частью приложения – это же гениально.

Это действительно круто звучит и остаётся основной причиной того, что этот плагин, по данным NPM, скачивается 11,103,982 раз в месяц.

Очевидно, что отрасль нуждается в идеях, которые предлагает PostCSS. Один лишь плагин PostCSS скачивают больше, чем самые популярные JavaScript фреймворки / библиотеки… Можете проверить эту информацию на NPM. PostCSS не связан с другими фреймворками / библиотеками. Это Front-End инструмент.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Babel для CSS

PostCSS с плагинами, или лучше сказать с набором плагинов, можно использовать точно так же, как мы используем Babel в JavaScript.

CSSnext – это набор плагинов, которые среди других элементов могут трансформировать пользовательские свойства CSS в те, которые могут интерпретировать браузеры. Альтернативой CSSnext (которая лучше поддерживается) является postcss-preset-env

:root {
  --fontSize: 1rem;
}

h1 {
  font-size: var(--fontSize);
}

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

h1 {
  font-size: 1rem;
}

PostCSS – это «всего лишь» парсер для CSS. Это значит, что с его API, он может сделать всё возможное. Stylelint основан на PostCSS! Ознакомьтесь с этим восхитительным инструментом CSS здесь.

В чём суть PostCSS?

Странно, но суть PostCSS заключается не в CSS, а в том, что JavaScript может сделать с CSS. Давайте сделаем простое преобразование единственного свойства display: flex в множественные определения для конкретного браузера.

// требуем, чтобы postcss работал для нашего плагина 
const postcss = require('postcss');
// экспортируем плагин
module.exports = postcss.plugin('postcss-flex', (opts) => {
  opts = opts || {};
return (css) => {
 // определяем новые значения
 const values = [
 '-webkit-box',
 '-webkit-flex',
 '-ms-flexbox',
 ];
 // проводим итерацию через объявления 
 css.walkDecls('display', decl => {
 // игнорирование всего прочего, кроме flex
 if (decl.value !== 'flex') return;
 // сопоставляем значения с актуальной строкой
 const newDecls = values.map((value) => {
 return ` display: ${value}`;
 }).join(';');
 // добавляем новые объявления перед текущими
 decl.before(newDecls);
 });
  };
});

В сущности, PostCSS воспринимает источник CSS (или SASS / LESS) как вводные данные, даёт вам возможность изменять их и выдаёт конечный результат. Проще некуда.

Больше подробностей по поводу PostCSS API можно узнать здесь. Но помните, что документация автоматически генерируются из JSdoc (Если кто-нибудь когда-нибудь спросит у вас, зачем вам использовать JSdocs, просто скажите ему — PostCSS API docs). Хоть они и познавательные, ИМХО лучше бы они были написаны вручную.

Тематическое оформление

Если для поддержки вашей темы требуются разные палитры, вместе с другими переменными, которые нужно адаптировать, например, размеры шрифтов, или радиус границ, или… Одним из самых лёгких способов добиться этого является раздельное отображение переменных, например, цветов, радиуса страниц… в файле темы.

Для этого сценария мы можем задать @import только для файла темы по умолчанию и переместить import в конкретный файл темы во время создания, посредством PostCSS. В результате этого мы сможем легко создать тематические наборы CSS и никогда не добавлять ссылки на них в базу кода SASS.

@import './variables';
.button--color-primary {
  background-color: $primary;
}

Где variables.scss имеют такой маппинг.

@import '~styles/colors/colors';
$primary: $green;

variables.blue.scss темы имеют различный маппинг.

@import '~styles/colors/colors';
$primary: $blue;

Сам по себе SASS не поддерживает динамические импорты (импорты с переменными в их пути). Проблема #279 на Github SASS. Так что такие действия практически невозможны, если вы используете SASS. По крайней мере, без PostCSS…

PostCSS плагин для рерайта пути переменных в @importwww.npmjs.com

Этот маленький плагин является только одним примером креативного использования PostCSS. Как это работает?

/* 
  пример вариантов
  const opts = {
 originalValue: './variables',
 targetValue: './variables.blue'
  };
*/
css.walkAtRules((node) => {
  const isImport = (node.name  === 'import');
  const isOriginalValue = node.params.includes(opts.originalValue);
 
  if (isImport && isOriginalValue) {
 node.params = `"${opts.targetValue}";`;
  }
});

Забавный факт

Autoprefixer, возможно, устареет…

Автор: Develoger

Источник: https://develoger.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree