git clone https://github.com/jcmellado/postcss-demo
cd postcss-demo
npm installnpm run buildEnable plugins in postcss.config.js.
Modify css/styles.css.
dist/styles.css will be automatically updated with the results.
Tool written on top of the PostCSS ecosystem, which allows us to use a lot of powerful features in order to compact CSS appropriately.
https://github.com/ben-eb/cssnano
PostCSS plugin that helps you to use the latest CSS syntax today. It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support.
https://github.com/MoOx/postcss-cssnext
:root {
--badge: { /* Custom properties set */
width: 50px;
height: 50px;
};
--badge-color: #D4AF37; /* Custom property */
}
.badge {
@apply --badge; /* Custom properties set reference */
background: var(--badge-color); /* Custom property reference */
}PostCSS plugin to transform W3C CSS color function to more compatible CSS.
https://github.com/postcss/postcss-color-function
body {
background: color(red a(90%));
color: color(blue w(+ 20%) s(+ 20%));
}PostCSS plugin that magically generates all of your @font-face rules. Never write a @font-face rule again.
https://github.com/jonathantneal/postcss-font-magician
body {
font-family: "Alice";
}PostCSS plugin to reference an SVG file and control its attributes with CSS syntax.
https://github.com/TrySound/postcss-inline-svg
@svg-load nav url(img/nav.svg) {
fill: #cfc;
path:nth-child(2) {
fill: #ff0;
}
}
.nav {
background: svg-inline(nav);
}
.up {
background: svg-load('img/arrow-up.svg', fill=#000, stroke=#fff);
}Powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS.
https://github.com/peterramsing/lost
@lost flexbox flex;
section {
lost-center: 980px;
}
div {
lost-column: 1/3;
}