PostCSS Preset Env,

the Babel for CSS

Developer Advocate 🥑
at @SchibstedSpain

 

Co-Founder & UI Engineers

at @sublime_codes


PerfReviewer at @PerfReviews_

 

Joan León

.Hello {

}

@nucliweb

#Javascript

#CSS

#PostCSS

#Animation

#SVG

#WebPerformance

PostCSS Preset Env lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments, using cssdb.

/postcss-preset-env/

postcss-preset-env

Use tomorrow’s CSS today.

Features
Try It Now
Support
GitHub

Usage

npm install postcss-preset-env --save-dev

Node.js | PostCSS CLI | Webpack | Create React App | Gulp | Grunt

/INSTALL.md/

Usage

npm install postcss-cli --save-dev

PostCSS CLI

const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
    postcssPresetEnv(/* pluginOptions */)
  ]
}

postcss.config.js

/INSTALL.md/

Komenco

  "devDependencies": {
    ...
    "postcss-cli": "^6.1.1",
    "postcss-devtools": "^1.1.1",
    "postcss-import": "^12.0.1",
    "postcss-normalize": "^7.0.1",
    "postcss-preset-env": "^6.5.0",
    "postcss-reporter": "^6.0.1",
    "...
  }

package.json

/Komenco/

Komenco

module.exports = (ctx) => ({
  map: ctx.options.map,
  plugins: {
    'postcss-devtools': ctx.env === 'development' ? {} : false,
    'postcss-import': {},
    'postcss-normalize': { browsers: 'last 2 versions', forceImport: true },
    'postcss-preset-env': { stage: 0 },
    'stylelint': ctx.env === 'development' ? {} : false,
    'postcss-reporter': ctx.env === 'development' ? { clearMessages: true } : false,
    'cssnano': ctx.env === 'production' ? {} : false
  }
})

postcss.config.js

/Komenko/

cssdb

/cssdb/

cssdb is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards.

cssdb

Stage 0: Aspirational

“This is a crazy idea.”

Stage 1: Experimental

“This idea might not be crazy.”

Stage 2: Allowable

“This idea is not crazy.”

Stage 3: Embraced

“This idea is becoming part of the web.”

Stage 4: Standardized

“This idea is part of the web.”

Rejected

“I had no idea what I was doing.”

/The Staging Process/

cssdb

Stage level

Name & Description

Link to Specification & MDN

Sample code

Browser support

Link to PostCSS plugin

Enjoy CSS

.Thanks {

}

@nucliweb

PostCSS Preset Env, the Babel for CSS

By Joan León

PostCSS Preset Env, the Babel for CSS

With the PostCSS Preset Env project (based on cssdb) we can say that it is the Babel for CSS, with different states of the features as we have in EcmaScript. Finally we can focus on knowing and developing with the specifications that are being defined as CSS standards for the web.

  • 2,107

More from Joan León