js lab2017_lightning talks_postcss - there is a plugin for that

PostCSS

Для этого существует плагин @PostCSS

Андрей Ситник

”

2

2014

Основной стек технологий1. AngularJS

2. Sass + Compass

— Vendor prefixes

— Sprites

3. Grunt для сборки

// 2014 �

3

4

2015

Проблемы �1. Время сборки проекта

2. Ненужные вендорные префиксы

3. Странности в спрайтах

4. Зависимость от Ruby

5

Попытка #11. Убран Compass

2. Убрана зависимость от Ruby (LibSass)

3. Спрайтами теперь занимается grunt-spritesmith

4. Вендорными префиксами занимается Autoprefixer

5. cssmin сменился на cssnano

6

Результаты1. Сборка проекта занимает гораздо меньше времени

2. Sass стили стали чище (нет ненужных миксинов)

3. Вендорные префиксы соответствуют статистике используемых

браузеров

4. Результирующий файл стал меньшего размера

7

8

9

2016

SVG задача— Максимально быстрый переход

— Минимальные изменения в CSS стилях

— Возможность управлять стилизацией SVG иконок

Инструменты— postcss-inline-svg

— postcss-svgo

— postcss-assets

postcss: {

options: {

processors: [

require('postcss-assets')({loadPaths: ['images/icons/']}),

require('postcss-inline-svg')({path: 'images/icons/'}),

require('postcss-svgo')(),

require('autoprefixer')({browsers: ['last 2 versions']})

]

},

app: {...}

}

01.

02.

03.

04.

05.

06.

07.

08.

09.

10.

11.

=svg-icon($filename)

background: svg-load($filename + '.svg')

width: width($filename + '.svg')

height: height($filename + '.svg')

=svg-icon-no-size($filename)

background: svg-load($filename + '.svg')

01.

02.

03.

04.

05.

06.

07.

13

Бонусы �— cssnext

— stylelint

— cssnano

— rtlcss

— postcss-bem

— postcss-import

— postcss-sass

14

Ссылки— PostCSS website

— PostCSS plugins collection

— доклад от Андрея Ситника «PostCSS the Future after Sass and Less»

— Writing a PostCSS Plugin

— postcss-important-shorthand

15

16

bit.do/jslab

17

Спасибо завнимание!

@Soul_Wishsoulwish.info