Introducing PostCSS

Introducing PostCSS

The Swiss army knife for CSS production

PostCSS Evolution

PostCSS Evolution in npm-stat

From 2015 to today, PostCSS already has more than 25,884,079 downloads

https://npm-stat.com/charts.html?package=postcss&from=2015-01-01&to=2017-01-01

WTF is PostCSS?

Santisima Trinidad - Los Católicos creen que la

trinidad es una, no creen en tres Dioses sino en un solo

Dios en tres personas distintas, cada una de las

personas es enteramente Dios, Padre, Hijo, Espíritu

Santo tienen la misma naturaleza la misma divinidad,

la misma eternidad, el mismo poder, la misma

perfección.

WTF is PostCSS?

=

what PostCSS is NOT

The most compelling thing about PostCSS is it is not

restricted to any one type of functionality;

The diverse functionality available via its plugin

ecosystem

Its modular, “use what you need” nature

Its rapid compilation time

The accessibility of creating your own plugins

The option to use it with regular CSS

The ability to create libraries that don’t depend on

one preprocessor

Its seamless deployment with many popular build

tools

- It’s not a pre-processor (SASS, LESS …), though it can optionally behave like one.

- It’s not a post-processor(Autoprefixer…), though it can optionally behave like one.

- It’s not about “future syntax”, though it can facilitate support for future syntax

- It’s not a clean up / optimization tool, though it can provide such functionality.

It’s not any one thing; it’s a means to potentially unlimited functionality configured as you choose.

what is PostCSS

So what is PostCSS? The best definition

comes from the project’s own GitHub

page:

“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.

what is PostCSS

The tool itself is a Node.js module that parses

CSS into an abstract syntax tree (AST); passes

that AST through any number of “plugin”

functions; and then converts that AST back

into a string,

The AST provides a very simple API that we

can use to write plugins.

PostCSS API makes it pretty easy to work with

CSS source code.

what is PostCSS

Rule Structure

A rule or "rule set" is a statement that tells

browsers how to render particular elements on

an HTML page. A rule set consists of a selector

followed by a declaration block.

Finding Plugins

As you start getting into working with

PostCSS there are three locations you’ll

want to keep an eye on for finding great

plugins.

PostCSS Github repo

Catalog Site postcss.parts

@PostCSS Twitter account

#1 Autoprefixer

Autoprefixer uses data from Can I Use. This way it doesn’t get dated, and can always apply the most recent rules.

You can check out how it works on its interactive demo site.

#2. CSSnext

CSSnext is a CSS transpiler that allows

you to use future CSS syntax on current sites. W3C has many new CSS rules that aren’t currently implemented by browsers, but could enable developers to write more sophisticated CSS faster and easier. CSSnext has been made to bridge this gap.

#3. PreCSS

PreCSS is one of the PstCSS plugins

that work like a CSS preprocessor. It makes it possible to take advantage of

a Sass-like markup in your sytlesheet files.

You can use variables, if-else statements, loops, mixins, @extend and @import rules, nesting …

#4. StyleLint

StyleLint is a modern CSS linter that proofreads and validates your CSS code. It makes it easy to avoid errors and pushes you to follow consistent coding conventions.

#5. PostCSS Assets

1

2

3

body {

background: resolve('foobar.jpg');

}

The PostCSS Assets plugin is a handy asset manager for your CSS files. It can be a great choice if you tend to have trouble with URL paths, as PostCSS Assets isolates your stylesheet files from environmental changes.

#6. CSSNano

CSSNano it’s a modular plugin that consists of many smaller, single-responsibility PostCSS plugins. It doesn’t only perform basic minificationtechniques such as removing whitespaces, but also has advanced options that make focused optimizations possible.

Among many other features, CSSNanois capable of rebasing z-index values, reducing custom identifiers, converting length, time and colour values, and removing outdated vendor prefixes.

SetUp postCSS using Grunt

Gruntfile.jsmodule.exports = function(grunt) {

grunt.loadNpmTasks('grunt-postcss');

}; Node.js and NPM installed

npm install grunt-postcss –save-dev

Create and edit Gruntfile.js

SetUp postCSS using GruntGruntfile.jsmodule.exports = function(grunt) {

grunt.initConfig({

postcss: {

}

});

grunt.loadNpmTasks('grunt-postcss');

};

Node.js and NPM installed

npm install grunt-postcss –save-dev

Create and edit Gruntfile.js

SetUp postCSS using Grunt

Gruntfile.jsmodule.exports = function(grunt) {

grunt.initConfig({

postcss: {

options: {

processors: [

require('autoprefixer')()

]

},

dist: {

src: 'css/src/style.css',

dest: 'css/style.css'

}

}

});

grunt.loadNpmTasks('grunt-postcss');

};

Node.js and NPM installed

npm install grunt-postcss –save-dev

Create and edit Gruntfile.js

npm install autoprefixer –save-dev

How to do your own

PostCSS plugin

What is dinottizator??!!

Convert all the values of font-family property to ‘din-ot’

Creating your PostCSS pluginPlugins for PostCSS are written in JavaScript, and as such

anyone who can (or NOT !!) write JavaScript can create a

plugin for any purpose they want.

Create a new node module inside your project, which will

become your plugin.

Load your new plugin into your project.

Add some test CSS in the syntax you want your plugin to use.

Use methods from the PostCSS API to scan through a

stylesheet.

Write JavaScript and use the PostCSS API to make the

appropriate transformations (and/or additions) to the original

code and send it into the processed CSS.

Create a Basic Plugin Shell Create a folder in node_modules

All PostCSS plugins are node modules. We need to turn our

new folder into one.

Cd plugin_name folder

npm init

All PostCSS plugins need PostCSS installed as a dependency

npm install postcss –save-dev

Create a index.js file

Index.js filevar postcss = require('postcss');

module.exports = postcss.plugin('myplugin', functionmyplugin(options) {

return function (css) {

options = options || {};

// Processing code will be added here

}

});

Creating your PostCSS plugin

http://api.postcss.org/AtRule.html#walkRules

Submiting your Pluginhttps://github.com/himynameisdave/postcss-

plugins#submitting-a-new-plugin