{"id":10678,"library":"crass","title":"CSS Minifier and Utility Library","description":"Crass is a JavaScript utility library designed for CSS minification, pretty-printing, and general manipulation. Unlike many other CSS minifiers that operate on string-based transformations, Crass constructs a full parse tree of the CSS, enabling deeper and more accurate optimizations, particularly for gzip compression, and consistent pretty-printing. It supports CSS3 and CSS4 features, with options to strip obsolete tags based on browser versions and convert colors to their smallest forms. The current stable version is 0.12.3, last published in February 2018. The project is no longer actively maintained, making it an abandoned library. Its primary differentiator is its parse-tree approach, which, while slower, allows for advanced optimizations not possible with string-manipulation tools.","status":"abandoned","version":"0.12.3","language":"javascript","source_language":"en","source_url":"git://github.com/mattbasta/crass","tags":["javascript","css3","css","parser","minifier"],"install":[{"cmd":"npm install crass","lang":"bash","label":"npm"},{"cmd":"yarn add crass","lang":"bash","label":"yarn"},{"cmd":"pnpm add crass","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used for parsing CSS grammar into an Abstract Syntax Tree (AST), as indicated in older release notes.","package":"jison","optional":false}],"imports":[{"note":"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.","wrong":"import crass from 'crass';","symbol":"crass","correct":"const crass = require('crass');"},{"note":"The `parse` function is accessed as a method of the default `crass` export. Destructuring `crass` for named imports is not supported.","wrong":"import { parse } from 'crass';","symbol":"parse","correct":"const parsed = crass.parse(cssString);"},{"note":"The `optimize` method is called on a parsed CSS object. It accepts an optional options object for advanced optimizations like `o1: true`.","symbol":"optimize","correct":"const optimized = parsed.optimize({ o1: true });"}],"quickstart":{"code":"const crass = require('crass');\n\n// Example CSS with various features for demonstration\nconst cssInput = `\n  @charset \"UTF-8\";\n  /* A comment */\n  .container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin: 10px 20px 5px;\n    padding: 1em;\n    color: #FF0000; /* Red */\n    font-size: 16px;\n    border: 1px solid #ccc;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n  @media (max-width: 600px) {\n    .container {\n      flex-direction: column;\n      margin: 5px;\n    }\n  }\n  a:hover {\n    text-decoration: underline;\n  }\n  /*\n    Crass can also perform optimizations like\n    shorthand conversions and color compression.\n  */\n  body {\n    background: rgb(255, 255, 255);\n  }\n`;\n\n// Parse the CSS stylesheet into an AST\nlet parsed = crass.parse(cssInput);\nconsole.log('--- Original Parse Tree (toString output) ---');\nconsole.log(parsed.toString()); // Default toString() output is minified\n\n// Optimize the stylesheet (basic optimization)\nparsed = parsed.optimize();\nconsole.log('\\n--- Optimized & Minified ---');\nconsole.log(parsed.toString());\n\n// Optimize with advanced optimizations (O1 flag)\n// Note: O1 can be more aggressive and might not be suitable for all CSS.\nconst parsedO1 = crass.parse(cssInput).optimize({ o1: true });\nconsole.log('\\n--- Optimized (O1) & Minified ---');\nconsole.log(parsedO1.toString());\n\n// Pretty print the stylesheet for readability\nconsole.log('\\n--- Pretty Printed ---');\nconsole.log(parsed.pretty());\n\n// Access AST nodes (example: count rules)\nconst rules = parsed.node.rules.filter(node => node.type === 'rule');\nconsole.log(`\\nFound ${rules.length} CSS rules after parsing and optimizing.`);","lang":"javascript","description":"Demonstrates parsing, basic and advanced optimization, minification, and pretty-printing of CSS using the Crass API."},"warnings":[{"fix":"Consider migrating to actively maintained CSS processing libraries like cssnano, clean-css, or PostCSS with minification plugins for ongoing support and security.","message":"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.","severity":"breaking","affected_versions":">=0.12.3"},{"fix":"Ensure your Node.js environment is updated to version 6.11.2 or later. Check `node --version`.","message":"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.","severity":"gotcha","affected_versions":"<6.11.2"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"Crass cannot minify CSS with syntax errors. It relies on a valid parse tree, so malformed CSS will cause parsing to fail.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"The package `crass` is not installed in the project's `node_modules` directory or globally.","error":"Error: Cannot find module 'crass'"},{"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.","cause":"Attempting to use ES module `import`/`export` syntax with Crass, which is a CommonJS module, without a transpilation step.","error":"SyntaxError: Unexpected token 'export' (or 'import')"},{"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.","cause":"The input CSS string contains syntax errors that prevent Crass from successfully parsing it into an Abstract Syntax Tree (AST).","error":"Parse Error: Unexpected token..."}],"ecosystem":"npm"}