cssnano

cssnano is a CSS minifier built on top of PostCSS. It applies various optimizations to reduce the size of your CSS output.

Usage

cssnano is a CSS processor that can be enabled from the style editor menu.

When enabled, all CSS output (whether authored in CSS, SCSS, Sass, Less, Stylus, or any other style language) is minified and optimized.

cssnano can be used alongside other processors. Multiple processors are applied in the order they appear in the style editor menu.

Optimizations

cssnano uses the default preset, which includes a wide range of optimizations such as:

• Removing whitespace and comments
• Minifying selectors and values
• Merging duplicate rules
• Reducing calc() expressions
• Normalizing values (e.g. colors, unicode ranges)

Demo

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "markup": {
      "language": "html",
      "content": "<div class=\"card\">\n  <h1>cssnano Demo</h1>\n  <p>Check the <strong>Compiled</strong> tab to see the minified CSS output.</p>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": "\n.card {\n  font-family: sans-serif;\n  max-width: 600px;\n  margin: 2em auto;\n  padding: 1.5em;\n  border-radius: 8px;\n  background-color: #ffffff;\n  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.10);\n}\n\n.card h1 {\n  color: #2d3748;\n  margin-top: 0px;\n}\n\n.card p {\n  color: #4a5568;\n  line-height: 1.6;\n}\n"
    },
    "processors": [
      "cssnano"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    },
    "activeEditor": "style"
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "config": {
    "markup": {
      "language": "html",
      "content": "<div class=\"card\">\n  <h1>cssnano Demo</h1>\n  <p>Check the <strong>Compiled</strong> tab to see the minified CSS output.</p>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": "\n.card {\n  font-family: sans-serif;\n  max-width: 600px;\n  margin: 2em auto;\n  padding: 1.5em;\n  border-radius: 8px;\n  background-color: #ffffff;\n  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.10);\n}\n\n.card h1 {\n  color: #2d3748;\n  margin-top: 0px;\n}\n\n.card p {\n  color: #4a5568;\n  line-height: 1.6;\n}\n"
    },
    "processors": [
      "cssnano"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    },
    "activeEditor": "style"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "markup": {
      "language": "html",
      "content": "<div class=\"card\">\n  <h1>cssnano Demo</h1>\n  <p>Check the <strong>Compiled</strong> tab to see the minified CSS output.</p>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": "\n.card {\n  font-family: sans-serif;\n  max-width: 600px;\n  margin: 2em auto;\n  padding: 1.5em;\n  border-radius: 8px;\n  background-color: #ffffff;\n  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.10);\n}\n\n.card h1 {\n  color: #2d3748;\n  margin-top: 0px;\n}\n\n.card p {\n  color: #4a5568;\n  line-height: 1.6;\n}\n"
    },
    "processors": [
      "cssnano"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    },
    "activeEditor": "style"
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "config": {
    "markup": {
      "language": "html",
      "content": "<div class=\"card\">\n  <h1>cssnano Demo</h1>\n  <p>Check the <strong>Compiled</strong> tab to see the minified CSS output.</p>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": "\n.card {\n  font-family: sans-serif;\n  max-width: 600px;\n  margin: 2em auto;\n  padding: 1.5em;\n  border-radius: 8px;\n  background-color: #ffffff;\n  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.10);\n}\n\n.card h1 {\n  color: #2d3748;\n  margin-top: 0px;\n}\n\n.card p {\n  color: #4a5568;\n  line-height: 1.6;\n}\n"
    },
    "processors": [
      "cssnano"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    },
    "activeEditor": "style"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

let options = $state({
  "config": {
    "markup": {
      "language": "html",
      "content": "<div class=\"card\">\n  <h1>cssnano Demo</h1>\n  <p>Check the <strong>Compiled</strong> tab to see the minified CSS output.</p>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": "\n.card {\n  font-family: sans-serif;\n  max-width: 600px;\n  margin: 2em auto;\n  padding: 1.5em;\n  border-radius: 8px;\n  background-color: #ffffff;\n  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.10);\n}\n\n.card h1 {\n  color: #2d3748;\n  margin-top: 0px;\n}\n\n.card p {\n  color: #4a5568;\n  line-height: 1.6;\n}\n"
    },
    "processors": [
      "cssnano"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    },
    "activeEditor": "style"
  }
});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>

Solid

import { createPlayground, type EmbedOptions } from 'livecodes';

export default function App() {
  const options: EmbedOptions = {
  "config": {
    "markup": {
      "language": "html",
      "content": "<div class=\"card\">\n  <h1>cssnano Demo</h1>\n  <p>Check the <strong>Compiled</strong> tab to see the minified CSS output.</p>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": "\n.card {\n  font-family: sans-serif;\n  max-width: 600px;\n  margin: 2em auto;\n  padding: 1.5em;\n  border-radius: 8px;\n  background-color: #ffffff;\n  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.10);\n}\n\n.card h1 {\n  color: #2d3748;\n  margin-top: 0px;\n}\n\n.card p {\n  color: #4a5568;\n  line-height: 1.6;\n}\n"
    },
    "processors": [
      "cssnano"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    },
    "activeEditor": "style"
  }
};
  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  return <div ref={onMounted}></div>;
}

Language Info

Name

cssnano

Type

Processor

Editor

style

Links

• cssnano Official Website
• cssnano Presets
• PostCSS
• CSS Processors in LiveCodes