Minifying CSS

It seems that yuicompressor has not been updated for many years and is probably dead. Unfortunately, it doesn't handle SVG data in CSS files very well, a prime example being the Bootstrap 4 css.

So, what else, if anything, are people using to automatically minify css in phpStorm that does work with BS4 and the like?

11 comments
Comment actions Permalink

- install CSSO (https://github.com/css/csso-cli):

npm install -g csso-cli

- in Settings | Tools | File Watchers, add a new CSSO CSS Optimizer file watcher, specify a path to CSSO executable

- enjoy :)

3
Comment actions Permalink

Thanks.

I was using an online tools for a bit, but it was a pain.

However, whilst poking around the file watcher settings just now, I noticed another template for CSSO Optimiser. So I installed that, set it up and it appears to be working :)

1
Comment actions Permalink

Thank you so much! Works perfect. :-)

1
Comment actions Permalink

@Karol Skolasiński

Not using Linux or nvm so cannot give you exact advice... but it looks like the IDE does not see the node installed by nvm (that you are using at the system level).

1. Try launching the IDE from the terminal (e.g. webstorm.sh) and not from your Start menu / App icon on a desktop or alike. Any better?

2. Check https://intellij-support.jetbrains.com/hc/en-us/community/posts/360000160444/comments/360000112470 thread (and that comment in particular).

If you check that csso file you should see that it has a shebang that points to node at that general path. And nvm has node at a different location. I guess a symlink will help here.

1
Comment actions Permalink

yuicompressoris is still the most popular CSS minifier... there are some online tools, but you are likely interested in the minifier you can include in the build process...

you can look at https://github.com/jakubpawlowicz/clean-css (also available as a Gulp task - https://www.npmjs.com/package/gulp-clean-css). Not sure if it handles SVG in a right way though

0
Comment actions Permalink

@Matt

How do I get the CSSO to work?

0
Comment actions Permalink

What should I type in "Program:" on Linux?

0
Comment actions Permalink

@Karol Skolasiński

What should I type in "Program:" on Linux?

For what tool? CSSO? Just csso should do (as long as IDE/OS can find it in your PATH; works here like that on Windows 10).

If you want a full path (which is preferred) -- try executing "where csso" (or perhaps it's "which csso") in your system terminal/console to see that.

0
Comment actions Permalink

If I put only csso (red highlighted) I get:

Failed to run File Watcher 'CSSO CSS Optimizer'. The watcher has been disabled. Error: Invalid executable

I tried execute "which csso", and it returns: 

/home/holakele/.nvm/versions/node/v16.6.1/bin/csso

Then I pasted to "Program:", but I get: 

/usr/bin/env: ‘node’: No such file or directory

0
Comment actions Permalink

Andriy Bazanov I run my IDE from the terminal and that works perfectly fine! First look for idea.sh location

sudo find / -name idea.sh
and then
bash idea.sh
Thank you.
0
Comment actions Permalink

Is there an option in csso exclude unused classes?

0

Please sign in to leave a comment.