Introducing PostCSS
-
Upload
ruben-crespo-alvarez -
Category
Documents
-
view
15 -
download
1
Transcript of Introducing PostCSS
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.
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
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