Upload
artem-belov
View
75
Download
1
Embed Size (px)
Citation preview
«PostCSS»
КАК МЕТОД НАПИСАНИЯ CSS БУДУЩЕГО, НАХОДЯСЬ В НАСТОЯЩЕМ.
Секрет успеха «PostCSS»
Всё, относительно, цикличноvar technologies = ['css', 'sass', 'less', 'stylus']; setInterval(function () { technologies.unshift(technologies.pop()); }, getRandomPeriod());
Всё гениальное — просто
1. @mixin json-encode($value, $flag: "all") { 2. $flag: if(index("regular", $flag), $flag, "all"); 3. $json: json-encode($value); 4. 5. @if $flag == "comment" or $flag == "all" { 6. /*! json-encode: #{$json} */ 7. } 8. 9. @if $flag == "regular" or $flag == "all" { 10. body::before { 11. content: json-encode($value); 12. display: block; 13. height: 0; 14. overflow: hidden;
14. overflow: hidden;
Текущее положение дел у «CSS»
...ИЗ-ЗА УСПЕХА «AUTOPREFIXER»...
Вы уже слышали о «PostCSS»...
...ОТ ДРУГИХ РАЗРАБОТЧИКОВ...
Вы уже слышали о «PostCSS»...
...ЗА СЧЁТ ИНТЕГРАЦИЙ...
Вы уже слышали о «PostCSS»...
...ЗА СЧЁТ БОЛЬШИХ ИМЁН...
Вы уже слышали о «PostCSS»...
Это иструмент длятрансформации CSS припомощи JS плагинов
- @postcss
Parser (CSS в AST)
[...postcssModule(options)]
Stringifier (AST в CSS)
Состав `@postcss/postcss`
Мгновение производительности
«PostCSS» является самым быстрым препроцессором
* но не с самым быстрым парсером, уступая, например, «CSSTree» 80% в скорости
&
СПЕЦПРЕДЛОЖЕНИЕ
При помощи «PostCSS»можно решать проблемыв CSS
- @orly?
Решение проблем с «PostCSS»
$ npm i postcss --save-dev
$ postcss style.css --fix
* флага `--fix` не существует, любые совпадения случайны
Предупреждение о лёгкой фрустрации
$ npm i postcss-cool-package --save-dev
# npm ERR! node v6.9.1
# npm ERR! npm v3.10.8
# npm ERR! code E404
# npm ERR! 404 Note that you can also install
# npm ERR! 404 tarball, folder, or git url.
Предупреждение о лёгкой миграции
# Replace Sass
$ npm i precss --save
# Add in Bundle
$ npm i postcss-loader --save-dev
# Try SMT New
$ npm i postcss-cssnext --save
ВЖУХ И ТЫ ПЕРЕШЁЛ С SASS
СПОНСОР ОТВЕТАpostcss.parts
@postcss-cli
1. { 2. "use": [ 3. "postcss-simple-vars", 4. "postcss-nested", 5. "postcss-mixins" 6. ], 7. "input": "css/styles.css", 8. "output": "dist/styles.css", 9. "watch": true 10. }
КОНТРОЛЬ КАЧЕСТВА КОДА И ОТЛАДКА
@doiuse
1. ‼ CSS3 Box-sizing not supported by: IE (8,9,10), Chrome (36) 2. ‼ CSS user-select: none not supported by: IE (8,9) 3. ‼ Pointer events not supported by: IE (8,9,10), Firefox (32) 4. ‼ CSS3 Transforms not supported by: IE (8)
@postcss-bem-linter
1. bemLinter('suit', { 2. namespace: 'twt' 3. }); 4. 5. bemLinter({ 6. componentName: '^[A-Z]+$', 7. componentSelectors: { 8. initial: '^\\.{componentName}(?:-[a-z]+)?$', 9. combined: '^\\.combined-{componentName}-[a-z]+$' 10. }, 11. utilitySelectors: '^\.util-[a-z]+$' 12. });
@immutable-css
1. [immutable-css]: ⚠ .button was mutated 2 times 2. [line 3, col 1]: /css/styles.css 3. [line 9, col 1]: /css/custom.css
РАБОТА С ЦВЕТАМИ
@postcss-colorblind
1. postcss() 2. .use(colorblindPlugin({ method:'achromatopsia' })) 3. .process(css) 4. .then(function(result) { 5. fs.writeFileSync('style.css', result.css); 6. });
@css-colorguard
1. ‼ #3D4C6B collides with #394762 (20:26) 2. ‼ #1C2935 collides with #22313f (6:14) 3. ‼ #576276 collides with #556178 (329:9) 4. ‼ rgba(0, 0, 0, 0.21) collides with rgba(0, 0, 0, 0.14) (927:26) 5. ‼ rgba(0, 0, 0, 0.19) collides with rgba(0, 0, 0, 0.14) (927:26) 6. ‼ rgba(0, 0, 0, 0.22) collides with rgba(0, 0, 0, 0.14) (927:26)
@postcss-/(.*)/-color
1. .examples { 2. color: color(red alpha(-10%)); 3. color: rgba(255, 0, 0, 0.9); 4. 5. color: gray(85); 6. color: rgb(85, 85, 85); 7. 8. color: hwb(90, 0%, 0%, 0.5); 9. color: rgba(128, 255, 0, 0.5); 10. 11. color: rgb(100 222 100 / 30%); 12. color: rgba(100, 222, 100, 0.3);
13.
13.
РАБОТА С ГРАФИКОЙ
@postcss-inline-svg
1. .example { 2. background: svg-load("icon.svg", fill=#000, stroke=#fff); 3. } 4. 5. .example { 6. background: url("data...fill='%23000' stroke='%23fff'..."); 7. }
@postcss-write-svg
1. @svg square { 2. @rect { 3. fill: var(--color); 4. width: var(--size); 5. height: var(--size); 6. } 7. } 8. 9. .example { 10. background: svg(square param(--color red) param(--size 10px)); 11. } 12. 13. .example { 14. background: url("data:image/svg+xml;charset=utf-8,%3Csvg...") ;
15. }
15. }
@postcss-sprites
1. .example-one { 2. background: url("icon-comment.svg"); 3. } 4. .example-two { 5. background: url("icon-bubble.svg"); 6. } 7. 8. .example-one { 9. background-image: url("sprite.svg"); 10. background-position: 0 0; 11. } 12. .example-two {
13. background-image: url("sprite.svg");
13. background-image: url("sprite.svg");
@postcss-assets
1. .example { 2. background: inline("image.png"); 3. width: width("image.png"); 4. height: height("image.png"); 5. } 6. 7. .example { 8. background: url("data:..."); 9. width: 320px; 10. height: 240px; 11. }
ИСПОЛЬЗОВАНИЕ НОВЫХ СВОЙСТВ
Вёрстка при помощи «.MD»
@postcss-grid-kiss
1. body { 2. grid-kiss: 3. "+-------------------------------+ " 4. "| header ↑ | 120px" 5. "+-------------------------------+ " 6. " " 7. "+-- 30% ---+ +--- auto --------+ " 8. "| .sidebar | | main | auto " 9. "+----------+ +-----------------+ " 10. " " 11. "+-------------------------------+ " 12. "| ↓ | 60px " 13. "| → footer ← | " 14. "+-------------------------------+ "
15. }
15. }
RUCKSACKНАБОР ДОПОЛНЕНИЙ ДЛЯ БОЛЕЕ БЕЗЗАБОТНОЙ ВЁРСТКИ
«Rucksack» интересен...
1. .example { 2. font-size: responsive; 3. } 4. 5. .example { 6. font-size: calc(14px + 2 * ((100vw - 420px) / 860)); 7. } 8. 9. .example li:at-least(5) { 10. color: red; 11. } 12.
13. .example {
13. .example {
POSTCSS-CSSNEXTДОПОЛНЕНИЯ ДЛЯ СОЗДАНИЯ `FUTURE-PROOF` СТИЛЕЙ
«cssnext» интересен...
1. div { 2. display: initial; 3. } 4. 5. .example { 6. font-size: calc(var(--fontSize) * 2); 7. } 8. 9. .example:matches(.special) { 10. color: red; 11. } 12.
13. .example a:any-link {
13. .example a:any-link { 14. background-color: yellow;
@postcss-custom-properties
1. :root { 2. --color: red; 3. } 4. 5. .example { 6. color: var(--color); 7. } 8. 9. .example { 10. color: red; 11. }
@postcss-apply
1. :root { 2. --material-shadow: { 3. border-radius: 2px; 4. box-shadow: 0 1px 6px 0 rgba(black, 0.1); 5. }; 6. } 7. 8. .example { 9. @apply --material-shadow; 10. } 11. 12. .example { 13. border-radius: 2px;
13. border-radius: 2px; 14. box-shadow: 0 1px 6px 0 rgba(black, 0.1);
@cq-prolyfill
1. .example:container(width >= 100px) { } 2. 3. .example:container(height > 100px < 200px) { }
УЛУЧШЕНИЕ ПРОИЗВОДИТЕЛЬНОСТИ
@postcss-resemble-image
1. .example { 2. background: url("image.jpg"); 3. } 4. 5. .example { 6. background: url("image.jpg"), 7. linear-gradient(90deg, #353230 0%, #3b3734 50%); 8. }
@csso || @cssnano
@postcss-inline-svg && @postcss-svgo
@postcss-import && @postcss-url
WHATEVER
@postcss-time-machine
1. .example { 2. white-space: no-wrap; 3. } 4. .example { 5. white-space: nowrap; 6. } 7. 8. .example { 9. vertical-align: text-middle; 10. } 11. .example { 12. vertical-align: middle; 13. }
13. } 14.
@postcss-short@postcss-zindex@postcss-initial@postcss-utilities@postcss-custom-media
Плагины «PostCSS»можно создавать иотлаживать прямо вбраузере*
- astexplorer.net
* или при помощи `postcss-devtools` + `postcss-debug`
@postcss-custom-plugin
1. /** 2. * .example { 3. * background: url("image.png"); 4. * } 5. * .example { 6. * background-image: url("image.png"); 7. * } 8. */ 9. 10. import * as postcss from 'postcss'; 11. 12. exports.default = postcss.plugin('postcss-plugin', function () { 13. return function (root) { 14. root.walkRules(function (rule) { 15. rule.walkDecls(function (decl) {
16. if (_isBackgroundShorthand(decl)) {
16. if (_isBackgroundShorthand(decl)) { 17. decl.prop = 'background-image';
:qgithub.com/artbelovtwitter.com/belov
bit.ly/artbelov-postcss