Основы и настройки PostCSS

PostCSS - устройство, предназначенное для преобразования CSS стилей при помощи JavaScript плагинов. Такие плагины, как правило упрощают работу с CSS стилями, поддерживают переменные и миксины, все новое, что добавляется в CSS его разработчиками. Тем самым обеспечивают работу с CSS будущего, а также встроенные изображения и многое другое.

PostCSS уже используется индустрией лидеров, таких как: Google, Twitter, Alibaba, и Shopify.

Autoprefixer - плагин PostCSS, один из наиболее популярных CSS процессоров.


Плагины PostCSS

В настоящее время PostCSS имеет более чем 200 плагинов. Вы можете найти все плагины в списке плагинов или в каталоге поиска.
Ниже приведен список из наших любимых плагинов - лучшая демонстрациия того, что может быть сделано с использованием PostCSS.

Решает глобальные проблемы CSS

  • postcss-use позволяет явно установить PostCSS плагины в CSS и выполнять их только для текущего файла.
  • postcss-modules и react-css-modules позволяют автоматически изолировать селекторы внутри компонентов.
  • postcss-autoreset является альтернативой глобального сброса, который лучше для изолируемых компонентов.
  • postcss-initial добавляет all: initial поддержку, которая обнуляет все унаследованные стили.
  • cq-prolyfill добавлена поддержка контейнера запросов, для стилей, которые соответствуют ширине родительского узла.

Используйте CSS будущего, уже сегодня

  • autoprefixer добавялет вендорные префиксы, пользуясь правилом "Can I Use".
  • postcss-cssnext позволяет использовать функции будущего CSS уже сегодня (включая autoprefixer).

Лучшая CSS читаемость

  • precss содержит плагины для Sass-подобных функций, таких, как переменные, вложенности, и миксины.
  • postcss-sorting сортирует содержание по правилам.
  • short добавляет и расширяет многочисленные условно заданные свойства.

Изображения и шрифты

  • postcss-assets вставляет размеры изображений и файлов.
  • postcss-sprites создает спрайты(sprites).
  • font-magician генерирует все @font-face правила, необходимые в CSS.
  • postcss-inline-svg позволяет встраивать SVG и настроить его стили.
  • postcss-write-svg позволяет написать простой SVG прямо в CSS.

Линтеры

  • stylelint представляет собой модульную таблицу стилей линтер.
  • doiuse линт CSS для поддержки браузером.
  • colorguard помогает вам поддерживать последовательную цветовую палитру.

Другие PostCSS плагины

  • lost является особенностью богатой calc() грид системы.
  • cssnano представляет собой модульный CSS Minifier.
  • rtlcss зеркала стилей для право-налево локалей.

Синтаксис postCSS

PostCSS может преобразовать стили в любой синтаксис, не только в CSS. Если еще нет поддержки для вашего любимого синтаксиса, Вы можете написать парсер и/или расширить PostCSS.

  • sugarss синтаксис на основе Sass или Stylus.
  • postcss-scss позволяет работать с SCSS(но не компилирует SCSS в CSS).
  • postcss-less позволяет работать с Less(но не компилирует LESS в CSS).
  • postcss-js позволяет писать стили в JS или преобразовать React встроенные стили, Radium или JSS.
  • postcss-safe-parser Находит и исправляет CSS ошибки синтаксиса.
  • midas преобразует CSS строку, в подсвеченный HTML.

Установка и использование PostCSS

Есть несколько способов начать использовать postCSS:

  1. Найти и добавить расширения PostCSS для инструментов сборки.
  2. Выбрать плагины и добавить их в свой процесс PostCSS.

Gulp

Использует gulp-postcss и gulp-sourcemaps:

gulp.task('css', function () {
    var postcss    = require('gulp-postcss');
    var sourcemaps = require('gulp-sourcemaps');

    return gulp.src('src/**/*.css')
        .pipe( sourcemaps.init() )
        .pipe( postcss([ require('autoprefixer'), require('precss') ]) )
        .pipe( sourcemaps.write('.') )
        .pipe( gulp.dest('build/') );
});

Webpack

Использует postcss-loader:

module.exports = {
    module: {
        loaders: [
            {
                test:   /\.css$/,
                loader: "style-loader!css-loader!postcss-loader"
            }
        ]
    },
    postcss: function () {
        return [require('autoprefixer'), require('precss')];
    }
}

npm run / CLI

Чтобы использовать PostCSS из интерфейса командной строки или с помощью NPM скриптов есть postcss-cli:

postcss --use autoprefixer -c options.json -o main.css css/*.css

CSS-in-JS

Чтобы применить PostCSS плагины для React стилей, JSS, Radium и других CSS-в-JS, вы можете использовать postcss-JS и преобразовывать объекты стилей:

var postcss  = require('postcss-js');
var prefixer = postcss.sync([ require('autoprefixer') ]);

prefixer({ display: 'flex' }); //=> { display: ['-webkit-box', '-webkit-flex', '-ms-flexbox', 'flex'] }

Возможности запуска

JS API

Для других сред, вы можете использовать API JS:

var postcss = require('postcss');
postcss([ require('autoprefixer'), require('cssnano') ])
    .process(css, { from: 'src/app.css', to: 'app.css' })
    .then(function (result) {
        fs.writeFileSync('app.css', result.css);
        if ( result.map ) fs.writeFileSync('app.css.map', result.map);
    });

Опции

Большинство сред, запускающих плагины PostCSS принимают два параметра:

  • массив плагинов
  • объект с опциями

Общие параметры:

  • syntax: объект, предоставляющий синтаксический анализатор.
  • parser: специальный пасрер синтаксиса (например, SCSS).
  • stringifier: специальныц генератор выводного синтаксиса (например, Midas).
  • map: карта опций.
  • from: имя входного файла.
  • to: имя выходного файла.

Node.js 0.10 и Promise API

Если вы хотите запустить PostCSS в Node.js 0.10, добавьте polyfill Promise:

require('es6-promise').polyfill();
var postcss = require('postcss');

Доверие от мировых лидеров