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

Is it normal not to be able to use absolute URLs in the styleUrls property #6905

Closed
templth opened this Issue Feb 5, 2016 · 6 comments

Comments

Projects
None yet
9 participants
@templth
Copy link
Contributor

templth commented Feb 5, 2016

Following this question on StackOverflow, it appears that it's not possible to use absolute URLs within the styleUrls property of components.

There is a check in the isStyleUrlResolvable function:

export function isStyleUrlResolvable(url: string): boolean {
  if (isBlank(url) || url.length === 0 || url[0] == '/') return false; // <-----
    var schemeMatch = RegExpWrapper.firstMatch(_urlWithSchemaRe, url);
    return isBlank(schemeMatch) || schemeMatch[1] == 'package' || schemeMatch[1] == 'asset';
}

I wonder if it's something normal?
Thanks!
Thierry

@matsko

This comment has been minimized.

Copy link
Member

matsko commented Feb 8, 2016

@tbosch any idea why this happened?

@diestrin

This comment has been minimized.

Copy link
Contributor

diestrin commented Feb 10, 2016

If I give it a relative url (to the file) it will resolve it with the browser's url. If I give it an absolute path to the file, it does not fetch the files because it's not a valid url, thanks to the isStyleUrlResolvable function. How can I make this to work?

@pxwise

This comment has been minimized.

Copy link

pxwise commented Feb 10, 2016

Would be nice to use absolute paths... currently I'm working around with:

const ORIGIN = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
const myStyleUrl = ORIGIN + '/absolute/path/to/my.css';

but we shouldn't expect window to be around for server rendering.

@diestrin

This comment has been minimized.

Copy link
Contributor

diestrin commented Feb 15, 2016

@pxwise actually, it doesn't work. This regex is preventing the load because of a protocol present in the path. :(

@tbosch tbosch removed their assignment Mar 9, 2016

@iamdavidfrancis

This comment has been minimized.

Copy link

iamdavidfrancis commented Sep 27, 2016

I was able to get it to work locally on my machine by changing the _cssImportRe to

/(?:@import\s+(?:url\()?\s*(?:(?:['"]([^'"]*))|^([^;\)\s]*))[^;]*;?)|(http(?:s)?:\/\/.+)$/g

I added another capture group that will match any string starting with http:// or https:// which allows the extractStyleUrls function to read the url.

I also changed the isStyleUrlResolvable method's return value to include http and https schemes.

I'm willing to submit a PR with my fix if it's acceptable. If not, I'll wait for a proper fix here.

@IgorMinar IgorMinar removed the P2: required label Oct 4, 2016

@vicb

This comment has been minimized.

Copy link
Contributor

vicb commented Oct 7, 2016

duplicate of #4974

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment