SVG urls get mangled during build

[EvHaus]

After I run my app through r.js, all SVG urls in my CSS files become mangled. ie:

.test {
   clip-path: url(#clippingmask);
}

Becomes:

.test {
    clip-path: url(../css/#clippingmask);
}

Is there some way to tell require-css to leave SVG urls alone?

[guybedford]

Are you running csso here? If so I would file a bug there - https://github.com/css/csso

[EvHaus]

As far as I know, there is no way to turn csso off.

[guybedford]

An option to disable it could be a good feature yes.

Just uninstall the module from npm for it to be disabled though otherwise.

[EvHaus]

Actually, looks like I'm not using csso afterall. I've confirmed this by stepping through the build and I see that css-builder.js never goes into the 'csso' code.

I've tracked the bug down to the "normalizeCSS" funtion in normalize.js in the require-css code. Looks like that code is scanning the css files for all "url()" values and rewrites the URLs accordingly. This is the right thing to do for regular url paths, but it should be ignored for url() which point to object ids. I think this can be fixed simply by updating the regex from:

/@import\s*("([^"]*)"|'([^']*)')|url\s*\(\s*(\s*"([^"]*)"|'([^']*)'|[^\)]*\s*)\s*\)/ig

to

/@import\s*("([^"]*)"|'([^']*)')|url\s*\((?!#)\s*(\s*"([^"]*)"|'([^']*)'|[^\)]*\s*)\s*\)/ig

I'll submit a pull request shortly.