Prefetch Technologies // Keeping your cache lines cozy

Formatting CSS From The Linux Command Line

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!