Repository: css/csso

Issue #143: Background rewrites background-position
Created: 2013-09-25T21:37:55Z
In:
.test1 {
  background: url(/1.png) no-repeat;
  background-size: 85px 85px;
}
.test2 {
  background: url(/2.png) no-repeat;
  background-size: 85px 85px;
}
Out:
.test1{background:url(/1.png)}
.test1,.test2{background-size:85px 85px}
.test2{background:url(/2.png)}
So in out third line background for .test2 rewrites background-size, which was combined for .test1 and .test2.

Duplicate issue #288: Structure optimizations breaks the order of rules
Created: 2016-03-29T06:25:07Z
Please, have a look at my example. I'm using all: initial polyfill there for html, body and div tags and apply some styles later. But csso changes the order of the selectors, so some of my styles appears before polyfill.
Input
html,
body,
div {
    animation: none 0s ease 0s 1 normal none running;
    backface-visibility: visible;
    background: transparent none repeat 0 0 / auto auto padding-box border-box scroll;
    border: medium none currentColor;
    border-collapse: separate;
    border-image: none;
    border-radius: 0;
    border-spacing: 0;
    bottom: auto;
    box-shadow: none;
    box-sizing: content-box;
    caption-side: top;
    clear: none;
    clip: auto;
    color: inherit;
    columns: auto;
    column-count: auto;
    column-fill: balance;
    column-gap: normal;
    column-rule: medium none currentColor;
    column-span: 1;
    column-width: auto;
    content: normal;
    counter-increment: none;
    counter-reset: none;
    cursor: auto;
    direction: ltr;
    display: inline;
    empty-cells: show;
    float: none;
    font-family: inherit;
    font-size: medium;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal;
    line-height: normal;
    height: auto;
    hyphens: none;
    left: auto;
    letter-spacing: normal;
    list-style: disc outside none;
    margin: 0;
    max-height: none;
    max-width: none;
    min-height: 0;
    min-width: 0;
    opacity: 1;
    orphans: 2;
    outline: medium none invert;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    padding: 0;
    page-break-after: auto;
    page-break-before: auto;
    page-break-inside: auto;
    perspective: none;
    perspective-origin: 50% 50%;
    position: static;
    right: auto;
    tab-size: 8;
    table-layout: auto;
    text-align: inherit;
    text-align-last: auto;
    text-decoration: none;
    text-indent: 0;
    text-shadow: none;
    text-transform: none;
    top: auto;
    transform: none;
    transform-origin: 50% 50% 0;
    transform-style: flat;
    transition: none 0s ease 0s;
    unicode-bidi: normal;
    vertical-align: baseline;
    visibility: visible;
    white-space: normal;
    widows: 2;
    width: auto;
    word-spacing: normal;
    z-index: auto;
    all: initial;
    display: block;
}

html {
    padding: 0;
    margin: 0;
    background: white;
}

body {
    padding: 0;
    margin: auto;
    background: white;
    max-width: 2200px;
}
Result
body,html {
    background: #fff /* ← this line will be overwritten later */
}

html {
    max-width: none;
    margin: 0
}

body,div,html {
    animation: none 0s ease 0s 1 normal none running;
    backface-visibility: visible;
    background: 0 0/auto auto padding-box border-box;
    border: medium none currentColor;
    border-collapse: separate;
    border-image: none;
    border-radius: 0;
    border-spacing: 0;
    bottom: auto;
    box-shadow: none;
    box-sizing: content-box;
    caption-side: top;
    clear: none;
    clip: auto;
    color: inherit;
    columns: auto;
    column-count: auto;
    column-fill: balance;
    column-gap: normal;
    column-rule: medium none currentColor;
    column-span: 1;
    column-width: auto;
    content: normal;
    counter-increment: none;
    counter-reset: none;
    cursor: auto;
    direction: ltr;
    empty-cells: show;
    float: none;
    font-family: inherit;
    font-size: medium;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    font-stretch: normal;
    line-height: normal;
    height: auto;
    hyphens: none;
    left: auto;
    letter-spacing: normal;
    list-style: disc outside none;
    max-height: none;
    min-height: 0;
    min-width: 0;
    opacity: 1;
    orphans: 2;
    outline: medium none invert;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    padding: 0;
    page-break-after: auto;
    page-break-before: auto;
    page-break-inside: auto;
    perspective: none;
    perspective-origin: 50% 50%;
    position: static;
    right: auto;
    tab-size: 8;
    table-layout: auto;
    text-align: inherit;
    text-align-last: auto;
    text-decoration: none;
    text-indent: 0;
    text-shadow: none;
    text-transform: none;
    top: auto;
    transform: none;
    transform-origin: 50% 50% 0;
    transform-style: flat;
    transition: none 0s ease 0s;
    unicode-bidi: normal;
    vertical-align: baseline;
    visibility: visible;
    white-space: normal;
    widows: 2;
    width: auto;
    word-spacing: normal;
    z-index: auto;
    all: initial;
    display: block
}

body {
    margin: auto;
    max-width: 2200px
}

div {
    margin: 0;
    max-width: none
}
This case can be reproduced with many other combinations of properties.
Also I faced with very strange behaviour. If you change html → .html, body → .body and div → .div, you get completely different result. Sorry. Not sure how to explait it properly. It's better to see it yourself.

Closing comment (2016-03-29T10:52:53Z): Duplicate #143