1. cssnano-preset-lite
Safe and minimum transformation
cssnano-preset-lite
Package: cssnano-preset-lite
Created by: cssnano
Last modified: Wed, 24 Apr 2024 21:33:51 GMT
Version: 4.0.0
License: MIT
Downloads: 33,369
Repository: https://github.com/cssnano/cssnano

Install

npm install cssnano-preset-lite
yarn add cssnano-preset-lite

cssnano-preset-lite

Safe and minimum transformation with just removing whitespaces, line breaks and comments

Table of Contents

Overview

This lite preset for cssnano only includes transforms that only removes extra whitespace,
linebreaks, and comments.

Usage

Install

With npm do:

npm install cssnano-preset-lite --save-dev

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

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": [
+      "lite",
+      {"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-lite');

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

cssnano-utils

Utility methods used by cssnano

postcss-discard-comments

Discard comments 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-normalize-whitespace

Trim whitespace inside and around CSS rules & declarations.

This plugin is loaded with its default configuration.

Contributors

See CONTRIBUTORS.md.

Dependencies

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin