{"id":13459158,"url":"https://github.com/css/csso","last_synced_at":"2025-05-11T03:38:56.262Z","repository":{"id":45586759,"uuid":"1369824","full_name":"css/csso","owner":"css","description":"CSS minifier with structural optimizations","archived":false,"fork":false,"pushed_at":"2024-06-21T16:11:18.000Z","size":3385,"stargazers_count":3781,"open_issues_count":103,"forks_count":187,"subscribers_count":92,"default_branch":"master","last_synced_at":"2025-05-08T23:44:54.634Z","etag":null,"topics":["css","css-minifier","fast","minifier","usage-data"],"latest_commit_sha":null,"homepage":"https://css.github.io/csso/csso.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/css.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2011-02-15T15:31:37.000Z","updated_at":"2025-05-05T00:30:49.000Z","dependencies_parsed_at":"2023-02-12T04:02:42.152Z","dependency_job_id":"6e88c034-53e0-43bc-9889-c5428b52d5d7","html_url":"https://github.com/css/csso","commit_stats":{"total_commits":1025,"total_committers":56,"mean_commits":"18.303571428571427","dds":0.4409756097560975,"last_synced_commit":"221c9a7145721362ae98ef0313cef4f60dbfa65a"},"previous_names":[],"tags_count":54,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/css%2Fcsso","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/css%2Fcsso/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/css%2Fcsso/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/css%2Fcsso/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/css","download_url":"https://codeload.github.com/css/csso/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253405023,"owners_count":21903113,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-minifier","fast","minifier","usage-data"],"created_at":"2024-07-31T09:01:07.120Z","updated_at":"2025-05-11T03:38:56.241Z","avatar_url":"https://github.com/css.png","language":"JavaScript","readme":"[![NPM version](https://img.shields.io/npm/v/csso.svg)](https://www.npmjs.com/package/csso)\n[![Build Status](https://github.com/css/csso/actions/workflows/build.yml/badge.svg)](https://github.com/css/csso/actions/workflows/build.yml)\n[![Coverage Status](https://coveralls.io/repos/github/css/csso/badge.svg?branch=master)](https://coveralls.io/github/css/csso?branch=master)\n[![NPM Downloads](https://img.shields.io/npm/dm/csso.svg)](https://www.npmjs.com/package/csso)\n[![Twitter](https://img.shields.io/badge/Twitter-@cssoptimizer-blue.svg)](https://twitter.com/cssoptimizer)\n\nCSSO (CSS Optimizer) is a CSS minifier. It performs three sort of transformations: cleaning (removing redundants), compression (replacement for the shorter forms) and restructuring (merge of declarations, rules and so on). As a result an output CSS becomes much smaller in size.\n\n## Install\n\n```\nnpm install csso\n```\n\n## Usage\n\n```js\nimport { minify } from 'csso';\n// CommonJS is also supported\n// const { minify } = require('csso');\n\nconst minifiedCss = minify('.test { color: #ff0000; }').css;\n\nconsole.log(minifiedCss);\n// .test{color:red}\n```\n\nBundles are also available for use in a browser:\n\n- `dist/csso.js` – minified IIFE with `csso` as global\n```html\n\u003cscript src=\"node_modules/csso/dist/csso.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  csso.minify('.example { color: green }');\n\u003c/script\u003e\n```\n\n- `dist/csso.esm.js` – minified ES module\n```html\n\u003cscript type=\"module\"\u003e\n  import { minify } from 'node_modules/csso/dist/csso.esm.js'\n\n  minify('.example { color: green }');\n\u003c/script\u003e\n```\n\nOne of CDN services like `unpkg` or `jsDelivr` can be used. By default (for short path) a ESM version is exposing. For IIFE version a full path to a bundle should be specified:\n\n```html\n\u003c!-- ESM --\u003e\n\u003cscript type=\"module\"\u003e\n  import * as csstree from 'https://cdn.jsdelivr.net/npm/csso';\n  import * as csstree from 'https://unpkg.com/csso';\n\u003c/script\u003e\n\n\u003c!-- IIFE with an export to global --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/csso/dist/csso.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/csso/dist/csso.js\"\u003e\u003c/script\u003e\n```\n\nCSSO is based on [CSSTree](https://github.com/csstree/csstree) to parse CSS into AST, AST traversal and to generate AST back to CSS. All `CSSTree` API is available behind `syntax` field extended with `compress()` method. You may minify CSS step by step:\n\n```js\nimport { syntax } from 'csso';\n\nconst ast = syntax.parse('.test { color: #ff0000; }');\nconst compressedAst = syntax.compress(ast).ast;\nconst minifiedCss = syntax.generate(compressedAst);\n\nconsole.log(minifiedCss);\n// .test{color:red}\n```\n\nAlso syntax can be imported using `csso/syntax` entry point:\n\n```js\nimport { parse, compress, generate } from 'csso/syntax';\n\nconst ast = parse('.test { color: #ff0000; }');\nconst compressedAst = compress(ast).ast;\nconst minifiedCss = generate(compressedAst);\n\nconsole.log(minifiedCss);\n// .test{color:red}\n```\n\n\u003e Warning: CSSO doesn't guarantee API behind a `syntax` field as well as AST format. Both might be changed with changes in CSSTree. If you rely heavily on `syntax` API, a better option might be to use CSSTree directly.\n\n## Related projects\n\n- [Web interface](http://css.github.io/csso/csso.html)\n- [csso-cli](https://github.com/css/csso-cli) – command line interface\n- [gulp-csso](https://github.com/ben-eb/gulp-csso) – `Gulp` plugin\n- [grunt-csso](https://github.com/t32k/grunt-csso) – `Grunt` plugin\n- [broccoli-csso](https://github.com/sindresorhus/broccoli-csso) – `Broccoli` plugin\n- [postcss-csso](https://github.com/lahmatiy/postcss-csso) – `PostCSS` plugin\n- [csso-loader](https://github.com/sandark7/csso-loader) – `webpack` loader\n- [csso-webpack-plugin](https://github.com/zoobestik/csso-webpack-plugin) – `webpack` plugin\n- [CSSO Visual Studio Code plugin](https://marketplace.visualstudio.com/items?itemName=Aneryu.csso)\n- [vscode-csso](https://github.com/1000ch/vscode-csso) - Visual Studio Code plugin\n- [atom-csso](https://github.com/1000ch/atom-csso) - Atom plugin\n- [Sublime-csso](https://github.com/1000ch/Sublime-csso) - Sublime plugin\n\n## API\n\n\u003c!-- TOC depthfrom:3 --\u003e\n\n- [minify(source[, options])](#minifysource-options)\n- [minifyBlock(source[, options])](#minifyblocksource-options)\n- [syntax.compress(ast[, options])](#syntaxcompressast-options)\n- [Source maps](#source-maps)\n- [Usage data](#usage-data)\n    - [White list filtering](#white-list-filtering)\n    - [Black list filtering](#black-list-filtering)\n    - [Scopes](#scopes)\n\n\u003c!-- /TOC --\u003e\n\n### minify(source[, options])\n\nMinify `source` CSS passed as `String`.\n\n```js\nconst result = csso.minify('.test { color: #ff0000; }', {\n    restructure: false,   // don't change CSS structure, i.e. don't merge declarations, rulesets etc\n    debug: true           // show additional debug information:\n                          // true or number from 1 to 3 (greater number - more details)\n});\n\nconsole.log(result.css);\n// \u003e .test{color:red}\n```\n\nReturns an object with properties:\n\n- css `String` – resulting CSS\n- map `Object` – instance of [`SourceMapGenerator`](https://github.com/mozilla/source-map#sourcemapgenerator) or `null`\n\nOptions:\n\n- sourceMap\n\n  Type: `Boolean`  \n  Default: `false`\n\n  Generate a source map when `true`.\n\n- filename\n\n  Type: `String`  \n  Default: `'\u003cunknown\u003e'`\n\n  Filename of input CSS, uses for source map generation.\n\n- debug\n\n  Type: `Boolean`  \n  Default: `false`\n\n  Output debug information to `stderr`.\n\n- beforeCompress\n\n  Type: `function(ast, options)` or `Array\u003cfunction(ast, options)\u003e` or `null`  \n  Default: `null`\n\n  Called right after parse is run.\n\n- afterCompress\n\n  Type: `function(compressResult, options)` or `Array\u003cfunction(compressResult, options)\u003e` or `null`  \n  Default: `null`\n\n  Called right after [`syntax.compress()`](#syntaxcompressast-options) is run.\n\n- Other options are the same as for [`syntax.compress()`](#syntaxcompressast-options) function.\n\n### minifyBlock(source[, options])\n\nThe same as `minify()` but for list of declarations. Usually it's a `style` attribute value.\n\n```js\nconst result = csso.minifyBlock('color: rgba(255, 0, 0, 1); color: #ff0000');\n\nconsole.log(result.css);\n// \u003e color:red\n```\n\n### syntax.compress(ast[, options])\n\nDoes the main task – compress an AST. This is CSSO's extension in CSSTree syntax API.\n\n\u003e NOTE: `syntax.compress()` performs AST compression by transforming input AST by default (since AST cloning is expensive and needed in rare cases). Use `clone` option with truthy value in case you want to keep input AST untouched.\n\nReturns an object with properties:\n\n- ast `Object` – resulting AST\n\nOptions:\n\n- restructure\n\n  Type: `Boolean`  \n  Default: `true`\n\n  Disable or enable a structure optimisations.\n\n- forceMediaMerge\n\n  Type: `Boolean`  \n  Default: `false`\n\n  Enables merging of `@media` rules with the same media query by splitted by other rules. The optimisation is unsafe in general, but should work fine in most cases. Use it on your own risk.\n\n- clone\n\n  Type: `Boolean`  \n  Default: `false`\n\n  Transform a copy of input AST if `true`. Useful in case of AST reuse.\n\n- comments\n\n  Type: `String` or `Boolean`  \n  Default: `true`\n\n  Specify what comments to leave:\n\n  - `'exclamation'` or `true` – leave all exclamation comments (i.e. `/*! .. */`)\n  - `'first-exclamation'` – remove every comment except first one\n  - `false` – remove all comments\n\n- usage\n\n  Type: `Object` or `null`  \n  Default: `null`\n\n  Usage data for advanced optimisations (see [Usage data](#usage-data) for details)\n\n- logger\n\n  Type: `Function` or `null`  \n  Default: `null`\n\n  Function to track every step of transformation.\n\n### Source maps\n\nTo get a source map set `true` for `sourceMap` option. Additianaly `filename` option can be passed to specify source file. When `sourceMap` option is `true`, `map` field of result object will contain a [`SourceMapGenerator`](https://github.com/mozilla/source-map#sourcemapgenerator) instance. This object can be mixed with another source map or translated to string.\n\n```js\nconst csso = require('csso');\nconst css = fs.readFileSync('path/to/my.css', 'utf8');\nconst result = csso.minify(css, {\n  filename: 'path/to/my.css', // will be added to source map as reference to source file\n  sourceMap: true             // generate source map\n});\n\nconsole.log(result);\n// { css: '...minified...', map: SourceMapGenerator {} }\n\nconsole.log(result.map.toString());\n// '{ .. source map content .. }'\n```\n\nExample of generating source map with respect of source map from input CSS:\n\n```js\nimport { SourceMapConsumer } from 'source-map';\nimport * as csso from 'csso';\n\nconst inputFile = 'path/to/my.css';\nconst input = fs.readFileSync(inputFile, 'utf8');\nconst inputMap = input.match(/\\/\\*# sourceMappingURL=(\\S+)\\s*\\*\\/\\s*$/);\nconst output = csso.minify(input, {\n  filename: inputFile,\n  sourceMap: true\n});\n\n// apply input source map to output\nif (inputMap) {\n  output.map.applySourceMap(\n    new SourceMapConsumer(inputMap[1]),\n    inputFile\n  )\n}\n\n// result CSS with source map\nconsole.log(\n  output.css +\n  '/*# sourceMappingURL=data:application/json;base64,' +\n  Buffer.from(output.map.toString()).toString('base64') +\n  ' */'\n);\n```\n\n### Usage data\n\n`CSSO` can use data about how `CSS` is used in a markup for better compression. File with this data (`JSON`) can be set using `usage` option. Usage data may contain following sections:\n\n- `blacklist` – a set of black lists (see [Black list filtering](#black-list-filtering))\n- `tags` – white list of tags\n- `ids` – white list of ids\n- `classes` – white list of classes\n- `scopes` – groups of classes which never used with classes from other groups on the same element\n\nAll sections are optional. Value of `tags`, `ids` and `classes` should be an array of a string, value of `scopes` should be an array of arrays of strings. Other values are ignoring.\n\n#### White list filtering\n\n`tags`, `ids` and `classes` are using on clean stage to filter selectors that contain something not in the lists. Selectors are filtering only by those kind of simple selector which white list is specified. For example, if only `tags` list is specified then type selectors are checking, and if all type selectors in selector present in list or selector has no any type selector it isn't filter.\n\n\u003e `ids` and `classes` are case sensitive, `tags` – is not.\n\nInput CSS:\n\n```css\n* { color: green; }\nul, ol, li { color: blue; }\nUL.foo, span.bar { color: red; }\n```\n\nUsage data:\n\n```json\n{\n    \"tags\": [\"ul\", \"LI\"]\n}\n```\n\nResulting CSS:\n\n```css\n*{color:green}ul,li{color:blue}ul.foo{color:red}\n```\n\nFiltering performs for nested selectors too. `:not()` pseudos content is ignoring since the result of matching is unpredictable. Example for the same usage data as above:\n\n```css\n:nth-child(2n of ul, ol) { color: red }\n:nth-child(3n + 1 of img) { color: yellow }\n:not(div, ol, ul) { color: green }\n:has(:matches(ul, ol), ul, ol) { color: blue }\n```\n\nTurns into:\n\n```css\n:nth-child(2n of ul){color:red}:not(div,ol,ul){color:green}:has(:matches(ul),ul){color:blue}\n```\n\n#### Black list filtering\n\nBlack list filtering performs the same as white list filtering, but filters things that mentioned in the lists. `blacklist` can contain the lists `tags`, `ids` and `classes`.\n\nBlack list has a higher priority, so when something mentioned in the white list and in the black list then white list occurrence is ignoring. The `:not()` pseudos content ignoring as well.\n\n```css\n* { color: green; }\nul, ol, li { color: blue; }\nUL.foo, li.bar { color: red; }\n```\n\nUsage data:\n\n```json\n{\n    \"blacklist\": {\n        \"tags\": [\"ul\"]\n    },\n    \"tags\": [\"ul\", \"LI\"]\n}\n```\n\nResulting CSS:\n\n```css\n*{color:green}li{color:blue}li.bar{color:red}\n```\n\n#### Scopes\n\nScopes is designed for CSS scope isolation solutions such as [css-modules](https://github.com/css-modules/css-modules). Scopes are similar to namespaces and define lists of class names that exclusively used on some markup. This information allows the optimizer to move rules more agressive. Since it assumes selectors from different scopes don't match for the same element. This can improve rule merging.\n\nSuppose we have a file:\n\n```css\n.module1-foo { color: red; }\n.module1-bar { font-size: 1.5em; background: yellow; }\n\n.module2-baz { color: red; }\n.module2-qux { font-size: 1.5em; background: yellow; width: 50px; }\n```\n\nIt can be assumed that first two rules are never used with the second two on the same markup. But we can't say that for sure without a markup review. The optimizer doesn't know it either and will perform safe transformations only. The result will be the same as input but with no spaces and some semicolons:\n\n```css\n.module1-foo{color:red}.module1-bar{font-size:1.5em;background:#ff0}.module2-baz{color:red}.module2-qux{font-size:1.5em;background:#ff0;width:50px}\n```\n\nWith usage data `CSSO` can produce better output. If follow usage data is provided:\n\n```json\n{\n    \"scopes\": [\n        [\"module1-foo\", \"module1-bar\"],\n        [\"module2-baz\", \"module2-qux\"]\n    ]\n}\n```\n\nThe result will be (29 bytes extra saving):\n\n```css\n.module1-foo,.module2-baz{color:red}.module1-bar,.module2-qux{font-size:1.5em;background:#ff0}.module2-qux{width:50px}\n```\n\nIf class name isn't mentioned in the `scopes` it belongs to default scope. `scopes` data doesn't affect `classes` whitelist. If class name mentioned in `scopes` but missed in `classes` (both sections are specified) it will be filtered.\n\nNote that class name can't be set for several scopes. Also a selector can't have class names from different scopes. In both cases an exception will thrown.\n\nCurrently the optimizer doesn't care about changing order safety for out-of-bounds selectors (i.e. selectors that match to elements without class name, e.g. `.scope div` or `.scope ~ :last-child`). It assumes that scoped CSS modules doesn't relay on it's order. It may be fix in future if to be an issue.\n","funding_links":[],"categories":["JavaScript","Minifiers - JS \u0026 CSS","\u003e 3k ★","Frontend","Инструменты разработчика","Beautifier / Minifier"],"sub_categories":["Meetups","Tools"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcss%2Fcsso","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcss%2Fcsso","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcss%2Fcsso/lists"}