I have a compressed CSS file (all whitespace removed) that I want to inspect, but it's a huge pain inspecting it as-is. Is there any utility (preferably linux command line) that I can run the file through to format it nicely?
Add a comment
|
9 Answers
The online service that Dave Newman mentioned has been converted into a Node.js script, which you can run on the command-line. If you have NPM installed you can just do:
npm install -g cssunminifier
And it’s pretty versatile how you can use it. Here are 3 different examples:
cssunminifier style.min.css style.css
cssunminifier --width=8 style.min.css
curl http://cdn.sstatic.net/stackoverflow/all.css | cssunminifier - | less
Here’s more info on the command-line css unminifier
2 Comments
tanius
It's nice that this also allows to replace a file with its pretty-printed version. So you can do, for example after saving a web page in Firefox as "Webpage, complete":
for file in *.css; do cssunminifier $file $file; done
GregL
FYI: This tool requires Node v11.15.0 or earlier to work because it relies on the very old
puts() method in the node utils module, which was removed in v12. If you really want to use it, use NVM to install and use that version before installing it globally. Don't forget to change back to a more modern version of afterwards!Try this online service.
You can also inspect any compressed file in Firebug.
2 Comments
Herms
Was looking at the file in chrome's dev tools, but it wasn't formatting it at all.
MrColes
That online service has also been converted into a versatile command line utlity with Node.js github.com/mrcoles/cssunminifier – see the readme on that page for how to use it
I wrote a little formatter in Ruby for you. Save it as some .rb file and use it via CLI like ruby format.rb input.css input-clean.css:
#Formats CSS
input, output = ARGV
#Input
if input == nil or output == nil
puts "Syntax: #{$0} [input] [output]"
exit
end
#Opens file
unless File.exist? input
puts "File #{input} doesn't exist."
exit
end
#Reads file
input = File.read input
#Creates output file
output = File.new output, "w+"
#Processes input
input = input.gsub("{", "\n{\n\t")
.gsub(",", ", ")
.gsub(";", ";\n\t")
.gsub(/\t?}/, "}\n\n\n")
.gsub(/\t([^:]+):/, "\t" + '\1: ')
#Writes output
output.write input
#Closes output
output.close
8 Comments
Herms
Not working 100% for me, but I can probably tweak it easily (doesn't seem to like the newlines before the .gsub calls and is complaining about non-escaped {} in the regex. Maybe a ruby version difference?). Thanks!
Daniel O'Hara
@Herms, the String#gsub method takes as the first argument simple strings ("" or '') or regular expressions (//) (ruby-doc.org/core/classes/String.html#M000817). Newlines are just a syntax sugar in Ruby. ;-)
Herms
Yea, but for some reason stringing them together like you did fails. If I remove the newlines so it's just input.gsub().gsub().gsub()... it works.
Herms
With the newlines like you had it I get
format.rb:25: syntax error, unexpected '.', expecting $endDaniel O'Hara
@Herms, oh, I'm sorry. I use Ruby 1.9.1 and it can handle this.
|
If you're looking for a locally-executable utility, as opposed to a web service, you want CSS Tidy.
1 Comment
Herms
Locally-executable is preferable. CSST Tidy isn't perfect (doesn't indent), but it's the closest so far to what I want.
Here's a free windows app to "beautify" your file. I haven't used it so I don't know how well it works. http://www.blumentals.net/csstool/
1 Comment
Herms
Windows apps don't really help me. I've got an ubuntu machine and a mac laptop, so I really need something that would work on one of those. Thanks though.
It is specific, but Visual Studio does this on that file type. (by no means a generic solution to which you alude)
answered Jul 30, 2010 at 14:04
Mark Schultheiss
34.3k13 gold badges75 silver badges116 bronze badges
Comments
take a look at the vkBeautify plugin
http://www.eslinstructor.net/vkbeautify/
It can beautify (pretty print) CSS, XML and JSON text,
written in plain javascript, small, simple and fast
