Minify/Unminify CSS/JS Files

One way to optimize bytes downloaded from your Web site is to minimize the CSS and JavaScript code required to display the pages. But if you like to tinker with those files, you don't want to work with the minified code because it strips out helpful comments and formatting.

CSS and JS preprocessors like SASS and CoffeeScript, to name just two, let you work with commented code but impose a metalanguage of their own and may be overkill for simpler sites or coders who prefer to work directly with CSS and JS.

Can you have your cake and eat it too? With Keyboard Maestro, you can.


This palette, active in text editors, allows you to open your production files, unminify them for editing and testing and then minify them again for production.

It relies primarily on just two commands: Minify After Backup and Unminify. A Preferences option lets you configure the palette for your environment. And a Backup option can verify your installation without risk.

Installation does require two Perl modules and two included Perl scripts.

The ReadMe.txt file and the Help option in Preferences have all the details.


Apart from creating the unminified directories, there's no initialization necessary.

Just open your unminified file and Minify it to create production minified files with unminified backups.

Subsequently you can just work with the production file, opening the minifyied file and unminifying it for editing.

You can test your changes by running the unminified code and, when you're happy with it, minify it for production.

You never need to open an unminified backup file.

If you change your unminifieds subfolder, move any existing unminified files to the new subfolder to make them available to the Unminify command.


The animation below shows the palette in action, using three of the four options.

The first segment shows the Preferences form with correctly formatted data in the fields. The second field is incorrectly edited, showing a red outline when the mistake is made and a bubble explaining the error with the form is submitted. It is then corrected and passes validation on submit.

The original unminified form, which has already been open, is then minified. YOu can't, in this animation, see the notification, though.

And then the minified text is uniminified.


A number of Keyboard Maestro principles are used in this palette. Among them:

  • Building a filename path from a variable and a window title

  • Reading a trigger value to determine whether to run a macro as a function

  • Executing external AppleScript and Perl scripts

  • Passing a Keyboard Maestro variable to an external script

  • Passing an AppleScript variable back to Keyboard Maestro

  • If/Then/Else program flow

  • Custom HTML Form for preferences

  • HTML5 forms validation

In addition, there is some CSS code for drawing attractive buttons.


I've been using this palette for several weeks. What's new in this distribution is the Preferences form to adapt the palette to other environments. The various options have been tested on a clean system.

But I'm happy to promptly address any concerns you may have.

Minify (16.5 KB)

Moderator Edit: See below for an update to Ver 2:
Version 2.0a changes


Version 2.0a changes include:

  • Added a Note comment to each macro to describe what happens and collapsed all the actions.

  • Added a check for a comment delimiter to the Backup macro to question if a file without one is unminified.

  • Rewrote the Minify After Backup macro to avoid file read/writes other than the initial backup.

Minify (17.3 KB)

If you’re running this with BBEdit 12, the Unminify command will leave a copy of the minified text at the top of the file.

That’s because BBEdit has the Copy menu command enabled even without a selection (for some reason).

So the fix is to drag the Action to type Command-A out of the test for an enabled Copy menu item and disable the test action.

I’d fix that here but I have to think a future BBEdit revision will address this issue. It isn’t an issue with the latest TextWrangler.