cssnano-preset-default

What is cssnano-preset-default?

The cssnano-preset-default package is a default preset for cssnano, which is a modular minifier for CSS. It includes various optimizations that are safe to use without breaking the CSS. This preset is a collection of default optimizations that can be applied to CSS files to reduce their size and improve loading times in production environments.

What are cssnano-preset-default's main functionalities?

Minification

This feature allows you to minify CSS, removing whitespace and comments, and optimizing CSS code to reduce file size.

"use strict";const cssnano=require('cssnano');const presetDefault=require('cssnano-preset-default');const postcss=require('postcss');postcss([cssnano({preset:presetDefault()})]).process('.example { color: #ffffff; }').then(result => {console.log(result.css);});

Rebasing z-index values

This feature rebases z-index values to a smaller range to reduce file size without affecting the stacking order of elements.

"use strict";const cssnano=require('cssnano');const presetDefault=require('cssnano-preset-default');const postcss=require('postcss');postcss([cssnano({preset:presetDefault()})]).process('.z1 { z-index: 1000; } .z2 { z-index: 2000; }').then(result => {console.log(result.css);});

Reducing CSS calc expressions

This feature optimizes CSS calc expressions by reducing them to their smallest form.

"use strict";const cssnano=require('cssnano');const presetDefault=require('cssnano-preset-default');const postcss=require('postcss');postcss([cssnano({preset:presetDefault()})]).process('h1 { margin-top: calc(10px + 20px); }').then(result => {console.log(result.css);});

Merging duplicate rules

This feature merges duplicate CSS rules into one to reduce file size and redundancy.

"use strict";const cssnano=require('cssnano');const presetDefault=require('cssnano-preset-default');const postcss=require('postcss');postcss([cssnano({preset:presetDefault()})]).process('.example { color: red; } .example { color: red; }').then(result => {console.log(result.css);});

Other packages similar to cssnano-preset-default

clean-css

clean-css is a fast and efficient CSS optimizer for Node.js and the browser. It performs minification, rebasing, and reordering of CSS. While cssnano uses a PostCSS-based plugin system, clean-css is not built on PostCSS and has its own API.

uglifycss

uglifycss is a CSS minifier that compresses CSS files by removing unnecessary whitespace and comments. It is simpler than cssnano and does not offer as many features or optimizations.

purgecss

purgecss is a tool to remove unused CSS, which can result in smaller CSS files. Unlike cssnano, which focuses on optimizing the CSS itself, purgecss focuses on removing unused styles based on content analysis.

README

cssnano-preset-default

Safe defaults for cssnano which require minimal configuration.

Table of Contents

• Overview

• Usage

  • Install
  • Configuration

• Plugins

  • 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-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-initial
  • postcss-reduce-transforms
  • postcss-svgo
  • postcss-unique-selectors

• Contributors

• License

Overview

This default preset for cssnano only includes transforms that make no assumptions about your CSS other than what is passed in. In previous iterations of cssnano, assumptions were made about your CSS which caused output to look different in certain use cases, but not others. These transforms have been moved from the defaults to other presets, to make this preset require only minimal configuration.

Usage

Install

Note that this preset comes bundled with cssnano by default, so you don't need to install it separately.

Configuration

If you would like to use the default configuration, then you don't need to add anything to your package.json.

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:

 {
   "name": "awesome-application",
+  "cssnano": {
+    "preset": [
+      "default",
+      {"discardComments": {"removeAll": true}}
+    ]
+  }
 }

Depending on your usage, the JSON configuration might not work for you, such as in cases where you would like to use options with customisable function parameters. For this use case, we recommend 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 defaultPreset = require('cssnano-preset-default');

module.exports = defaultPreset({
  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

css-declaration-sorter (external)

Sorts CSS declarations fast and automatically in a certain order.

This plugin is loaded with the following configuration:

{
	keepOverrides: 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-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-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.

Contributors

See CONTRIBUTORS.md.

License

MIT © Ben Briggs