Closed hunterloftis closed 10 years ago
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:
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.
/cc @Techwraith @kristoferjoseph
+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 @import
ed via npm). I'd love to understand position-tracking / source-maps for css better after reading the readme.
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.