\href{https://www.npmjs.com/package/csso}{\texttt{ }} \href{https://travis-ci.org/css/csso}{\texttt{ }} \href{https://coveralls.io/github/css/csso?branch=master}{\texttt{ }} \href{https://www.npmjs.com/package/csso}{\texttt{ }} \href{https://twitter.com/cssoptimizer}{\texttt{ }}

CSSO (CSS Optimizer) is a CSS minifier. It performs three sort of transformations\+: cleaning (removing redundant), compression (replacement for shorter form) and restructuring (merge of declarations, rulesets and so on). As a result your CSS becomes much smaller.

\href{https://www.yandex.com/}{\texttt{ }} \href{https://www.avito.ru/}{\texttt{ }}\hypertarget{md_sfcode_node_modules_csso_README_autotoc_md7745}{}\doxysubsection{Ready to use}\label{md_sfcode_node_modules_csso_README_autotoc_md7745}

\begin{DoxyItemize}
\item \href{http://css.github.io/csso/csso.html}{\texttt{ Web interface}}
\item \href{https://github.com/css/csso-cli}{\texttt{ csso-\/cli}} – command line interface
\item \href{https://github.com/ben-eb/gulp-csso}{\texttt{ gulp-\/csso}} – {\ttfamily Gulp} plugin
\item \href{https://github.com/t32k/grunt-csso}{\texttt{ grunt-\/csso}} – {\ttfamily Grunt} plugin
\item \href{https://github.com/sindresorhus/broccoli-csso}{\texttt{ broccoli-\/csso}} – {\ttfamily Broccoli} plugin
\item \href{https://github.com/lahmatiy/postcss-csso}{\texttt{ postcss-\/csso}} – {\ttfamily Post\+CSS} plugin
\item \href{https://github.com/sandark7/csso-loader}{\texttt{ csso-\/loader}} – {\ttfamily webpack} loader
\item \href{https://github.com/zoobestik/csso-webpack-plugin}{\texttt{ csso-\/webpack-\/plugin}} – {\ttfamily webpack} plugin
\item \href{https://marketplace.visualstudio.com/items?itemName=Aneryu.csso}{\texttt{ CSSO Visual Studio Code plugin}}
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_csso_README_autotoc_md7746}{}\doxysubsection{Install}\label{md_sfcode_node_modules_csso_README_autotoc_md7746}

\begin{DoxyCode}{0}
\DoxyCodeLine{npm install csso }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_csso_README_autotoc_md7747}{}\doxysubsection{API}\label{md_sfcode_node_modules_csso_README_autotoc_md7747}

\begin{DoxyItemize}
\item \href{\#minifysource-options}{\texttt{ minify(source\mbox{[}, options\mbox{]})}}
\item \href{\#minifyblocksource-options}{\texttt{ minify\+Block(source\mbox{[}, options\mbox{]})}}
\item \href{\#syntaxcompressast-options}{\texttt{ syntax.\+compress(ast\mbox{[}, options\mbox{]})}}
\item \href{\#source-maps}{\texttt{ Source maps}}
\item \href{\#usage-data}{\texttt{ Usage data}}
\begin{DoxyItemize}
\item \href{\#white-list-filtering}{\texttt{ White list filtering}}
\item \href{\#black-list-filtering}{\texttt{ Black list filtering}}
\item \href{\#scopes}{\texttt{ Scopes}}
\end{DoxyItemize}
\end{DoxyItemize}

Basic usage\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{var csso = require('csso');}
\DoxyCodeLine{}
\DoxyCodeLine{var minifiedCss = csso.minify('.test \{ color: \#ff0000; \}').css;}
\DoxyCodeLine{}
\DoxyCodeLine{console.log(minifiedCss);}
\DoxyCodeLine{// .test\{color:red\} }

\end{DoxyCode}


CSSO is based on \href{https://github.com/csstree/csstree}{\texttt{ CSSTree}} to parse CSS into AST, AST traversal and to generate AST back to CSS. All {\ttfamily CSSTree} API is available behind {\ttfamily syntax} field. You may minify CSS step by step\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{var csso = require('csso');}
\DoxyCodeLine{var ast = csso.syntax.parse('.test \{ color: \#ff0000; \}');}
\DoxyCodeLine{var compressedAst = csso.syntax.compress(ast).ast;}
\DoxyCodeLine{var minifiedCss = csso.syntax.generate(compressedAst);}
\DoxyCodeLine{}
\DoxyCodeLine{console.log(minifiedCss);}
\DoxyCodeLine{// .test\{color:red\} }

\end{DoxyCode}


\begin{quote}
Warning\+: CSSO uses early versions of CSSTree that still in active development. CSSO doesn\textquotesingle{}t guarantee API behind {\ttfamily syntax} field or AST format will not change in future releases of CSSO, since it\textquotesingle{}s subject to change in CSSTree. Be careful with CSSO updates if you use {\ttfamily syntax} API until this warning removal. \end{quote}
\hypertarget{md_sfcode_node_modules_csso_README_autotoc_md7748}{}\doxysubsubsection{minify(source\mbox{[}, options\mbox{]})}\label{md_sfcode_node_modules_csso_README_autotoc_md7748}
Minify {\ttfamily source} CSS passed as {\ttfamily String}.


\begin{DoxyCode}{0}
\DoxyCodeLine{var result = csso.minify('.test \{ color: \#ff0000; \}', \{}
\DoxyCodeLine{    restructure: false,   // don't change CSS structure, i.e. don't merge declarations, rulesets etc}
\DoxyCodeLine{    debug: true           // show additional debug information:}
\DoxyCodeLine{                          // true or number from 1 to 3 (greater number -\/ more details)}
\DoxyCodeLine{\});}
\DoxyCodeLine{}
\DoxyCodeLine{console.log(result.css);}
\DoxyCodeLine{// > .test\{color:red\} }

\end{DoxyCode}


Returns an object with properties\+:


\begin{DoxyItemize}
\item css {\ttfamily String} – resulting CSS
\item map {\ttfamily Object} – instance of \href{https://github.com/mozilla/source-map\#sourcemapgenerator}{\texttt{ {\ttfamily Source\+Map\+Generator}}} or {\ttfamily null}
\end{DoxyItemize}

Options\+:


\begin{DoxyItemize}
\item source\+Map

Type\+: {\ttfamily Boolean} ~\newline
 Default\+: {\ttfamily false}

Generate a source map when {\ttfamily true}.
\item filename

Type\+: {\ttfamily String} ~\newline
 Default\+: `'$<$unknown$>$\textquotesingle{}\`{}

Filename of input CSS, uses for source map generation.
\item debug

Type\+: {\ttfamily Boolean} ~\newline
 Default\+: {\ttfamily false}

Output debug information to {\ttfamily stderr}.
\item before\+Compress

Type\+: {\ttfamily function(ast, options)} or {\ttfamily Array$<$function(ast, options)$>$} or {\ttfamily null} ~\newline
 Default\+: {\ttfamily null}

Called right after parse is run.
\item after\+Compress

Type\+: {\ttfamily function(compress\+Result, options)} or {\ttfamily Array$<$function(compress\+Result, options)$>$} or {\ttfamily null} ~\newline
 Default\+: {\ttfamily null}

Called right after \href{\#syntaxcompressast-options}{\texttt{ {\ttfamily syntax.\+compress()}}} is run.
\item Other options are the same as for \href{\#syntaxcompressast-options}{\texttt{ {\ttfamily syntax.\+compress()}}} function.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_csso_README_autotoc_md7749}{}\doxysubsubsection{minify\+Block(source\mbox{[}, options\mbox{]})}\label{md_sfcode_node_modules_csso_README_autotoc_md7749}
The same as {\ttfamily minify()} but for list of declarations. Usually it\textquotesingle{}s a {\ttfamily style} attribute value.


\begin{DoxyCode}{0}
\DoxyCodeLine{var result = csso.minifyBlock('color: rgba(255, 0, 0, 1); color: \#ff0000');}
\DoxyCodeLine{}
\DoxyCodeLine{console.log(result.css);}
\DoxyCodeLine{// > color:red }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_csso_README_autotoc_md7750}{}\doxysubsubsection{syntax.\+compress(ast\mbox{[}, options\mbox{]})}\label{md_sfcode_node_modules_csso_README_autotoc_md7750}
Does the main task – compress an AST. This is CSSO\textquotesingle{}s extension in CSSTree syntax API.

\begin{quote}
NOTE\+: {\ttfamily syntax.\+compress()} performs AST compression by transforming input AST by default (since AST cloning is expensive and needed in rare cases). Use {\ttfamily clone} option with truthy value in case you want to keep input AST untouched. \end{quote}
Returns an object with properties\+:


\begin{DoxyItemize}
\item ast {\ttfamily Object} – resulting AST
\end{DoxyItemize}

Options\+:


\begin{DoxyItemize}
\item restructure

Type\+: {\ttfamily Boolean} ~\newline
 Default\+: {\ttfamily true}

Disable or enable a structure optimisations.
\item force\+Media\+Merge

Type\+: {\ttfamily Boolean} ~\newline
 Default\+: {\ttfamily false}

Enables merging of {\ttfamily @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.
\item clone

Type\+: {\ttfamily Boolean} ~\newline
 Default\+: {\ttfamily false}

Transform a copy of input AST if {\ttfamily true}. Useful in case of AST reuse.
\item comments

Type\+: {\ttfamily String} or {\ttfamily Boolean} ~\newline
 Default\+: {\ttfamily true}

Specify what comments to leave\+:
\begin{DoxyItemize}
\item `\textquotesingle{}exclamation'{\ttfamily or}true{\ttfamily – leave all exclamation comments (i.\+e.}/$\ast$! .. $\ast$/{\ttfamily ) -\/}\textquotesingle{}first-\/exclamation\textquotesingle{}{\ttfamily – remove every comment except first one -\/}false\`{} – remove all comments
\end{DoxyItemize}
\item usage

Type\+: {\ttfamily Object} or {\ttfamily null} ~\newline
 Default\+: {\ttfamily null}

Usage data for advanced optimisations (see \href{\#usage-data}{\texttt{ Usage data}} for details)
\item logger

Type\+: {\ttfamily Function} or {\ttfamily null} ~\newline
 Default\+: {\ttfamily null}

Function to track every step of transformation.
\end{DoxyItemize}\hypertarget{md_sfcode_node_modules_csso_README_autotoc_md7751}{}\doxysubsubsection{Source maps}\label{md_sfcode_node_modules_csso_README_autotoc_md7751}
To get a source map set {\ttfamily true} for {\ttfamily source\+Map} option. Additianaly {\ttfamily filename} option can be passed to specify source file. When {\ttfamily source\+Map} option is {\ttfamily true}, {\ttfamily map} field of result object will contain a \href{https://github.com/mozilla/source-map\#sourcemapgenerator}{\texttt{ {\ttfamily Source\+Map\+Generator}}} instance. This object can be mixed with another source map or translated to string.


\begin{DoxyCode}{0}
\DoxyCodeLine{var csso = require('csso');}
\DoxyCodeLine{var css = fs.readFileSync('path/to/my.css', 'utf8');}
\DoxyCodeLine{var result = csso.minify(css, \{}
\DoxyCodeLine{  filename: 'path/to/my.css', // will be added to source map as reference to source file}
\DoxyCodeLine{  sourceMap: true             // generate source map}
\DoxyCodeLine{\});}
\DoxyCodeLine{}
\DoxyCodeLine{console.log(result);}
\DoxyCodeLine{// \{ css: '...minified...', map: SourceMapGenerator \{\} \}}
\DoxyCodeLine{}
\DoxyCodeLine{console.log(result.map.toString());}
\DoxyCodeLine{// '\{ .. source map content .. \}' }

\end{DoxyCode}


Example of generating source map with respect of source map from input CSS\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{var require('source-\/map');}
\DoxyCodeLine{var csso = require('csso');}
\DoxyCodeLine{var inputFile = 'path/to/my.css';}
\DoxyCodeLine{var input = fs.readFileSync(inputFile, 'utf8');}
\DoxyCodeLine{var inputMap = input.match(/\(\backslash\)/\(\backslash\)*\# sourceMappingURL=(\(\backslash\)S+)\(\backslash\)s*\(\backslash\)*\(\backslash\)/\(\backslash\)s*\$/);}
\DoxyCodeLine{var output = csso.minify(input, \{}
\DoxyCodeLine{  filename: inputFile,}
\DoxyCodeLine{  sourceMap: true}
\DoxyCodeLine{\});}
\DoxyCodeLine{}
\DoxyCodeLine{// apply input source map to output}
\DoxyCodeLine{if (inputMap) \{}
\DoxyCodeLine{  output.map.applySourceMap(}
\DoxyCodeLine{    new SourceMapConsumer(inputMap[1]),}
\DoxyCodeLine{    inputFile}
\DoxyCodeLine{  )}
\DoxyCodeLine{\}}
\DoxyCodeLine{}
\DoxyCodeLine{// result CSS with source map}
\DoxyCodeLine{console.log(}
\DoxyCodeLine{  output.css +}
\DoxyCodeLine{  '/*\# sourceMappingURL=data:application/json;base64,' +}
\DoxyCodeLine{  new Buffer(output.map.toString()).toString('base64') +}
\DoxyCodeLine{  ' */'}
\DoxyCodeLine{); }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_csso_README_autotoc_md7752}{}\doxysubsubsection{Usage data}\label{md_sfcode_node_modules_csso_README_autotoc_md7752}
{\ttfamily CSSO} can use data about how {\ttfamily CSS} is used in a markup for better compression. File with this data ({\ttfamily JSON}) can be set using {\ttfamily usage} option. Usage data may contain following sections\+:


\begin{DoxyItemize}
\item {\ttfamily blacklist} – a set of black lists (see \href{\#black-list-filtering}{\texttt{ Black list filtering}})
\item {\ttfamily tags} – white list of tags
\item {\ttfamily ids} – white list of ids
\item {\ttfamily classes} – white list of classes
\item {\ttfamily scopes} – groups of classes which never used with classes from other groups on the same element
\end{DoxyItemize}

All sections are optional. Value of {\ttfamily tags}, {\ttfamily ids} and {\ttfamily classes} should be an array of a string, value of {\ttfamily scopes} should be an array of arrays of strings. Other values are ignoring.\hypertarget{md_sfcode_node_modules_csso_README_autotoc_md7753}{}\doxyparagraph{White list filtering}\label{md_sfcode_node_modules_csso_README_autotoc_md7753}
{\ttfamily tags}, {\ttfamily ids} and {\ttfamily 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 {\ttfamily 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\textquotesingle{}t filter.

\begin{quote}
{\ttfamily ids} and {\ttfamily classes} are case sensitive, {\ttfamily tags} – is not. \end{quote}
Input CSS\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{* \{ color: green; \}}
\DoxyCodeLine{ul, ol, li \{ color: blue; \}}
\DoxyCodeLine{UL.foo, span.bar \{ color: red; \} }

\end{DoxyCode}


Usage data\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{    "{}tags"{}: ["{}ul"{}, "{}LI"{}]}
\DoxyCodeLine{\} }

\end{DoxyCode}


Resulting CSS\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{*\{color:green\}ul,li\{color:blue\}ul.foo\{color:red\} }

\end{DoxyCode}


Filtering performs for nested selectors too. {\ttfamily \+:not()} pseudos content is ignoring since the result of matching is unpredictable. Example for the same usage data as above\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{:nth-\/child(2n of ul, ol) \{ color: red \}}
\DoxyCodeLine{:nth-\/child(3n + 1 of img) \{ color: yellow \}}
\DoxyCodeLine{:not(div, ol, ul) \{ color: green \}}
\DoxyCodeLine{:has(:matches(ul, ol), ul, ol) \{ color: blue \} }

\end{DoxyCode}


Turns into\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{:nth-\/child(2n of ul)\{color:red\}:not(div,ol,ul)\{color:green\}:has(:matches(ul),ul)\{color:blue\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_csso_README_autotoc_md7754}{}\doxyparagraph{Black list filtering}\label{md_sfcode_node_modules_csso_README_autotoc_md7754}
Black list filtering performs the same as white list filtering, but filters things that mentioned in the lists. {\ttfamily blacklist} can contain the lists {\ttfamily tags}, {\ttfamily ids} and {\ttfamily classes}.

Black 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 {\ttfamily \+:not()} pseudos content ignoring as well.


\begin{DoxyCode}{0}
\DoxyCodeLine{* \{ color: green; \}}
\DoxyCodeLine{ul, ol, li \{ color: blue; \}}
\DoxyCodeLine{UL.foo, li.bar \{ color: red; \} }

\end{DoxyCode}


Usage data\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{    "{}blacklist"{}: \{}
\DoxyCodeLine{        "{}tags"{}: ["{}ul"{}]}
\DoxyCodeLine{    \},}
\DoxyCodeLine{    "{}tags"{}: ["{}ul"{}, "{}LI"{}]}
\DoxyCodeLine{\} }

\end{DoxyCode}


Resulting CSS\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{*\{color:green\}li\{color:blue\}li.bar\{color:red\} }

\end{DoxyCode}
\hypertarget{md_sfcode_node_modules_csso_README_autotoc_md7755}{}\doxyparagraph{Scopes}\label{md_sfcode_node_modules_csso_README_autotoc_md7755}
Scopes is designed for CSS scope isolation solutions such as \href{https://github.com/css-modules/css-modules}{\texttt{ 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\textquotesingle{}t match for the same element. This can improve rule merging.

Suppose we have a file\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{.module1-\/foo \{ color: red; \}}
\DoxyCodeLine{.module1-\/bar \{ font-\/size: 1.5em; background: yellow; \}}
\DoxyCodeLine{}
\DoxyCodeLine{.module2-\/baz \{ color: red; \}}
\DoxyCodeLine{.module2-\/qux \{ font-\/size: 1.5em; background: yellow; width: 50px; \} }

\end{DoxyCode}


It can be assumed that first two rules are never used with the second two on the same markup. But we can\textquotesingle{}t say that for sure without a markup review. The optimizer doesn\textquotesingle{}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\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{.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\} }

\end{DoxyCode}


With usage data {\ttfamily CSSO} can produce better output. If follow usage data is provided\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{\{}
\DoxyCodeLine{    "{}scopes"{}: [}
\DoxyCodeLine{        ["{}module1-\/foo"{}, "{}module1-\/bar"{}],}
\DoxyCodeLine{        ["{}module2-\/baz"{}, "{}module2-\/qux"{}]}
\DoxyCodeLine{    ]}
\DoxyCodeLine{\} }

\end{DoxyCode}


The result will be (29 bytes extra saving)\+:


\begin{DoxyCode}{0}
\DoxyCodeLine{.module1-\/foo,.module2-\/baz\{color:red\}.module1-\/bar,.module2-\/qux\{font-\/size:1.5em;background:\#ff0\}.module2-\/qux\{width:50px\} }

\end{DoxyCode}


If class name isn\textquotesingle{}t mentioned in the {\ttfamily scopes} it belongs to default scope. {\ttfamily scopes} data doesn\textquotesingle{}t affect {\ttfamily classes} whitelist. If class name mentioned in {\ttfamily scopes} but missed in {\ttfamily classes} (both sections are specified) it will be filtered.

Note that class name can\textquotesingle{}t be set for several scopes. Also a selector can\textquotesingle{}t have class names from different scopes. In both cases an exception will thrown.

Currently the optimizer doesn\textquotesingle{}t care about changing order safety for out-\/of-\/bounds selectors (i.\+e. selectors that match to elements without class name, e.\+g. {\ttfamily .scope div} or {\ttfamily .scope $\sim$ \+:last-\/child}). It assumes that scoped CSS modules doesn\textquotesingle{}t relay on it\textquotesingle{}s order. It may be fix in future if to be an issue. 