Support multiple files with CLI

[benoitchantre]

Would it be possible to support multiple files as input / output using the CLI?

PostCSS and ESbuild allow to use a glob pattern for the input and have arguments to set the output directory and extension.

Examples:

• postcss src/**/*.css --base src --dir dist/css --ext .min.css
• esbuild src/**/*.js --bundle --outdir=dist/JS --out-extension:.js=.min.js

A similar solution would be very useful as many projects have more than one stylesheet.

[devongovett]

Yep, this would be a nice feature. 👍

[mrkldshv]

Hey! I'd like to take a stab at this issue. Do we want to use any crate for glob pattern?

[mryechkin]

Would love to see this!

[makkabi]

+1, I tried to replace postcss with lightningcss, but I'm missing three things: 1. Support for browserslist in package-json (use --target instead) 2. No built-in watch-mode (I use the onchange package for this) and 3. this (handle all css files in a folder), and this is what prevents me using lightningcss-cli for now, because the only workaround I see is one npm script for every css file, and that is hard du manually manage and will bloat the package.json file.

[devongovett]

In the meantime, you can use bash scripting or something like the find command to process multiple files:

 find . -name '*.css' -exec lightningcss {} -o dist/{} \;

[makkabi]

In the meantime, you can use bash scripting or something like the find command to process multiple files:

 find . -name '*.css' -exec lightningcss {} -o dist/{} \;

Thanks! If I would really need it, I would try it, but for now I just stick to PostCSS. Btw., I saw that (as of now) other developers just assume that *.css works: 11ty-Sass-Skeleton by @5t3ph
(And it does work - until you have more than one css file...)

[devongovett]

that's fine, but just wanted to point out that this is possible since your original comment implied that it was not:

this is what prevents me using lightningcss-cli for now

[LeoniePhiline]

@mrkldshv Are you still working on this?

[mrkldshv]

Nope, feel free to take it!

[LeoniePhiline]

Unfortunately I also won't manage currently to work on this. Free to take!

[benoitchantre]

In the meantime, you can use bash scripting or something like the find command to process multiple files:

 find . -name '*.css' -exec lightningcss {} -o dist/{} \;

@devongovett I did some tests without success. After having adjusted the path (before -name) to search in the source files only, the output file coming from {} need be rewritten in order to suppress the source directory. I haven’t found a solution for that.

I would love to see some move for a native support of this feature. Is it something in your roadmap?

[benoitchantre]

Here's a workaround to get the output files in the expected directories.

find assets/css/ -type d -exec bash -c 'mkdir -p dist/${0#assets/}' {} \; && find assets/css/ -type f -name '[^_]*.css' -exec bash -c 'lightningcss --minify --bundle --browserslist $0 --output-file dist/${0#assets/}' {} \;

Notes :

• The directories have to be created before to run lightningcss to prevent a No such file or directory error
• I haven't found a way to rename the file extension (ex: .css to .min.css)