andreypopp/react-stylesheet — pull request #2 by athibaud (2014-03-06 23:58:26+00:00)
Title: fix duplicate link elements in DOM

the html [spec](http://www.w3.org/TR/REC-html40/struct/links.html#adef-href) says the href *property* of a link element should always be a full link and this i how it's implemented in browsers [except IE of course...](http://stackoverflow.com/a/10280487).

so for example if you create a link element like so:
```html

```
once it's mounted in the dom, its href *property* ie HTMLLinkElement.href is set to `protocol:/host:port/styles/main.css` so say `http://localhost:3000/styles/main.css` for the above link element. whereas it's href *attribute* ie HTMLLinkElement.getAttribute('href') is set to `styles/main.css`.

in the [code](https://github.com/andreypopp/react-stylesheet/blob/659cb43172998b9f806bb5373832426abdf7bf55/lib/StylesheetImage.js#L14), during initialization, the activeImages set is filled using the href *property* of the existing link elements (so full links) but when mounting new components, the check that's done for whether to inject their stylesheets uses the values passed in the components' `stylesheets` array which can be simple paths/uris like:
```js
React.createClass({
mixins: [ReactStylesheet],
stylesheets: [ 'styles/main.css' ]
});
```
so in that case if this stylesheets' link is already in the dom when this component mounts, the check fails `'http://localhost:3000/styles/main.css' !== 'styles/main.css'` so a duplicate link element gets injected : /

this actually happens in the current [server-rendering example](https://github.com/andreypopp/react-stylesheet/tree/659cb43172998b9f806bb5373832426abdf7bf55/examples/server-rendering)

i fixed this by simply using the link hrefs *attribute* rather than its *property* for the activeImages set