PostCSS - за пределами автопрефикса

Шумиха, которая потребовала некоторого времени, чтобы произойти

Бьюсь об заклад, что когда вы думаете о PostCSS, вы должны думать что-то вроде…

Но правда в том, что PostCSS существует почти столько же, сколько и React!

Почему PostCSS?

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

display: flex;
// becomes
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

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

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

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

PostCSS не связан с какой-либо конкретной структурой / библиотекой. Это интерфейсный инструмент.

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.

С учетом сказанного, давайте сделаем простое преобразование одного дисплея: сделаем гибким для нескольких определений, специфичных для браузера.

// require the postcss for our plugin to work
const postcss = require('postcss');
// export the plugin
module.exports = postcss.plugin('postcss-flex', (opts) => {
  opts = opts || {};
return (css) => {
    // define the new values
    const values = [
      '-webkit-box',
      '-webkit-flex',
      '-ms-flexbox',
    ];
    // iterate through declarations
    css.walkDecls('display', decl => {
      // ignore everything else other than flex
      if (decl.value !== 'flex') return;
      // map values to actual string
      const newDecls = values.map((value) => {
        return ` display: ${value}`;
      }).join(';');
      // add new declarations before the current
      decl.before(newDecls);
    });
  };
});

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

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

Тематика

Если для поддержки вашей темы требуется различная палитра для каждой темы. Вместе с, возможно, некоторыми другими переменными, которые необходимо отрегулировать, например. font-sizes или border-radius или… Один из самых простых (возможно, лучший) способов добиться этого - разделить отображение переменных, например. цвета, радиус границы… в файлах темы.

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

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

Где такое отображение есть в переменных.scss.

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

Специальные теги variables.blue.scss имеют другое сопоставление.

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

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

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

/* 
  example of options
  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 со временем устареет ...

Если вам нужна помощь по теме, напишите мне в Twitter или оставьте комментарий ниже.