View
3
Download
0
Category
Preview:
Citation preview
Rakesh Menon
Level Up with Post CSS
Level up with
Rakesh Menon @rakeshmenon13
I’ve seen before! ツ
The PostCSS logo looks like something
Key Takeaways
from this session
•
•
•
•
•
Evolution
Evolution cycle
•
•
•
CSS (Cascading Style Sheets)
.section > .inner-section >
.inner-section-header > .inner-
section-headers-heading > .the-
text-inside-it > .which-also-
has-words {
/* I did a bad job */
}
CSS (Cascading Style Sheets)
Preprocessor
s
•
•
•
The Dark Side
•
•
•
What is PostCSS?
What is PostCSS - not??
PostCSS is not!
•
•
•
•
PostCSS is not!
•
•
PostCSS is not!
•
•
PostCSS is not!
So what exactly is PostCSS?
Andrey Sitnik
Steps involved in building a CSS tool
•
•
•
•
PostCSS handles the tedious
stuff!
•
•
•
•
PostCSS consists of…
Abstract Syntax Tree (AST)
Abstract Syntax Tree (AST)
let postcss = require('postcss');
Usage
let css = /* read css file with FS */;
postcss([ plugin1, plugin2(options), ..])
.process(css)
.then( result => console.log(result.css) /* or write the css to disk */ );
postcss.plugin(['myplugin'], options => {
PostCSS Plugin
/* Use options */
return css => {
/* process css */
};
});
Overview of how PostCSS works
/* Root */ .foo { /* Rule */ color: pink; /* Declaration */ } /* AtRule */ @media (min-width: 20rem) { .foo { color: orange; } }
/* Root */ .foo { /* Rule */ color: pink; /* Declaration */ } /* AtRule */ @media (min-width: 20rem) { .foo { color: orange; } }
root.walkRules(); rule.walkDecls(); decl.cloneBefore(); comment.remove(); // ...
•
•
PostCSS is also….
Let’s create a plugin!
Fallback plugins
:
Fallback plugins
{ all: initial; }
:
Fallback plugins
.element:container(width >=
100px <= 300px) {}
:
Fallback plugins
•
•
•
•
Non-standard keywords….
Confusion?
•
•
•
•
•
Non-standard keywords….
Confusion?
Non-standard keywords….
Confusion?
Utilities
•
•
CSS Next?
CSS Next?
CSS Next?
•
•
Analytical Tools
•
•
•
•
•
Other important tools
•
•
•
•
•
Evolution cycle
Evolution cycle
Choosing the Stack
•
•
•
•
•
Choosing the Stack
•
•
•
•
•
•
•
Choosing the Stack
•
•
•
•
Summing it up!
Questions
Recommended