Postcss-config-pack NPM

PostCSS Config Pack

Flexible PostCSS config with great defaults.

🚧 This project is now a scoped package. Use instead @giotramu/postcss-config. View scoped package.

PostCSS Config Pack

Install

Install postcss-config-pack and save them to your package.json devDependencies:

$ npm install postcss-config-pack --save-dev

Usage

Create a postcss.config.js or .postcssrc.js and require the standard config from node_modules folder:

module.exports = require('postcss-config-pack').config;

Standard config

PostCSS Config Pack bundle together the following modules:

You can inspect the standard config.

Expand config

Install all your favourite PostCSS plugins and save them to your package.json as dependencies or devDependencies. Then expand a standard PostCSS config with the following mechanism:

module.exports = require('postcss-config-pack').expand({
  map: false,
  plugins: {
    'postcss-calc': {}
    'postcss-custom-selectors': {
      preserve: true
    }
    // ...
  }
});

Plugin execution order is determined by declaration in the plugins section (top-down). You can prepend or append additional config (default behaviour: 'append'):

module.exports = require('postcss-config-pack').expand(
  {
    plugins: {
      'postcss-autoreset': {},
    },
  },
  'prepend'
); // => Last PostCSS config come BEFORE standard config

You can disable and not load a single plugin by setting it to false:

module.exports = require('postcss-config-pack').expand({
  plugins: {
    'postcss-import': false,
    'postcss-custom-media': false,
  },
});

Browsers

PostCSS Config Pack is dispatched with a specific browserslist query:

last 2 versions
not ie <= 11
not op_mini all
not dead
not < 0.5%

You can change it when you need:

//--- Grab plain standard config
module.exports = require('postcss-config-pack').browsers(['> 1%', 'IE 10']).config;

//--- Expand standard config
module.exports = require('postcss-config-pack').browsers(['> 1%', 'IE 10']).expand({...});