cssnano-preset-advanced

cssnano-preset-advanced

Advanced optimisations for cssnano; may or may not break your CSS!

Table of Contents

• Usage

  • Install
  • Configuration

• Plugins

  • autoprefixer (external)
  • css-declaration-sorter (external)
  • cssnano-utils
  • postcss-calc (external)
  • postcss-colormin
  • postcss-convert-values
  • postcss-discard-comments
  • postcss-discard-duplicates
  • postcss-discard-empty
  • postcss-discard-overridden
  • postcss-discard-unused
  • postcss-merge-idents
  • postcss-merge-longhand
  • postcss-merge-rules
  • postcss-minify-font-values
  • postcss-minify-gradients
  • postcss-minify-params
  • postcss-minify-selectors
  • postcss-normalize-charset
  • postcss-normalize-display-values
  • postcss-normalize-positions
  • postcss-normalize-repeat-style
  • postcss-normalize-string
  • postcss-normalize-timing-functions
  • postcss-normalize-unicode
  • postcss-normalize-url
  • postcss-normalize-whitespace
  • postcss-ordered-values
  • postcss-reduce-idents
  • postcss-reduce-initial
  • postcss-reduce-transforms
  • postcss-svgo
  • postcss-unique-selectors
  • postcss-zindex

• Contributors

• License

Usage

Install

With npm do:

npm install cssnano-preset-advanced --save-dev

If you don't have npm then check out this installation tutorial.

Configuration

If you would like to use the preset in its default configuration, add it to your cssnano.config.js:

// cssnano.config.js
module.exports = {
  preset: 'advanced',
};

But should you wish to customise this, you can pass an array with the second parameter as the options object to use. For example, to remove all comments:

// cssnano.config.js
module.exports = {
  preset: [
    'advanced',
    { discardComments: { removeAll: true } },
  ],
};

For options with customisable function parameters, use a cssnano.config.js at the same location as your package.json. You can then load a preset and export it with your custom parameters:

const advancedPreset = require('cssnano-preset-advanced');

module.exports = advancedPreset({
  discardComments: {
    remove: (comment) => comment[0] === '@',
  },
});

Note that you may wish to publish your own preset to npm for reusability, should it differ a lot from this one. This is highly encouraged!

Plugins

autoprefixer (external)

Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website

This plugin is loaded with the following configuration:

{
  add: false;
}

css-declaration-sorter (external)

Sorts CSS declarations fast and automatically in a certain order.

This plugin is loaded with the following configuration:

{
  exclude: true;
}

cssnano-utils

Utility methods used by cssnano

postcss-calc (external)

PostCSS plugin to reduce calc()

This plugin is loaded with its default configuration.

postcss-colormin

Minify colors in your CSS files with PostCSS.

This plugin is loaded with its default configuration.

postcss-convert-values

Convert values with PostCSS (e.g. ms -> s)

This plugin is loaded with the following configuration:

{
  length: false;
}

postcss-discard-comments

Discard comments in your CSS files with PostCSS.

This plugin is loaded with its default configuration.

postcss-discard-duplicates

Discard duplicate rules in your CSS files with PostCSS.

This plugin is loaded with its default configuration.

postcss-discard-empty

Discard empty rules and values with PostCSS.

This plugin is loaded with its default configuration.

postcss-discard-overridden

PostCSS plugin to discard overridden @keyframes or @counter-style.

This plugin is loaded with its default configuration.

postcss-discard-unused

Discard unused counter styles, keyframes and fonts.

This plugin is loaded with its default configuration.

postcss-merge-idents

Merge keyframe and counter style identifiers.

This plugin is loaded with its default configuration.

postcss-merge-longhand

Merge longhand properties into shorthand with PostCSS.

This plugin is loaded with its default configuration.

postcss-merge-rules

Merge CSS rules with PostCSS.

This plugin is loaded with its default configuration.

postcss-minify-font-values

Minify font declarations with PostCSS

This plugin is loaded with its default configuration.

postcss-minify-gradients

Minify gradient parameters with PostCSS.

This plugin is loaded with its default configuration.

postcss-minify-params

Minify at-rule params with PostCSS

This plugin is loaded with its default configuration.

postcss-minify-selectors

Minify selectors with PostCSS.

This plugin is loaded with its default configuration.

postcss-normalize-charset

Add necessary or remove extra charset with PostCSS

This plugin is loaded with the following configuration:

{
  add: false;
}

postcss-normalize-display-values

Normalize multiple value display syntaxes into single values.

This plugin is loaded with its default configuration.

postcss-normalize-positions

Normalize keyword values for position into length values.

This plugin is loaded with its default configuration.

postcss-normalize-repeat-style

Convert two value syntax for repeat-style into one value.

This plugin is loaded with its default configuration.

postcss-normalize-string

Normalize wrapping quotes for CSS string literals.

This plugin is loaded with its default configuration.

postcss-normalize-timing-functions

Normalize CSS animation/transition timing functions.

This plugin is loaded with its default configuration.

postcss-normalize-unicode

Normalize unicode-range descriptors, and can convert to wildcard ranges.

This plugin is loaded with its default configuration.

postcss-normalize-url

Normalize URLs with PostCSS

This plugin is loaded with its default configuration.

postcss-normalize-whitespace

Trim whitespace inside and around CSS rules & declarations.

This plugin is loaded with its default configuration.

postcss-ordered-values

Ensure values are ordered consistently in your CSS.

This plugin is loaded with its default configuration.

postcss-reduce-idents

Reduce custom identifiers with PostCSS.

This plugin is loaded with its default configuration.

postcss-reduce-initial

Reduce initial definitions to the actual initial value, where possible.

This plugin is loaded with its default configuration.

postcss-reduce-transforms

Reduce transform functions with PostCSS.

This plugin is loaded with its default configuration.

postcss-svgo

Optimise inline SVG with PostCSS.

This plugin is loaded with the following configuration:

{
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          removeViewBox: false,
        },
      },
    },
  ],
}

postcss-unique-selectors

Ensure CSS selectors are unique.

This plugin is loaded with its default configuration.

postcss-zindex

Reduce z-index values with PostCSS.

This plugin is loaded with its default configuration.

Contributors

See CONTRIBUTORS.md.

License

MIT Ben Briggs