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/