postcss-url
postcss-url copied to clipboard
Support public prefix on copy
I want to use postcss-url in a Remix project. The general setup is described in their docs with a directory layout that looks like this:
styles/
app.css <-- the source file
app/
styles/
app.css <-- where postcss puts the processed file
root.tsx <-- contains import "./styles/app.css", Remix will copy it to /public/build
/public
build/
_assets/
app-${hash}.css <-- this is where Remix copies the imported file
In order to also hash the assets within the stylesheet, I'd like to place them right next to the source CSS and let postcss-url copy them to /build/assets
while the processed CSS should still go to /app/styles/app.css
so that Remix can pick it up.
Since Remix doesn't know anything about the assets and postcss does not know that Remix will finally move the processed file to /public/build/_assets/app-${hash}.css
the URLs in the generated stylesheet don't match as they would point to url("../../public/assets/...")
.
I would suggest adding an option to specify a publicPrefix
that could be set to /assets
in this case. If specified, copy.js would not use path.relative(targetDir, newAssetPath)
but normalize(path.join(publicPrefix, assetRelativePath))
instead.
Please let me know if this sounds like a good idea to you and if you'd accept a PR for this feature.
I would love something like that. Looking exactly for this at the moment.
+1. Not so hard to implement but very useful