search

postcss / postcss-url

PostCSS plugin to rebase url(), inline or copy asset.
MIT License
377 stars 60 forks source link

Support public prefix on copy #173

Open fgnass opened 2 years ago

fgnass commented 2 years ago

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.

fkrauthan commented 2 years ago

I would love something like that. Looking exactly for this at the moment.

MrFox131 commented 9 months ago

+1. Not so hard to implement but very useful