64 lines
1.9 KiB
JavaScript
64 lines
1.9 KiB
JavaScript
|
|
/**
|
|
* When source maps are enabled, `style-loader` uses a link element with a data-uri to
|
|
* embed the css on the page. This breaks all relative urls because now they are relative to a
|
|
* bundle instead of the current page.
|
|
*
|
|
* One solution is to only use full urls, but that may be impossible.
|
|
*
|
|
* Instead, this function "fixes" the relative urls to be absolute according to the current page location.
|
|
*
|
|
* A rudimentary test suite is located at `test/fixUrls.js` and can be run via the `npm test` command.
|
|
*
|
|
*/
|
|
|
|
module.exports = function (css) {
|
|
// get current location
|
|
var location = typeof window !== "undefined" && window.location;
|
|
|
|
if (!location) {
|
|
throw new Error("fixUrls requires window.location");
|
|
}
|
|
|
|
// blank or null?
|
|
if (!css || typeof css !== "string") {
|
|
return css;
|
|
}
|
|
|
|
var baseUrl = location.protocol + "//" + location.host;
|
|
var currentDir = baseUrl + location.pathname.replace(/\/[^\/]*$/, "/");
|
|
|
|
// convert each url(...)
|
|
var fixedCss = css.replace(/url *\( *(.+?) *\)/g, function(fullMatch, origUrl) {
|
|
// strip quotes (if they exist)
|
|
var unquotedOrigUrl = origUrl
|
|
.replace(/^"(.*)"$/, function(o, $1){ return $1; })
|
|
.replace(/^'(.*)'$/, function(o, $1){ return $1; });
|
|
|
|
// already a full url? no change
|
|
if (/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/)/i.test(unquotedOrigUrl)) {
|
|
return fullMatch;
|
|
}
|
|
|
|
// convert the url to a full url
|
|
var newUrl;
|
|
|
|
if (unquotedOrigUrl.indexOf("//") === 0) {
|
|
//TODO: should we add protocol?
|
|
newUrl = unquotedOrigUrl;
|
|
} else if (unquotedOrigUrl.indexOf("/") === 0) {
|
|
// path should be relative to the base url
|
|
newUrl = baseUrl + unquotedOrigUrl; // already starts with '/'
|
|
} else {
|
|
// path should be relative to current directory
|
|
newUrl = currentDir + unquotedOrigUrl.replace(/^\.\//, ""); // Strip leading './'
|
|
}
|
|
|
|
// send back the fixed url(...)
|
|
return "url(" + JSON.stringify(newUrl) + ")";
|
|
});
|
|
|
|
// send back the fixed css
|
|
return fixedCss;
|
|
};
|