Compress all files in the directory

[pavelloz]

I have a case where i would just like to apply cleancss to every file in the directory, without name changing etc.

Ideally this would work:

cleancss path/to/css/*.min.css

I know i can dance around i with xargs and thats what I'm going to do ATM, but i suppose it can be a pretty common use case so i decided to create an issue to hear what you think about it.

Thanks for the great tool :)

[jakubpawlowicz]

Thanks @pavelloz for an idea - I think it could either work by replacing files inline or by placing optimized output in a .min file, e.g.

cleancss --in-place path/to/css/(one|two).css would create two new files: path/to/css/one.min.css and path/to/css/two.min.css. Ideally it should respect existing .min files by overwriting them.

What do you think?

[pavelloz]

Well, replacing in-place would be even better, but listing all the files in arguments is still much harder than passing * or even straight up a directory name, which could be recursively traversed and .css files selected.

Having regexp-like syntax would force me to still go around and gather all the filenames without extension and build the string to be able to match all of them, so i would end up creating my own abstraction layer anyway, with recursive ls-all.

I think the most common way of using cli tools are actually (at least for me) two cases:

1. npm scripts
2. CI scripts

I have no idea if thats true, but in you 4.1 introduced -o with merging with *.css so i guess you had similar feeling that having the benefit of pattern matching it can be a huge time saver :)

The only difference is now skipping the -o, meaning: by default, override the file it was read from. Of course this would be a breaking change, so flag (ie. --in-place) is preferred.

PS. I think auto-renaming should be an opt-in, in below example it would ruin filenames for me (some files don't have min.css in filename and they are referenced that way somewhere beyond my control, so i would need to remove the .min suffix for those files :) )

---

I'll describe exact use case to bring some context and maybe it will be easier to abstract a general feature from that.

I have a project that has assets (not mine, half of them 3rd party, half of them minified), but i will be handing it over to someone else whose skills might vary (im responsible for assets preparing from source to target format in an efficient way and hopefully fast, reliable and cross browser), so I want to use micro-tools (cli as much as possible, as little as possible node programmatically) and small configs as much as i can to ease the pain for any future maintainer.

Example assets pipeline:
file.scss: sass cli -> css cp to dist/ -> postcss (with autoprefixer etc.) -> cleancss
file.es6: babel cli -> cp to dist/ -> uglifyjs

And all that handled by couple npm scripts.

Because all files from the build process land in dist/ folder i could do uglify for dist/js, cleancss for dist/css (hopefully recursively).

Because there wont be much of a nesting in dist/css, having *.css option would be enough for me, but i can easily see huge apps having multiple directories and needing recursive option.

---

Maybe i got carried away by all the 0 config idea that webpack is now implementing as well, but i just thought it would be cool to have a command: cleancss dist/css --in-place to cleancss every .css file in dist/css and doing it recursively with -r flag. :)

[jakubpawlowicz]

Thanks for detailed comment @pavelloz - I see your point here.

First using files explicitly in my example was only to illustrate the idea - clean-css-cli supports glob matching since e877d27. This may also save us from explicit -r option as one can say clean-css --in-place dist/css/*.css vs clean-css --in-place dist/css/**/*.css for flat vs recursive way.

In general I'm all for adding this feature.

[pavelloz]

Ouh, thats great, I didn't catch the glob change before :)

I hope it isn't just my weird use case and a lot of other users will also benefit from it while composing their assets processing.

Thank you :)

[mtsknn]

I had a similar problem and found this issue, so +1 from me.

As a quick workaround I just installed foreach-cli package so I can do this:

foreach -g "./dist/css/*.css" -x "cleancss -O2 #{path} -o #{path}" --no-c

I'm on Windows so I had to use the --no-c param, otherwise I'd get an error.

[PatricNox]

Well, I get that your input can be globed.

"cleancss": "cleancss -o public/merged.css public/assets/**/styles/*.css",

The neat npm script i'd like to have is something such as:

"cleancss": "cleancss -o public/assets/**/styles/*.css public/assets/**/styles/*.css",

so every corresponding file gets minified and don't need to be merged into a combined one. I know this is doable using gulp or grunt, but it's not my goal to use these. 🤔

mtsk's solution didn't work for me.
However, one from the referenced issue above did:

"css-minify-all": "foreach -g \"css/**/*.css\" -x \"cleancss --level 1 #{path} -o #{path}\" --no-c"

[onetrev]

Just to make sure, this issue is not about compressing all the files in the directory into a single output file, but rather each .css file in a directory (or multiple directories) into their own compressed files?

I would say @pavelloz you are definitely not alone in needing this workflow. For anyone working in WordPress (lots of people) and creating their own custom blocks with ACF (maybe not as many), this is exactly what you need. Each custom block is in it's own folder under template_parts/blocks so I need each .css file generated by my .scss in each folder minified. I can do something similar with my JS with uglifyjs-folder by doing:

uglifyjs-folder template-parts/blocks --pattern '**/*.js,!**/*min.js' -e -o template-parts/blocks

It would be great if cleancss could do the same. :) But in the meantime @pavelloz I was wondering if you have a rough example of how you are accomplishing this with xargs? Thanks!

[jakubpawlowicz]

Looks like this is a requested feature, let me have a look how to do it.

clean-css will be bumped to version 5.0 next week, so maybe it's a good time to include this feature in clean-css-cli v5 release.

[jakubpawlowicz]

Since clean-css v5.0.0 is out and there's a new batch option there clean-css/clean-css@d8380fe, I'll take on this feature next week.