restoreOriginalDefs duplicates and reorders

[M Somerville]

If the CSS includes multiple entries for the same selector, it gets quite confused, plus any selector that phantom changes on reading (e.g. 0 to 0px) gets duplicated. If you add a test to test/unit/original_definitions_test.js, e.g. I would assume this passed (transform ignored by phantomjs as an example):

"maintains structure": function(test) {
    testDefs(test, {
        original: ".a { padding-top: 0; transform: translateY(-50%); } .b { color: yellow } .a { color: blue }",
        critical: ".a { padding-top: 0px; } .b { color: yellow } .a { color: blue }",
        expected: ".a { padding-top: 0; transform: translateY(-50%); } .b { color: yellow } .a { color: blue }"
    });
},

But what is actually produced is (spacing added for clarity):

.a {
    padding-top:0px;
    padding-top:0;
    transform:translateY(-50%);
    color:blue;
}
.b {
    color:yellow;
}
.a {
    color:blue;
    padding-top:0;
    transform:translateY(-50%);
}

All the .a styles are duplicated in both sections, which breaks the ordering, plus padding duplicated again due to 0/0px difference introduced by phantomjs. The latter duplication you can work around by using the data from getRules to construct a parsed original CSS, but I think the function needs changing to remember which instance maps to which section somehow.

[Barnaby]

I'm having issues with this too, addyosmani/critical#256

My main stylesheet, main.css includes this style near the top ( from a reset.css )
h1 { margin: 0.67em 0 }

Then this is overwritten by my styles, near the bottom of main.css
h1, h2, .h3, ul, p {
margin: 0 0 0.9em;
}

The output in criticalcss file is like this, and causes my style to get overwritten

h1 {
margin: 0.67em 0px;
margin: 0.67em 0;
}
//....
h1,h2,.h3,ul,p {
margin: 0px 0px 0.9em;
}
//...
h1 {
margin: 0.67em 0;
}