dolox / fallback

JavaScript library for dynamically loading CSS and JS files. Also provides the ability to load multiple files from a CDN with multiple fallback options and shimming!
http://fallback.io/
MIT License
310 stars 50 forks source link

CSS fallback appears to require a filename match betwee head and config #66

Open guyaparker opened 8 years ago

guyaparker commented 8 years ago

It appears to me that CSS fallback requires that the filename specified in the config exactly matches the filename loaded in the head. If it does not then both stylesheets will be loaded irrespective of a match based on the exports config.

So, this will cause a request for both bootstrap.min.css and bootstrap.css:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
...
'libs': {
  'css$bootstrap': {
    'exports': '.col-xs-12',
   'urls': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap'
  }
}

But this will only request a bootstrap.min.css once:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
...
'libs': {
  'css$bootstrap': {
    'exports': '.col-xs-12',
   'urls': '//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min'
  }
}

If that is intentional I think it would benefit form being made clear in an example

guyaparker commented 8 years ago

Figured out the issue. For the first case to work the link requires a crossorigin attribute set to "anonymous" otherwise CORS prevents access to the stylesheet for the check for exports