«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