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!

This article was posted by Matty on 2017-12-02 08:38:01 -0500 EST