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-cliSetup 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:
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:
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”.