Compile files to the same directory

[KennethHoff]

Hey, I've been trying to set up PostCSS for use with Blazor, and in order to use scoped styling it's required for the CSS file to be in the same directory with the same name as the component itself.

Components/MyButton.razor
Components/MyButton.razor.css

I want to use PostCSS instead, and I want to use the same structure:

Components/MyButton.razor
Components/MyButton.razor.pcss

There are ways of doing it on a file-by-file basis (postcss -i Components/MyButton.razor.pcss -o Components/MyButton.razor.css), but for very obvious reasons this is not ideal. Additionally, I want this to be runnable as a watcher

There are some unofficial ways of doing it directly inside the build-system of the .Net Runtime (which would be preferred), but those substantially affect the build times (Even with literally 2 .pcss files it probably made the build take like 2-3 times longer for some reason).

Edit: Looking into it some more, it looks like this unofficial way is running postcss -i x.pcss -o x.css on each file in the codebase individually in order to circumvent this problem - which is probably why it's taking so long

[RyanZim]

You should be able to do this with something like this:

postcss Components/*.razor.pcss --base Components --ext css --dir Components

Haven't tested that, may need a bit of tweaking, but something like that should do the trick.

[KennethHoff]

postcss ./**/*.pcss --base . --ext css --dir ./ --watch ended up solving it. Thanks!

That is a very complicated syntax, but it works.

[RyanZim]

If --base is ., the option can be omitted. For best cross-platform compatibility, I'd recommend quoting your input glob, since it contains **.

Yeah, it's complicated, but it's a fairly flexible system that allows you to do most of the things you want.