Newlines in inline svg base64 not escaped when imported

[henrahmagix]

Example repo: henrahmagix/sass-loader-newline-bug-example

I had installed Mavo via npm and was importing its styles and having webpack compile it all into my app. I found in certain situations the stylesheet wouldn't apply to the page, so I tried to track down the problem and found that newlines in an inline svg base64 string were not being escaped correctly, resulting in a broken stylesheet.

In trying to track down the core problem, I made an example repo, and have found that it's not an issue with node-sass directly (as far as I can tell): please see dist/app.css.

I'm not entirely sure why importing from the node_modules directory – via sass-loader's ~ import resolver or from a relative path – is causing this issue. However, compiling Mavo's styles myself with node-sass results in no newlines at all, which means the stylesheet applies (see mavo-direct.css and mavo-imported.css) and it's not a core issue with node-sass.

Practically speaking though, my problem has been solved by a newer release of Mavo (see mavoweb/mavo#243 and 44592ba), but I thought it best to report this odd issue here as it may affect others.

Thanks for the great plugin!

Cheers,
Henry

EDIT: added extra node-sass direct compilations to example repo, updated links here

[alexander-akait]

@henrahmagix tomorrow i investigate this. Thanks for issue!

[henrahmagix]

Thanks @evilebottnawi! I've just updated the example repo with some extra node-sass compilations to compare against, and edited my comment to link to those files now.

Cheers!

[alexander-akait]

@henrahmagix thanks for issue, seems problem not in sass-loader, because using require('fs').writeFileSync('test.css', result.css.toString()) before https://github.com/webpack-contrib/sass-loader/blob/master/lib/loader.js#L79 , output:

/* --- Copied from Mavo _defs.scss --- */
/* Without inline-svg function */
.rubbish-bin-copied-without-inline-svg-function::before, .rubbish-bin-copied-with-copied-inline-svg-function::before {
  content: inline-svg('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 125" fill="rgb(200,0,0)">\a             <path d="M65,15.437V8c0-3.86-3.141-7-7-7H42c-3.86,0-7,3.14-7,7v7.437C14.017,16.816,14,21,14,21v10h72V21 C86,21,85.982,16.816,65,15.437z M43,9h14v6.086C54.828,15.032,52.51,15,50,15c-2.51,0-4.828,0.032-7,0.086V9z"/>\a             <path d="M19,37l6,62h50l6-62H19z M35.167,88.995C35.11,88.998,35.053,89,34.998,89c-1.581,0-2.904-1.236-2.993-2.834l-2-36  c-0.092-1.654,1.175-3.07,2.829-3.162c1.663-0.089,3.07,1.175,3.162,2.829l2,36C38.087,87.488,36.821,88.903,35.167,88.995z M53,86\a                      c0,1.657-1.343,3-3,3c-1.657,0-3-1.343-3-3V50c0-1.657,1.343-3,3-3c1.657,0,3,1.343,3,3V86z M67.995,86.166  C67.906,87.764,66.583,89,65.003,89c-0.057,0-0.112-0.002-0.169-0.005c-1.654-0.092-2.921-1.507-2.829-3.161l2-36\a                      c0.093-1.655,1.533-2.906,3.161-2.829c1.654,0.092,2.921,1.508,2.829,3.162L67.995,86.166z"/>\a         </svg>');
  width: 1em;
  height: 1em; }

/* With inline-svg function */
.rubbish-bin-copied-without-inline-svg-function::before, .rubbish-bin-copied-with-copied-inline-svg-function::before {
  content: url("data:image/svg+xml,url-encode('<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"0 0 100 125\" fill=\"rgb(200,0,0)\">\\a             <path d=\"M65,15.437V8c0-3.86-3.141-7-7-7H42c-3.86,0-7,3.14-7,7v7.437C14.017,16.816,14,21,14,21v10h72V21 C86,21,85.982,16.816,65,15.437z M43,9h14v6.086C54.828,15.032,52.51,15,50,15c-2.51,0-4.828,0.032-7,0.086V9z\"/>\\a             <path d=\"M19,37l6,62h50l6-62H19z M35.167,88.995C35.11,88.998,35.053,89,34.998,89c-1.581,0-2.904-1.236-2.993-2.834l-2-36  c-0.092-1.654,1.175-3.07,2.829-3.162c1.663-0.089,3.07,1.175,3.162,2.829l2,36C38.087,87.488,36.821,88.903,35.167,88.995z M53,86\\a                      c0,1.657-1.343,3-3,3c-1.657,0-3-1.343-3-3V50c0-1.657,1.343-3,3-3c1.657,0,3,1.343,3,3V86z M67.995,86.166  C67.906,87.764,66.583,89,65.003,89c-0.057,0-0.112-0.002-0.169-0.005c-1.654-0.092-2.921-1.507-2.829-3.161l2-36\\a                      c0.093-1.655,1.533-2.906,3.161-2.829c1.654,0.092,2.921,1.508,2.829,3.162L67.995,86.166z\"/>\\a         </svg>')");
  width: 1em;
  height: 1em; }

/* --- Direct from Mavo --- */
/* Imported via sass-loader `~` import resolver */
.via-import-resolver::before, .via-node-modules-path::before {
  content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w33.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20100%20125%22%20fill%3D%22rgb%28200%2C0%2C0%29%22%3E\a 			%3Cpath%20d%3D%22M65%2C15.437V8c0-3.86-3.141-7-7-7H42c-3.86%2C0-7%2C3.14-7%2C7v7.437C14.017%2C16.816%2C14%2C21%2C14%2C21v10h72V21%20C86%2C21%2C85.982%2C16.816%2C65%2C15.437z%20M43%2C9h14v6.086C54.828%2C15.032%2C52.51%2C15%2C50%2C15c-2.51%2C0-4.828%2C0.032-7%2C0.086V9z%22%2F%3E\a 			%3Cpath%20d%3D%22M19%2C37l6%2C62h50l6-62H19z%20M35.167%2C88.995C35.11%2C88.998%2C35.053%2C89%2C34.998%2C89c-1.581%2C0-2.904-1.236-2.993-2.834l-2-36%20%20c-0.092-1.654%2C1.175-3.07%2C2.829-3.162c1.663-0.089%2C3.07%2C1.175%2C3.162%2C2.829l2%2C36C38.087%2C87.488%2C36.821%2C88.903%2C35.167%2C88.995z%20M53%2C86\a 					%20c0%2C1.657-1.343%2C3-3%2C3c-1.657%2C0-3-1.343-3-3V50c0-1.657%2C1.343-3%2C3-3c1.657%2C0%2C3%2C1.343%2C3%2C3V86z%20M67.995%2C86.166%20%20C67.906%2C87.764%2C66.583%2C89%2C65.003%2C89c-0.057%2C0-0.112-0.002-0.169-0.005c-1.654-0.092-2.921-1.507-2.829-3.161l2-36\a 					%20c0.093-1.655%2C1.533-2.906%2C3.161-2.829c1.654%2C0.092%2C2.921%2C1.508%2C2.829%2C3.162L67.995%2C86.166z%22%2F%3E\a 		%3C%2Fsvg%3E");
  width: 1em;
  height: 1em; }

/* Imported directly via full node_modules path */
.via-import-resolver::before, .via-node-modules-path::before {
  content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w33.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%20100%20125%22%20fill%3D%22rgb%28200%2C0%2C0%29%22%3E\a 			%3Cpath%20d%3D%22M65%2C15.437V8c0-3.86-3.141-7-7-7H42c-3.86%2C0-7%2C3.14-7%2C7v7.437C14.017%2C16.816%2C14%2C21%2C14%2C21v10h72V21%20C86%2C21%2C85.982%2C16.816%2C65%2C15.437z%20M43%2C9h14v6.086C54.828%2C15.032%2C52.51%2C15%2C50%2C15c-2.51%2C0-4.828%2C0.032-7%2C0.086V9z%22%2F%3E\a 			%3Cpath%20d%3D%22M19%2C37l6%2C62h50l6-62H19z%20M35.167%2C88.995C35.11%2C88.998%2C35.053%2C89%2C34.998%2C89c-1.581%2C0-2.904-1.236-2.993-2.834l-2-36%20%20c-0.092-1.654%2C1.175-3.07%2C2.829-3.162c1.663-0.089%2C3.07%2C1.175%2C3.162%2C2.829l2%2C36C38.087%2C87.488%2C36.821%2C88.903%2C35.167%2C88.995z%20M53%2C86\a 					%20c0%2C1.657-1.343%2C3-3%2C3c-1.657%2C0-3-1.343-3-3V50c0-1.657%2C1.343-3%2C3-3c1.657%2C0%2C3%2C1.343%2C3%2C3V86z%20M67.995%2C86.166%20%20C67.906%2C87.764%2C66.583%2C89%2C65.003%2C89c-0.057%2C0-0.112-0.002-0.169-0.005c-1.654-0.092-2.921-1.507-2.829-3.161l2-36\a 					%20c0.093-1.655%2C1.533-2.906%2C3.161-2.829c1.654%2C0.092%2C2.921%2C1.508%2C2.829%2C3.162L67.995%2C86.166z%22%2F%3E\a 		%3C%2Fsvg%3E");
  width: 1em;
  height: 1em; }

It is valid css and all work fine. Problem located in css-loader, i can try to found problem and fix her in css-loader.

[alexander-akait]

@henrahmagix should be fixed in css-loader, feel free to reopen if problem still exist. Thanks for issue!