PostCss

PostCss

1. PostCSS Jason

2. Agenda ● CSS Preprocessor ● CSS Postprocessor ● PostCSS autoprefixer postcss-cssnext precss postcss-sorting postcss-sprites

3. CSS Preprocessor CSS preprocessors are extension languages that compile into CSS. They add functionalities to CSS such as variables, mixins and nested inheritance. .title{ color : #f938ab; } .special{ color : #f938ab; } @color : #f938ab; .title{ color: @color ; } .special{ color: @color ; }

4. CSS Postprocessor CSS postprocessors parse plain CSS (for example: to include vendor prefixes). .title{ display:-webkit-box; display:-ms-flexbox; display:flex; } .title{ display:flex; }

5. Processor @radus:10px; .box { border-radius:@color; } .box { border-radius: 10px; ; } .box { -webkit-border-radius: 10px ; } preprocessor postprocessor Less/Sass CSS CSS

6. PostCSS PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.

7. Autoprefixer ● PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. ● Working with Autoprefixer is simple: just forget about vendor prefixes and write normal CSS according to the latest W3C specs. ● You don’t need a special language (like Sass) or remember where you must use mixins.

8. Autoprefixer Write Pure CSS a { display: flex; } a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex }

9. Autoprefixer Only Actual Prefixes a { -webkit-border-radius: 5px; border-radius: 5px; } a { border-radius: 5px; }

10. Postcss-cssnext ● PostCSS-cssnext is a PostCSS plugin that helps you to use the latest CSS syntax today. ● It transforms new CSS specs into more compatible CSS so you don't need to wait for browser support.

11. Postcss-cssnext ● custom properties :root { --fontSize: 1rem; --mainColor: #12345678; } body { color: var(--mainColor); font-size: var(--fontSize); } body { color: rgba(18, 52, 86, 0.47059); font-size: 16px; font-size: 1rem; }

12. Postcss-cssnext ● custom properties set & @apply rule :root { --centered: { display: flex; align-items: center; justify-content: center; }; } .centered { @apply --centered; } .centered { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }

13. Postcss-cssnext ● custom selectors @custom-selector :--heading h1, h2, h3, h4, h5, h6; :--heading { margin-top: 0 } h1, h2, h3, h4, h5, h6 { margin-top: 0 }

14. PreCSS ● PreCSS is a tool that allows you to use Sass-like markup in your CSS files. ● Enjoy a familiar syntax with variables, mixins, conditionals, and other goodies.

15. PreCSS ● Variables $blue: #056ef0; $column: 200px; .menu_link { background: $blue; width: $column; } .menu_link { background: #056ef0; width: 200px; }

16. PreCSS ● Conditionals .notice--clear { @if 3 < 5 { background: green; } @else { background: blue; } } .notice--clear { background: green; }

17. PreCSS ● Loops @for $i from 1 to 3 { .b-$i { width: $(i)px; } } .b-1 { width: 1px } .b-2 { width: 2px } .b-3 { width: 3px }

18. PreCSS ● Mixins @define-mixin icon $name { padding-left: 16px; &::after { content: ""; background-url: url(/icons/$(name).png); } } .search { @mixin icon search; } .search { padding-left: 16px; } .search::after { content: ""; background-url: url(/icons/search.png); }

19. Postcss-sorting ● PostCSS plugin to sort rules content with specified order. Heavily inspired by CSSComb. ● CSScomb - Makes your code beautiful

20. Postcss-sorting ● Declarations Example: { "sort-order": [ "margin", "padding" ] } p { padding: 0; margin: 0; } p { margin: 0; padding: 0; }

21. Postcss-sorting ● Grouping Example: { "sort-order": [ [ "margin", "padding" ], [ "border", "background" ] ] } p { background: none; border: 0; margin: 0; padding: 0; } p { margin: 0; padding: 0; border: 0; background: none; }

22. Postcss-sprites ● PostCSS plugin that generates spritesheets from your stylesheets. .comment { background: url( images/sprite/ico-comment.png ) no-repeat 0 0; } .bubble { background: url( images/sprite/ico-bubble.png ) no-repeat 0 0; } .comment { background-image: url( images/sprite.png ); background-position: 0 0; } .bubble { background-image: url( images/sprite.png ); background-position: 0 -50px; }

23. CSS Modules ● A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. ● A way to scope CSS to a component and escape the global namespace hell.

24. CSS Modules JS import styles from "./styles.css"; element.innerHTML = `<h1 class="${styles.title}"> An example heading </h1>`; HTML <h1 class="_styles__title_309571057"> An example heading </h1> CSS ._styles__title_309571057 { background-color: red; }

25. Reference PostCSS https://github.com/postcss/postcss http://api.postcss.org/ CSSComb http://csscomb.com/ CSSnext http://cssnext.io/