_insertCss method produces duplications

[marekszala]

Hi, I have a problem with Isomorphic-style-loader because it injects the same css module multiple times. When I call _instertCSs in the following scenario: _insertCSS([id1,style1], [id2, style2]) _insertCss([id2, style2], [id1, style1])

I would expect heaving only 2 scripts tags in HEAD section after rendering. In my situation I end up heaving 4

_insertCss method uses index of the script to construct internal id and uses it to check if the script has been already injected. in my situation inserted dictionary looks following: {
"id1-0":1, "id2-0":1, "id1-1":1, "id2-1":1 }

Should you use only moduleId as a key in the dictionary?

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/39474795-_insertcss-method-produces-duplications?utm_campaign=plugin&utm_content=tracker%2F26439769&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F26439769&utm_medium=issues&utm_source=github).

[Stanback]

I'm having this issue as well.

It was caused by this change: https://github.com/kriasoft/isomorphic-style-loader/pull/13

And looks like it's fixed with this open PR: https://github.com/kriasoft/isomorphic-style-loader/pull/40

Curious to know, under what circumstances is a module split into multiple style blocks?

[roelkok]

This issue is problematic because it can break overwrites in css. Eg.

button.css:

.button { height: 20px; background: blue; }

big-button.css:

.big-button { composes: button from 'button'; height: 30px; }

Due to this bug it's possible that button.css gets inserted, then big-button.css and then button.css again. If in javascript the bigButton style is applied, the html for the button would be

<button class="button big-button">I'm supposed to be big</button>

But this renders as a button with 20px height instead of 30px;

[aldaty]

This is a serious issue for me. Instead of getting FOUC, by using this loader I'm getting a flash of incorrectly styled content, because of the exact scenario that @roelkok mentioned. This is pretty much just as bad. It also causes the bundle size to be bigger by including the same css multiple times, although that is less of a problem than the css just not being correct server-side. I would love to see the PR that fixes this ( #40 ) merged into the repository.

[frenzzy]

Guys, can you recheck with these changes please? https://github.com/kriasoft/react-starter-kit/pull/1132