POSTCSS

Here is to the future!

Marcus Tisäter

Front-End Developer

http://www.wpsv.se - 4.0

Sorry!

CSS

Cascading Style Sheet

Writing CSS CAN be boring and difficult!

Superheroes to the rescue!

CSS- Preprocessors

Preprocessors are life savers!

Keeping things DRY
Maintainable
Organized
Efficent

CSS Architecture

BEM , Suit

SMACSS , InuitCSS

ATOMIC, ITCSS

I love Sass but...

Ruby

Slow...

Version Control

Frameworks

Modularity

LibSass: 110 files, 21 300 lines of C++ code

So, what's next?

PostCSS

* {

PostCSS is just a tool for transforming CSS with Javascript Plugins.

}

Part 1 Behind the scenes

PostCSS templating language

style.css --> Parser -->

Abstract Syntax Tree

Stringifer --> new style.css

What the ?

Part 2

PostCSS is just a tool for transforming CSS with Javascript Plugins.

JSON

style.css --> Parser --> Plugin --> Plugin --> Plugin --> Stringifer --> style.css

Javascript Plugins?

based on the NPM ecosystem

PostCSS-Simple-Vars

74 lines of Javascript code


								$blue: #056ef0;
								h1 {
									color: $blue;
								}


								h1 {
									color: #056ef0;
								}

PostCSS-Nested

68 lines of Javascript code


								.block {
								a {
									color: red;
								}
							
								}


								.block a {
									color: red;
								}

PostCSS CSSNano


								.block {
									font-size: 1.2rem;
								}
								h2 {
									color: blue;
								}
								h2 {
									color: blue;
									margin: 0;
								}


								.block{font-size:1.2rem}h2{color:blue;margin:0}

PostCSS Focus


								a:hover {
									color: red;
								}


								a:hover, a:focus {
									color: red;
								}

PostCSS Autoprefixer


								.flex {
								display: flex;
								}


								.flex {
								display: -webkit-box;
								display: -webkit-flex;
								display: -ms-flexbox;
								display: flex; }

PostCSS Swedish Styles


								.sweden-rocks {
								bredd: 200px;
								höjd: 25px;
								färg: blå;
								flyt: vänster !viktigt 
								}


								.sweden-rocks {
								width: 200px;
								height: 25px;
								color: blue;
								float: left !important
								}

CSS Next


								:root {
								  --mainColor: red;
								}

								a {
								  color: var(--mainColor);
								}


								a {
									color: red;
								}

PostCSS StyleGuide

PostCSS SVG Fragments


								.icon { background-image: url(store.svg#pencil); }


								.icon { background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg fill=%22red%22 stroke=%22black%22 viewBox=%220 0 512 512%22 xmlns=%22http://www.w3.org/2000/svg%22%3E %3Cpath d=%22M432 0c44.182 0 80 35.817 80 80 0 18.01-5.955 34.629-16 48l-32 32-112-112
								32-32c13.371-10.045 29.989-16 48-16zm-400 368l-32 144 144-32 296-296-112-112-296 296zm325.789-186.211l-224 224-27.578-27.578 224-224 27.578 27.578z%22/%3E %3C/svg%3E); }