This morning I needed a way to pretty print a CSS style sheet. After poking around the web I came across the cssbeautify-cli utility which takes a CSS file and produces pretty printed output. To use this super useful tool you will first need to install and configure the node package manager (npm):
$ apt install npm
To verify the module is available we can run npm with the search option:
$ npm search cssbeautify
NAME DESCRIPTION AUTHOR DATE VERSION KEYWORDS
@types/cssbeautify TypeScript definitions for CSS Beautify v0.3.1 =types 2016-10-03 0.3.1
cssbeautify Reindent and reformat CSS. =senchalabs 2013-10-09 0.3.1
cssbeautify-cli CLI for cssbeautify =cyberskunk 2016-12-21 0.5.3
grunt-cssbeautifier cssbeautify.com for grunt =douzi 2014-07-02 0.1.2
gulp-cssbeautify Reindent and reformat CSS =jonkemp 2014-03-29 0.1.3
npmdoc-gulp-cssbeautify #### api documentation for [gulp-cssbeautify… =npmdoc 2017-04-19 0.0.3
To install a module in $HOME/node_modules you can use the npm install option:
$ npm install cssbeautify-cli
If everything worked as expected a symbolic link to the executable should be created in $HOME/node_modules/.bin:
$ $HOME/node_modules/.bin/cssbeautify-cli -h
Usage:
/home/matty/node_modules/.bin/cssbeautify-cli [options] -f filename
/home/matty/node_modules/.bin/cssbeautify-cli [options] -s
Options:
-a, --autosemicolon insert a semicolon after the last ruleset [default: false]
-c, --config json config file to use
-f, --file file to beautify or glob pattern
-h, --help show this help message
-i, --indent string used for the indentation of the declaration (spaces, tabs or number of spaces) [default: " "]
-o, --openbrace the placement of open curly brace, either end-of-line or separate-line [default: "end-of-line"]
-s, --stdin use stdin as input
-v, --version Display program version
-w, --writefile write output to file
To format a CSS file you can pass the file to the scripts “-f” option and redirect the pretty printed output to a new file (or a pager):
$ ~/node_modules/.bin/cssbeautify-cli -f myCSSFile.css > myCSSFile.css.new
This tool makes viewing and interpreting CSS a snap!