JS Lab2017, 25 марта, Одесса Lightning Talks PostCSS - there is a plugin for that (Сергей Лысенко) Все материалы: http://jslab.in.ua/ Организаторы: http://geekslab.org.ua/

1. PostCSS
Для этого существует плагин @PostCSS
Андрей Ситник

2. 2
2014

3. Основной стек технологий
1. AngularJS
2. Sass + Compass
— Vendor prefixes
— Sprites
3. Grunt для сборки
// 2014
3

4. 4
2015

5. Проблемы
1. Время сборки проекта
2. Ненужные вендорные префиксы
3. Странности в спрайтах
4. Зависимость от Ruby
5

6. Попытка #1
1. Убран Compass
2. Убрана зависимость от Ruby (LibSass)
3. Спрайтами теперь занимается grunt-spritesmith
4. Вендорными префиксами занимается Autoprefixer
5. cssmin сменился на cssnano
6

7. Результаты
1. Сборка проекта занимает гораздо меньше времени
2. Sass стили стали чище (нет ненужных миксинов)
3. Вендорные префиксы соответствуют статистике используемых
браузеров
4. Результирующий файл стал меньшего размера
7

8. 8

9. 9
2016

10. SVG задача
— Максимально быстрый переход
— Минимальные изменения в CSS стилях
— Возможность управлять стилизацией SVG иконок
Инструменты
— postcss-inline-svg
— postcss-svgo
— postcss-assets

11. 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.

12. =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. 13

14. Бонусы
— cssnext
— stylelint
— cssnano
— rtlcss
— postcss-bem
— postcss-import
— postcss-sass
14

15. Ссылки
— PostCSS website
— PostCSS plugins collection
— доклад от Андрея Ситника «PostCSS the Future after Sass and Less»
— Writing a PostCSS Plugin
— postcss-important-shorthand
15

16. 16
bit.do/jslab

17. 17
Спасибо за
внимание!
@Soul_Wishsoulwish.info