PostCSS Preset Env,

the Babel for CSS

Developer Advocate 🥑
at @S chibstedSpain

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.

Usage

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

/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