Trim "Minify" inline css at runtime, expand it at edit time.

Question

My custom WP theme has a text block in the theme options panel that allows the user to create and maintain a custom css block that is applied to the site template at runtime.

I would like to trim or "minify" this content before its stored in the database, but retain all the whitespace when its presented back to the user for editing.

Would this be possible?

For example, if the user has entered the following as their custom css code...

.red {color:red;}

.green {color:green;}

.blue {color:blue;}

Then I would like to store it in the database as:

.red{color:red;}.green{color:green;}.blue{color:blue;}

But still display it as it was input (ie, retain all the white space and line breaks) when the user is editing the content via my theme options panel.

Answer 1

Google has created a PHP class to help developers minify CSS located on Google Code

Answer 2

If you strip the whitespace from your data before storing it, that whitespace information is lost. You may therefore want to consider the following options:

• Keep two columns in the database: Original CSS, and Minified CSS. Send the minified version to the browser, but the user would get the original version for editing in the back-end. If the user makes some changes, commit to both the original and minified fields.

• You can also simply store just the original version in the database without any whitespace stripping. Then simply pre-processes the CSS before sending it to the browser. However, hard disk space being very cheap, you can avoid the pre-processing step by using the technique suggested above.

• Store the minified version, as you suggested in the question, then apply some formatting logic at the back-end, such that a line break would be added after each semicolon, etc. Obviously the user might have used a different code formatting that the one generated. You can also apply the formatting Logic on the client-side instead, using JavaScript.

Answer 3

What you need is a zipping algorithm, not a replace space. Look for the zipping algos and use them to compress your css when sending over and unzip at the client-side. I think html provides some options. Will check and add comments.