CSS Minifier and Utility Library

Common errors

• Error: Cannot find module 'crass'

  cause The package `crass` is not installed in the project's `node_modules` directory or globally.
  fix Run `npm install crass` or `npm install -D crass` (for development dependency) in your project directory, or `npm install -g crass` for global CLI usage.

• SyntaxError: Unexpected token 'export' (or 'import')

  cause Attempting to use ES module `import`/`export` syntax with Crass, which is a CommonJS module, without a transpilation step.
  fix Change your import statement to `const crass = require('crass');` and ensure your environment supports CommonJS modules, or configure a bundler (like Webpack or Rollup) to transpile ES modules to CommonJS if you must use `import` syntax in your source.

• Parse Error: Unexpected token...

  cause The input CSS string contains syntax errors that prevent Crass from successfully parsing it into an Abstract Syntax Tree (AST).
  fix Review the CSS input for syntax errors. Crass requires valid CSS to build its parse tree. Use a CSS linter or online validator to identify and correct issues in your stylesheet.

Warnings

• breaking The `crass` package is no longer actively maintained. The last release was in February 2018. This means there will be no new features, bug fixes, or security updates.
  Fix: Consider migrating to actively maintained CSS processing libraries like cssnano, clean-css, or PostCSS with minification plugins for ongoing support and security.
• gotcha Crass is built with ES2015 and requires Node.js version 6.11.2 or higher. Using it with older Node.js versions may lead to syntax errors or runtime issues.
  Fix: Ensure your Node.js environment is updated to version 6.11.2 or later. Check `node --version`.
• gotcha Due to its parse-tree approach, Crass can be slower than string-based CSS minifiers. This might be noticeable in build processes for very large stylesheets.
  Fix: Benchmark performance against other minifiers if build speed is a critical concern. For smaller projects or less frequent builds, the slower speed might be acceptable given its advanced optimization capabilities.
• gotcha Crass cannot minify CSS with syntax errors. It relies on a valid parse tree, so malformed CSS will cause parsing to fail.
  Fix: Always ensure your input CSS is syntactically correct before passing it to Crass. Use a CSS linter or validator (e.g., stylelint) as part of your development workflow.

Install

• npm install crass npm
• yarn add crass yarn
• pnpm add crass pnpm

Imports

• crass
  wrong:

  import crass from 'crass';

  correct:

  const crass = require('crass');

  Crass is a CommonJS module. Direct ES module `import` syntax will fail without a build step (e.g., Babel, Webpack). The project is unmaintained, so official ESM support is unlikely.
• parse
  wrong:

  import { parse } from 'crass';

  correct:

  const parsed = crass.parse(cssString);

  The `parse` function is accessed as a method of the default `crass` export. Destructuring `crass` for named imports is not supported.
• optimize

  const optimized = parsed.optimize({ o1: true });

  The `optimize` method is called on a parsed CSS object. It accepts an optional options object for advanced optimizations like `o1: true`.

Quickstart

Demonstrates parsing, basic and advanced optimization, minification, and pretty-printing of CSS using the Crass API.

const crass = require('crass');

// Example CSS with various features for demonstration
const cssInput = `
  @charset "UTF-8";
  /* A comment */
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 20px 5px;
    padding: 1em;
    color: #FF0000; /* Red */
    font-size: 16px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  @media (max-width: 600px) {
    .container {
      flex-direction: column;
      margin: 5px;
    }
  }
  a:hover {
    text-decoration: underline;
  }
  /*
    Crass can also perform optimizations like
    shorthand conversions and color compression.
  */
  body {
    background: rgb(255, 255, 255);
  }
`;

// Parse the CSS stylesheet into an AST
let parsed = crass.parse(cssInput);
console.log('--- Original Parse Tree (toString output) ---');
console.log(parsed.toString()); // Default toString() output is minified

// Optimize the stylesheet (basic optimization)
parsed = parsed.optimize();
console.log('\n--- Optimized & Minified ---');
console.log(parsed.toString());

// Optimize with advanced optimizations (O1 flag)
// Note: O1 can be more aggressive and might not be suitable for all CSS.
const parsedO1 = crass.parse(cssInput).optimize({ o1: true });
console.log('\n--- Optimized (O1) & Minified ---');
console.log(parsedO1.toString());

// Pretty print the stylesheet for readability
console.log('\n--- Pretty Printed ---');
console.log(parsed.pretty());

// Access AST nodes (example: count rules)
const rules = parsed.node.rules.filter(node => node.type === 'rule');
console.log(`\nFound ${rules.length} CSS rules after parsing and optimizing.`);