How can I unminify some css I scraped?

Question

The best I can come up with is:

#!/usr/bin/env bash
filename=$1
cat "${filename}.css" | \
    awk '{gsub(/{|;/,"&\n\t"); print}' | \
    awk '{if(match($0,/[^\;]+}/)) {gsub(/}/,";\n&\n"); print}else{gsub(/}/,"\n&"); print}}' \
    > "${filename}.unminified.css"

Is there a better way to parse code and insert whitespace for readability?

Answer 1

You can use JavaScript to do that. Let's say you have the css in a variable named cssCode then you can run the following code on it:

const unminifiedCSS = cssCode.split('{').join(' {\n    ')
            .split(';').join(';\n    ')
            .split(',').join(', ')
            .split('    }').join('}\n')
            .replace(/\}(.+)/g, '}\n$1')
            .replace(/\n    ([^:]+):/g, '\n    $1: ')
            .replace(/([A-z0-9\)])}/g, '$1;\n}');

If you try to check you will get the unminfied CSS now!