Plugin duplication

[cakeinpanic]

Hello!
I've found this repo while googling something completely different.
I've got a question – there are already two plugins doing the same thing as yours:
https://github.com/devex-web-frontend/postcss-assets-rebase and
https://github.com/postcss/postcss-url
And second one does completely what you need

Why did you decide to develop your own?
I'm just interested, because i've developed postcss-assets-rebase mostly because we needed full control of our plugins

[alexmchardy]

Thanks for the question. From my comment in postcss/postcss#556:

... postcss-url doesn't copy assets into a specific base build directory. It will copy assets into a directory relative to the postcss to option (the destination of the css file). See postcss/postcss-url#34.

The idea of this plugin is to copy all assets into a base build directory while keeping the part of the asset's path that makes sense. So for url(../../images/icons/i.jpg) the file is copied to /images/icons/i.jpg. This means, when processing many css files, their referenced assets can be gathered into one base build directory instead of scattered all around.

I hadn't come across postcss-assets-rebase, but it also doesn't seem to do exactly what I wanted.

Let's say I'm concatenating several css files from different places during my build. For example, my node.js project has a main.css and I'm also including Twitter Bootstrap from ./node_modules/bootstrap/dist/css/bootstrap.css. bootstrap.css has some @font-face declarations like src: url('../fonts/glyphicons-halflings-regular.eot');, and my main.css might have url()s for images and its own fonts like url(../images/icons/cart.png) and url(../fonts/my-font.woff).

When my build runs using postcss-copy-assets, I'll end up with a single concatenated css file, and all my fonts and images organized nicely in the build directory.

Something like this:

gulp.src(['src/css/main.css', 'node_modules/bootstrap/dist/css/bootstrap.css'])
    .pipe( postcss([ postcssCopyAssets({ base: 'build' }) ], { to: 'build/css/built.css' }) )
    .pipe( concat('built.css') )
    .pipe( gulp.dest('build/css') );

...results in...

build/
├ css/
│ └ built.css
├ fonts/
│ ├ glyphicons-halflings-regular.eot
│ └ my-font-woff
└ images/icons
  └ cart.png

Further, let's say I want to build another css file separately into build/css/pages/home.css. Even though I'm building into multiple subdirectories (build/css/ and build/css/pages), postcss-copy-assets will correctly organize all the assets it finds alongside each other in build/fonts and build/images.

I tried to get postcss-url to do this how I thought it should be, but (correct me if I'm wrong) it can only organize assets relative to each built css file, which means assets can get scattered around when you're building multiple css files. And that triggered my Anal Coder Disorder.

[cakeinpanic]

I get your point and it seems that postcss-assets-rebase can be improved for about 10 lines of code and one plugin option to keep sub-directory hierarchy). Because problem of dist relative to project folder is already solved https://github.com/devex-web-frontend/postcss-assets-rebase#relative-optional

[cakeinpanic]

Ok, i've read your answer again and there is my question – do you really need to keep sub-directory hierarchy?
For example if you have
src: url('../fonts/glyphicons/glyphicons-halflings-regular.eot'); in css, you want to get this file structure?

build/
├ css/
│ └ built.css
├ fonts/
│ ├ glyphicons
│ │ └ glyphicons-halflings-regular.eot
│ └ my-font-woff
└ images/icons
  └ cart.png

Or all fonts should be in one folder?

[cakeinpanic]

Ok, anyway new version of postcss-assets-rebase is released, now with folder structure saving)
https://github.com/devex-web-frontend/postcss-assets-rebase

[alexmchardy]

@cakeinpanic to answer your previous question ... I did want to keep the sub-directory hierarchy in the built directory as much as possible. Partially to keep things nice and organized, and partially just for aesthetics.