webpack css-loader background-image error loading

I'm working on an Angular2+ES2015+Babel+Webpack project and I bumped into this problem when including images on CSS files and using css-loader, it's already been hours hunting the problem but no luck so far:

ERROR in ./src/app/home/home.component.css Module build failed: SyntaxError: /path/to/project/src/app/home/images/penguin.png: Unexpected character '�' (1:0) > 1 | �PNG | ^ 2 | 3 | 4 | IHDR��>a�gAMA��7��!�IDATx��]xTEמ�B�"�)"��� ��T?@?�iRiD�tPA��)"���$��K���K���wτ���f��M6a���OHؽ3s�3gΜ93#���>���x��}����>���x�Ƅ&���f&�o> ��ɉI�O����#S�a-a �9�8!�W1<�)O�G�j��B� at Parser.pp.raise (/path/to/project/node_modules/babylon/lib/parser/location.js:22:13) at Parser.getTokenFromCode (/path/to/project/node_modules/babylon/lib/tokenizer/index.js:561:12) at Parser.readToken (/path/to/project/node_modules/babylon/lib/tokenizer/index.js:180:21) at Parser.readToken (/path/to/project/node_modules/babylon/lib/plugins/flow.js:164:22) at Parser.nextToken (/path/to/project/node_modules/babylon/lib/tokenizer/index.js:169:21) at Parser.parse (/path/to/project/node_modules/babylon/lib/parser/index.js:128:12) at parse (/path/to/project/node_modules/babylon/lib/index.js:47:47) at File.parse (/path/to/project/node_modules/babel-core/lib/transformation/file/index.js:517:34) at File.parseCode (/path/to/project/node_modules/babel-core/lib/transformation/file/index.js:603:20) at /path/to/project/node_modules/babel-core/lib/transformation/pipeline.js:49:12 at File.wrap (/path/to/project/node_modules/babel-core/lib/transformation/file/index.js:563:16) at Pipeline.transform (/path/to/project/node_modules/babel-core/lib/transformation/pipeline.js:47:17) at Object.transformFileSync (/path/to/project/node_modules/babel-core/lib/api/node.js:144:10) at compile (/path/to/project/node_modules/babel-register/lib/node.js:129:20) at loader (/path/to/project/node_modules/babel-register/lib/node.js:158:14) at Object.require.extensions.(anonymous function) [as .js] (/path/to/project/node_modules/babel-register/lib/node.js:168:7) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at Object.<anonymous> (/path/to/project/src/app/home/home.component.css:6:2430) at Module._compile (module.js:409:26) at Object.loaderContext.exec (/path/to/project/node_modules/webpack-core/lib/NormalModuleMixin.js:88:7) at Object.module.exports (/path/to/project/node_modules/to-string-loader/src/to-string.js:6:54) 

If you have a search for the error you'l find similar situations on github issues and stackoverflow, but not quite the same. In all of them the lack of an image loader is pointed out (png file here) but in my case I have one working perfectly. If require('../image/penguin.png') directly on a JS file it just gets loaded and exported to output path!

My process and Webpack configuration is quite complex, large and split into different files but here is the interesting part

import config from './config'; { [...] module: { preLoaders: [ { test: /\.js$/, exclude: [/node_modules/], loader: 'eslint' }, { test: /\.css$/, exclude: [/node_modules/], loader: 'postcss?pack=lint' } ], loaders: [ { test: /\.js$/, exclude: [/node_modules/, /\.(spec|e2e)\.js$/], loaders: [ 'babel', 'angular2-template' ] }, { test: /\.css$/, exclude: [/node_modules/], loaders: [ 'to-string', 'css?-import', 'postcss?pack=process' ] }, { test: /\.(png|jpe?g|gif)$/, loaders: [ 'url?limit=10000&name=assets/images/[name].[ext]?[hash:20]', 'image-webpack?bypassOnDebug&optimizationLevel=6' ] }, [...] ] }, output: { path: resolve(config.paths.dist), publicPath: `http://${config.dev.host}:${config.dev.port}/`, filename: '[name].js', sourceMapFilename: '[name].map', chunkFilename: '[id].chunk.js' }, [...] } 

And here the piece of css that triggers the error

[...] .post-image { height: 150px; background-image: url(./images/penguin.png); background-position: center center; background-repeat: no-repeat; } 

If it looks strange to use to-string-loader for css it is because angular2-template-loader allows to inline CSS directly into Angular2 Componet's stylesUrl

Because of the error stack it seems like once css-loader has done the job the png file is not being loaded with the defined loader (url!image-webpack) but it is loaded with babel-register? So I console.log the result from css-loader, and there is the expected image require:

[...] exports.push([module.id, ".post-image{height:150px;background-image:url(" + require("./images/penguin.png") + ");background-position:50%;background-repeat:no-repeat}", ""]); 

So I made babel ignore png files

{ "presets": [ "es2015", "angular2", "stage-3" ], "ignore": ["*.png"] } 

And this throws a slightly different error because babel is ignoring images, but in the end seems to be the same:

ERROR in ./src/app/home/home.component.css Module build failed: SyntaxError: Unexpected token ILLEGAL at exports.runInThisContext (vm.js:53:16) at Module._compile (module.js:373:25) at loader (/path/to/project/node_modules/babel-register/lib/node.js:158:5) at Object.require.extensions.(anonymous function) [as .js] (/path/to/project/node_modules/babel-register/lib/node.js:168:7) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at Object.<anonymous> (/path/to/project/src/app/home/home.component.css:6:2430) at Module._compile (module.js:409:26) at Object.loaderContext.exec (/path/to/project/node_modules/webpack-core/lib/NormalModuleMixin.js:88:7) at Object.module.exports (/path/to/project/node_modules/to-string-loader/src/to-string.js:6:54) 

I'm stuck with no a clue, I'm going WTF just setting an image background on a CSS file should be easy as pie

Any thoughts??