JS Lab2017_Lightning Talks_PostCSS - there is a plugin for that

JS Lab2017_Lightning Talks_PostCSS - there is a plugin for that

• 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