Minify CSS with PhpStorm automatically

Installation guide for PhpStorm 2019.3.1 to minify CSS files automatically after editing using the command line interface for CSSO as a file watcher. You could also use yuicompressor instead, but version 2.4.8 chokes on CSS @keyframes rules.

Install and integrate Node.js into PhpStorm

In  case you have not already done so, download and install Node.js with the package manager npm and integrate both into PhpStorm. See my post on Use JSDoc 3 and PhpStorm to generate JavaScript documentation for more detail.

Install the command line interface for CSSO

For some reason, the command line interface for CSSO is not available via PhpStorm’s npm integration. Install it via the console:

$ npm install -g csso-cli

Setup the file watcher for csso-cli

Press Ctrl + Alt + S to bring the Settings window up in PhpStorm, select File Watchers under Tools, then click the + icon and choose the CSSO CSS Optimizer template:

Screenshot of PhpStorm’s File Watchers settings

PhpStorm will prefill all the necessary information. Make sure the Program points to your installed csso-cli. In case the CSSO template was missing, just select <custom> and fill in the following information into the fields:

Screenshot of PhpStorm’s New Watcher Dialog

That’s all there is. Every time you change a CSS file now, a minified version is created automatically. If you want to force the file watcher, you can bring it up by pressing: Ctrl + Shift + A, then start typing “run file watcher”.

Leave a comment

Your email address will not be published. Required fields are marked *