Problem with vendor images and mimosa-combine

[fjorgemota]

Hello!

I'm working on the http://github.com/matrufsc2/frontend and I found a little implementation detail with this project: When working with vendors which contain images (such as select2, for example) and using mimosa-combine, all the images are deleted, while the output CSS file that this modules creates just maintain that references...

For example, take this configuration:

"combine": {
    "folders": [{
      "folder"  : "css/",
      "output"  : "css/main.css",
      "exclude" : null,
      "order"   : null
    }],
    "removeCombined": {
      "enabled" : true,
      "exclude" : []
    }
  }

And this directory structure:

Note that in vendor/select2 directory, there are images, that are referenced directly by the file select2.css in the same directory.

After running mimosa build, which run mimosa-combine, the directory structure turns into this:

Do you noted the difference? The images are SIMPLY DELETED, and, because this, the browser reports 404 errors when the css file is loaded.

My suggestion for this case is, instead of deleting the files, just moving up the files. In this case, the images files in css/vendor/* folders can be moved to css/*, which is the folder that I informed as output to mimosa-combine, btw.

Anyway, that's it. Sorry for the loooooooooooooooooong issue report. :)

Thanks.

PS: Sorry for the bad english too.

[dbashford]

I'll take a look at this. You caught me at a good time as I was just getting started making some other modifications to this module. =)

[dbashford]

I'll be fixing this, but a quick fix is to exclude those images from combine.

So set your exclude to something like [/\.png$/, /\.gif$/] and it should stop removing them.

[fjorgemota]

Hey.

I tested this, but the problem with the exclude option is that the images are maintained in the same folder where they are according to my tests.

Because the images are maintained in the same folder (in this case, vendor/select2), and main.css is put on css/, the images break the same way, because main.css is not updated with the correct reference for these images.

Thanks, btw, for the work in fix this. =)

[dbashford]

Yep, and that's something else I'm working on. =)

Binary files are ignored. But the issue now is while they are ignored they are still cleaned up. So excluding them lets the module know YOU are ignoring them so they are not cleaned up.

Getting the paths adjusted as part of the combine is something I am going to be working on.

I'll also be working on base64 encoding and inlining images too.

[dbashford]

Going to be resolving this shortly. You'll still have the path problems, but you won't have missing images. Dealing with path problems with other issues in the issue list.

Going to pass on simply copying in any other assets, I think that might be out of the realm of responsibility of this module. I want this module to be about combining files and, as the next few improvements will contain, making any modifications to the combined files that are needed.

I could see a "mimosa-relocate" or something like that being pointed at a folder, much like the mimosa-combine folder, and being told to move all files like /this/ to some other location.

But like mentioned above, will be working to re-route paths and embed base64 inline.

[dbashford]

I've now added, with 2.1.0, transform functions. I'll be putting some already made transform functions into NPM to be installed separately to handle some of the conversions that need to take place.

[fjorgemota]

Thanks @dbashford , i'm awaiting the transform functions in npm be published to use it here.

Any updates on this? :)

[dbashford]

I may have misworded the previous statement. They be ready-made, you will just be able to plug them in, but they aren't made yet. Each should not take long. Hopefully tomorrow for the first.

[dbashford]

https://github.com/gtb104/mct-rewrite-css-url-paths

I will submit a PR to that eventually to beef up the docs, but npm install that into your app and add it as a transform. It worked on our app, let me (or @gtb104) know if you have any trouble.

[fjorgemota]

Hey @dbashford and @gtb104.

I found a bug in that project that causes references such as background: url(select2.png); to not be rewrited. [these types of URLs is which select2 uses]

Because this, I tried to create a transformation on my own to solve that problem, using a recent project that I liked, called "cssurl" (see in https://github.com/nzakas/cssurl).

This is the transformation created:

function(inputText,inputName,outputName) {
  "use strict";
  var rewriter = new cssurl.URLRewriter(function(url) {
    return translator.translate(url, inputName, outputName);
  });
  return rewriter.rewrite(inputText);
}

To make that work, its need to add this in the top of the mimosa-config.js file:

var cssurl = require("cssurl");
var translator = new cssurl.URLTranslator();

And, obviously, its need to install cssurl using npm install cssurl.

In my case that work, but you are free to think in some another solution. =)

Thanks, anyway. =)

PS: Nope, i'm not trolling, i'm just relating a bug that I found in that library and a "solution" with a custom transform that I created.

PS 2: Nope, I do not think to create a project as that. Too much work to do that something like simples as that. :P

[gtb104]

The transform plugin was just updated. I trimmed out some unnecessary regex business that was preventing it from handling minified code. It should also run a little bit faster now. Run npm update mct-rewrite-css-url-paths to grab the latest version (v0.0.2).