- Notifications
You must be signed in to change notification settings - Fork10
Command line interface for CSSO
License
css/csso-cli
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Command line interface forCSSO.
npm install -g csso-cliUsage: csso [input] [options]Options: --comments <value> Comments to keep: exclamation (default), first-exclamation or none --debug [level] Output intermediate state of CSS during a compression -d, --declaration-list Treat input as a declaration list --force-media-merge Enable unsafe merge of @media rules -h, --help Output usage information -i, --input <filename> Input file --input-source-map <source> Input source map: none, auto (default) or <filename> -o, --output <filename> Output file (result outputs to stdout if not set) --no-restructure Disable structural optimisations -s, --source-map <destination> Generate source map: none (default), inline, file or <filename> --stat Output statistics in stderr -u, --usage <filename> Usage data file -v, --version Output version --watch Watch source file for changesSome examples:
> csso in.css...output result in stdout...> csso in.css --output out.css> echo '.test { color: #ff0000; }' | csso.test{color:red}> cat source1.css source2.css | csso | gzip -9 -c > production.css.gzSource map doesn't generate by default. To generate map use--source-map CLI option, that can be:
none(default) – don't generate source mapinline– add source map into result CSS (via/*# sourceMappingURL=application/json;base64,... */)file– write source map into file with same name as output file, but with.mapextension (in this case--outputoption is required)- any other values treat as filename for generated source map
Examples:
> csso my.css --source-map inline> csso my.css --output my.min.css --source-map file> csso my.css --output my.min.css --source-map maps/my.min.mapUse--input-source-map option to specify input source map if needed. Possible values for option:
auto(default) - attempt to fetch input source map by follow steps:- try to fetch inline map from input
- try to fetch source map filename from input and read its content
- (when
--inputis specified) check file with same name as input file but with.mapextension exists and read its content
none- don't use input source map; actually it's using to disableauto-fetching- any other values treat as filename for input source map
Generally you shouldn't care about the input source map since defaults behaviour (auto) covers most use cases.
NOTE: Input source map is using only if output source map is generating.
CSSO can use data about howCSS is using for better compression. File with this data (JSON format) can be set using--usage option. Read more aboutUsage data inCSSO repository.
All debug information outputs tostderr.
To get brief info about compression use--stat option.
> echo '.test { color: #ff0000 }' | csso --stat >/dev/nullSource: <stdin>Original: 25 bytesCompressed: 16 bytes (64.00%)Saving: 9 bytes (36.00%)Time: 7 msMemory: 0.204 MBTo get details about compression steps use--debug option.
> echo '.test { color: green; color: #ff0000 } .foo { color: red }' | csso --debug## parsing done in 4 msCompress block #1[0.000s] init[0.001s] clean[0.003s] replace[0.001s] prepare[0.001s] mergeAtrule[0.000s] initialMergeRuleset[0.000s] disjoinRuleset[0.000s] restructShorthand[0.001s] restructBlock[0.000s] mergeRuleset[0.000s] restructRuleset## compress done in 9 ms## generate done in 0 ms.foo,.test{color:red}More details are providing when--debug option has a number greater than1:
> echo '.test { color: green; color: #ff0000 } .foo { color: red }' | csso --debug 2## parsing done in 4 msCompress block #1[0.001s] init .test{color:green;color:#ff0000}.foo{color:red}[0.001s] clean .test{color:green;color:#ff0000}.foo{color:red}[0.004s] replace .test{color:green;color:red}.foo{color:red}...[0.000s] mergeRuleset .foo,.test{color:red}[0.000s] restructRuleset .foo,.test{color:red}## compress done in 12 ms## generate done in 0 ms.foo,.test{color:red}Using--debug option adds stack trace to CSS parse error output. That can help to find out problem in parser.
> echo '.a { color }' | csso --debugParse error <stdin>: Colon is expected 1 |.a { color }------------------^ 2 |/usr/local/lib/node_modules/csso/lib/cli.js:243 throw e; ^Error: Colon is expected at parseError (/usr/local/lib/node_modules/csso/lib/parser/index.js:54:17) at eat (/usr/local/lib/node_modules/csso/lib/parser/index.js:88:5) at getDeclaration (/usr/local/lib/node_modules/csso/lib/parser/index.js:394:5) at getBlock (/usr/local/lib/node_modules/csso/lib/parser/index.js:380:27) ...- CSSO – CSS minifier itself
- Gulp:gulp-csso
- Grunt:grunt-csso
- Broccoli:broccoli-csso
- PostCSS:postcss-csso
- Webpack:csso-loader
MIT
About
Command line interface for CSSO