Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS plugin does not maintain relative URLs #308

Open
eoneill opened this issue Oct 2, 2014 · 0 comments
Open

CSS plugin does not maintain relative URLs #308

eoneill opened this issue Oct 2, 2014 · 0 comments

Comments

@eoneill
Copy link
Contributor

eoneill commented Oct 2, 2014

When using the CSS plugin, Inject should adjust non-qualified URLs to make sure they're pointing to the correct path.

e.g. if my CSS file contains a relative image page, the Injected CSS file should respect the relative path of the origin CSS file, not the page it's being injected into.

// where:
// `resolvedPath` is the path to the CSS module we XHR
//    e.g. `http://www.licdn.com/scds/concat/common/css?f=scss/some/file`
// `content` is the body of the CSS module

// matches non-qualified `url()` notations within the content
//  includes AlphaImageLoader(src="...")
//  excludes any fully qualified URLs, scheme-less URLs, or URIs with valid protocols
var rNonQualifiedUrl = /((?:url\s*\(|AlphaImageLoader\s*\(\s*src\s*=)\s*['"]?(?!\/\/|[a-z]+\:))(.)/igm;

// matches up to the pathname of the URL
var rBasePath = /(?:^(?:https?\:)?\/\/[^\/\?\#]+)/i;

// matches any extraneous query/hash info that isn't relevant to URL path resolution
var rQueryOrHash = /\/?[\?\#].*/;

// strip off any query or hash on the file path string
var basePath = resolvedPath.replace(rQueryOrHash, '');
// the fully qualified path to the host (excluding any pathname, hash, query)
var hostPath = rBasePath.exec(resolvedPath)[0];

// adjust any non-qualified URLs in the content
content.replace(rNonQualifiedUrl, function() {
  var result = arguments[1];
  if (arguments[2][0] === '/') {
    result += hostPath + arguments[2];
  }
  else {
    result += basePath + '/' + arguments[2]
  }
  return result;
});

some expectations, assuming the resolvedPath to the CSS module was: http://cdn.server.com/path/to/my.css

url(/images/some/image.png)
 -> url(http://cdn.server.com/images/some/image.png)

url("../../relative.png")
 -> url("http://cdn.server.com/path/to/my.css/../../relative.png")

url('http://www.cdn.com/image.png')
 -> url('http://www.cdn.com/image.png') // untouched

url(data:image/png;base64,abcdEFG)
 -> url(data:image/png;base64,abcdEFG) // untouched

progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/to/image.png',sizingMethod='scale')
 -> progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cdn.server.com/path/to/image.png',sizingMethod='scale')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant