Big CSS causes styling issues when elements combined together

[nazar-pc]

As usual, I've spent many long hours in debugger, but yet don't know why it happens.
Where are 2 cases:

• few elements imported from separate files, styling works properly
• put everything in the same order into one file - styling becomes partially broken

It was not possible to put into jsfiddle/jsbin, so I've reduced my real case and put it into repository so that you can play with it: https://github.com/nazar-pc/Polymer-style-bug

Live demo:

• https://nazar-pc.github.io/Polymer-style-bug/good.html - separate files, input styled properly
• https://nazar-pc.github.io/Polymer-style-bug/bad.html - single import, input styled incorrectly

The problem disappears when you remove big chunk of CSS that comes from Font Awesome, it seems to cause an issue.

Problem appears in Firefox (stable & nightly) and doesn't in Chromium 44.

Please, find time to investigate this.

[nazar-pc]

Reduced example radically.
Also got problem reproduced with 2 very similar concatenated HTML files, where one is working and another is not.
Still didn't figure out how to fix

[nazar-pc]

Second trial failed also.
Test case boils down to including single file.
File with such contents works properly:

<script>
    Polymer({
        'is'      : 'cs-input-text',
        'extends' : 'input'
    });
</script>
<style is="custom-style">
    html /deep/ input[is=cs-input-text] {
        border : 4px solid red;
        @apply (--cs-blue);
    }
</style>
<style is="custom-style">
    :root {
        --cs-blue: {
            border : 4px solid blue;
        };
    }
</style>

And with such doesn't:

<style is="custom-style">
    html /deep/ input[is=cs-input-text] {
        border : 4px solid red;
        @apply (--cs-blue);
    }
</style>
<script>
    Polymer({
        'is'      : 'cs-input-text',
        'extends' : 'input'
    });
</script>
<style is="custom-style">
    :root {
        --cs-blue: {
            border : 4px solid blue;
        };
    }
</style>

Usage:

<input type="text" is="cs-input-text">
<script src="webcomponents.min.js"></script>
<script>Polymer = {dom:'shadow'};</script>
<script>
    addEventListener('WebComponentsReady', function  () {
        Polymer.updateStyles();
    });
</script>
<script src="polymer.js"></script>
<link href="concatenated.html" rel="import">

I have feeling that problem is with WebComponents.js (happens both with Shadow DOM polyfill and Shady DOM, while works fine with native Shadow DOM).

[nazar-pc]

This one was really difficult. Only third trial succeed and took around 25 hours of step-by-step debugging in total, but finally it works: #2692
Review it, please.

[nazar-pc]

Just updated PR, now it handles few big imports flawlessly, resolves this issue completely.

[sorvell]

@nazar-pc Would you mind verifying if this branch fixes the issue? https://github.com/Polymer/polymer/tree/fix-2692.

Your PR was extremely helpful, and the timing here is very tricky. I think the branch above is hopefully what we need. Thanks for your help.

[nazar-pc]

Yes, checked with my full-scale examples - everything works as expected.

The only concern about your fix is that it is quite invasive, while basically solves problems of HTML Imports implementation. Which means that it would be difficult to remove once all browsers will have proper HTML Imports implementation. In my it is hacked in single place and hence much easier to drop afterwards.
Otherwise looks good.

[nazar-pc]

Fixed by #2737