Images and other static assets?
hunterloftis opened this issue · comments
Hi! Love the project. Thanks for putting this out in the community.
Do you have any recommendations for using this with static assets like images and fonts? We've got it working great at @importing both local and remote/repo CSS files, but of course those files are missing images etc.
cheers.
I am prototyping something that handles this in the npm-assets project. Feel free to give feedback on that project! Currently I'm not entirely sure how to handle multiple versions with it, and it requires you to define the assets in the package.json file. Also it scans all installed modules in the node_modules folder. I have been using npm-assets in a project I'm working on, and so far am liking it, however YMMV.
If you have any ideas on how to improve it let me know! Or, if you have an entirely different idea for approaching this problem, I'm open to trying to use/create it!
I've been trying to brainstorm ways to handle assets - much trickier than just the css and js unfortunately. A few options:
- Compile assets in-line and deliver them with CSS (tradeoffs... could result in some absurdly huge CSS)
- Keep track of asset paths while building the CSS and then copy them all into a destination directory (tradeoffs... complexity with path resolution deep in the dependency tree)
- Host all assets on a CDN or something and use absolute paths everywhere (tradeoffs... offline work becomes annoying, absolute paths everywhere)
I like the #2 approach the best, since basically the only downside is the complexity in the tool, not in the usage. This could also be used to solve the versioning problem, since it could be another rework plugin that would copy all assets to a folder and use unique generated names for the files, while updating the CSS to use the new names (names could be generated from a hash of the content, which could result in deduplication as well). We could use the same information that is used for source maps to tell the root directory to resolve the assets from. Also, this approach would only use the files that are actually included in the CSS.
I'll try to do a little bit of work to see how hard this approach is.
We just started discussing this exact issue in atomify-css. I think the solution proposed above sounds promising.
+1 on #2 We are using rework.url() to do this in resin now.
The only problem that I see in this approach is for images and other assets that aren't part of the CSS. I'm not sure of the best solution for this but I thought about adding an array of "assets" to a module's package.json.
We could use this property alongside those found within the CSS.
@techwraith I have a solution that uses a field in the package.json file, see npm-assets. I'm currently working on making a rework plugin that automatically copies all referenced assets also.
I made a new project, rework-assets, that will copy all referenced assets to a folder, using the hash of the file contents for the name. Feedback welcomed!
Nice! I was trying to figure out a decoupled way of doing this (eg, one that wasn't hacked onto rework-npm, but would still accurately get the cwd of whatever css file it was currently parsing, even if that was @imported via npm). I'd love to understand position-tracking / source-maps for css better after reading the readme.