I have a less mixin set to generate a base64 background image, like this sample output.
.test {
background-image: url("/images/ui-baseline.png");
}
.svg .test {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTAgNDAiID48cmVjdCB5PSIzOSIgZmlsbD0iI0ZGODBDQiIgd2lkdGg9IjUiIGhlaWdodD0iMSIvPjxwYXRoIGZpbGw9IiM4MERERkYiIGQ9Ik01LDM1SDB2LTFoNVYzNXogTTUsMzBIMHYtMWg1VjMweiBNNSwyNUgwdi0xaDVWMjV6IE01LDIwSDB2LTFoNVYyMHogTTUsMTVIMHYtMWg1VjE1eiBNNSwxMEgwVjloNVYxMHogTTUsNUgwVjRoNVY1eiIvPjwvc3ZnPg==);
}
It works perfectly in my windows gulp environment, but I cannot get it to work on the mac version of the same gulp environment.
Running gulp on my mac I get something like this:
.test{
background-image: url("/images/ui-baseline.png");
}
.svg .test {
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%222px%22%20height%3D%222px%22%20viewBox%3D%220%200%202%202%22%3E%3Crect%20width%3D%222%22%20height%3D%221%22%20%20fill%3D%22%23000000%22%20%2F%3E%3Crect%20y%3D%221%22%20fill%3D%22%233C3C3C%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E");
}
I used to process my less using koala, both on windows and mac, they still both work correctly. In my koala.json file, I had to set the option for no-ie-compat
I removed the gulp.js from my mac and replaced it with my windows version, I still get the same issue.
I'm completely baffled.
Any have any ideas? Thanks
