Tags

, , , ,

Update: this blog post is about a Perl program named unistyle with the “.pl” Perl file extension.  It is in no way related to the company named UniStyle.pl.  The name similarity was inadvertent and we apologize for any confusion.

Unistyle.pl is a program to consolidate and compress WordPress style sheets. Developers of WordPress blogs or Web sites typically create a child theme using another fully-implemented theme as the foundation. The child theme’s style.css file typically contains the required comment headers, one or more @import rules pulling in the parent theme’s style sheets, and then the child theme’s customization style rules. This is an immensely powerful and versatile means to quickly build sophisticated sites.

The use of @import rules, however, degrades browser performance by requiring a separate HTTP request for each URI referenced in an @import rule. Ideally, a browser should only need to request a single style.css.

While a number of programs are available to consolidate and “minify” CSS files, I wrote a Perl program called unistyle.pl to address my specific needs in WordPress development and production environments. There were a few features I wanted for this capability:

  1. Consolidate all (perhaps nested) @import rule content into the single top-level style.css file.
  2. In the top-level CSS file (typically style.css) leave all existing comments (such as WordPress headers) and style rules (i.e., the child theme’s customizations) untouched to a) maintain WordPress functionality and b) retain the ability to easily edit the style rules specific to the child theme.
  3. “Minify” all imported style content. That is, squeeze out all unneeded comments, spaces, linefeeds; eliminate empty rules; optimize rules for minimum-length specification, etc. This reduces HTTP request time over the network.
  4. Make it re-runnable against the style file to re-import all the @import-referenced style sheet content in case a future parent theme update also includes some style updates.
  5. Make it reversible. That is, be able to run a command option to un-import style content, restoring the @import rules.
  6. Make it directly usable by my theme and plugin updater’s post-processing automation so that installation of a theme update automatically re-processes all of that theme’s child theme style files. (This will not be discussed here. Maybe I’ll post about this program later.)

Let’s create a simplistic child theme style.css file to illustrate how this works. Our “Child Of 2011” theme uses “Twenty Eleven” as a template so we @import the twentyeleven/style.css parent CSS and follow it with our own customizations:

/*!
Theme Name: Child Of 2011
Template: twentyeleven
Version: 1.0
*/
/* Bring in the parent's styles */
@import url('../twentyeleven/style.css');

/* my child customizations */
#header, #footer {
	background-color: #ccc;
}
  etc. …

We’ll run this style.css file through unistyle.pl:

$ cd public_html/wp-content/themes/childof2011
$ ~/unistyle.pl style.css

Processing style.css...
        importing ./../twentyeleven/style.css ...
        backup copy of original made to style.css_backup...
        style.css done.
        54616 bytes in 2 files combined to 40743 bytes in 1 file.
$

This will modify the style.css file to incorporate the @import content as we see here:

/*!
Theme Name: Child Of 2011
Template: twentyeleven
Version: 1.0
*/
/* Bring in the parent's styles */
/*+@import url("../twentyeleven/style.css");*/html,body,div,span,
applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,ac
	etc. …
 section.feature-image.large img{width:100%}/*-import*/

/* my child customizations */
#header, #footer {
	background-color: #ccc;
}
  etc. …

The program operates on the @import rules (in red above) and replaces each @import rule with a minified version of the CSS file contents referenced by the @import rule. This minified CSS is encapsulated with special opening and closing comment delimiters. The opening delimiter retains the information from the original @import rule and the closing comment delimiter is simply /*-import*/.

The purpose of this format is to enable easy reprocessing later. For example, let’s say a new version of the Twenty Eleven theme is installed that includes some modified CSS. All you need to do is rerun unistyle.pl on the child theme’s style.css to replace the old minified Twenty Eleven CSS with a new minified version with the latest changes.

Note how the processing consolidated the 2 files (parent and child style files) and reduced the total size by about 25%, thus providing a nice boost to browser performance. I often base child themes on the Thematic framework. In that case, the Thematic parent styles are pulled in by 6 separate @import rules. All those files are consolidated into the one child style.css and a size savings in excess of 30%. If you want to see an example, have a look at the style.css for this Web site: https://pduncan.com/wp-content/themes/pdthematic/style.css.

If you want to undo the consolidation of the style sheet, you can revert it back to its original state with the @import rules by using the “-u” (for undo) option:

$ ~/unistyle.pl -u style.css

Processing style.css...
        backup copy of original made to style.css_backup...
        style.css successfully processed: 1 @import restored.
$

Download Unistyle.pl

You can download the unistyle.zip file here, extract unistyle.pl, chmod 755 it, and give it a try.

Problems? Questions? Suggestions? Talk to your bartender. At this price, I’m not providing any support.