Structure minification breaks styles

[narqo]

The following CSS file is broken with csso 2.2.x

.ng-head-toolbar {
  display: inline-block;
  display: -ms-flexbox;
  display: flex;
}
.ng-head-toolbar .ng-head-toolbar__action {
  margin-right: 20px;
}
.ng-head-toolbar__action .icon {
  width: 32px;
  height: 32px;
}
.ng-head-user {
  display: inline-block;
}

Structural minification collapses display rules of .ng-head-toolbar and .ng-head-user and turned the whole style into:

/* minified with csso 2.2.0 */
.ng-head-toolbar{display:-ms-flexbox;display:flex}
.ng-head-toolbar .ng-head-toolbar__action{margin-right:20px}
.ng-head-toolbar__action .icon{width:32px;height:32px}
.ng-head-toolbar,.ng-head-user{display:inline-block}

The same file is minified well with [email protected]:

/* minified with csso 2.1.1 */
.ng-head-toolbar{display:inline-block;display:-ms-flexbox;display:flex}
.ng-head-toolbar .ng-head-toolbar__action{margin-right:20px}
.ng-head-toolbar__action .icon{width:32px;height:32px}
.ng-head-user{display:inline-block}

The weird thing is that all csso versions collapse display of those two classes if no intermediate classes present. E.g.

.a {
  display: inline-block;
  display: flex;
}
.b {
  display: inline-block;
}

is minified to

.a{display:flex}
.a,.b{display:inline-block}

with all csso versions.

[kweij]

I think I run into the same problem with a very simple use case, also using display flex:

.element-b {
    display: none;
}
.element-c {
    display: flex;
}
.element-c {
    display: none;
}

It turned into the following CSS:

.element-b,.element-c{display:none}.element-c{display:flex}

But I expected:

.element-b,.element-c{display:none}

[lahmatiy]

@kweij Thank you for test case 👍

[adamschwartz]

Could be related:

This:

th {
  border-bottom: 1px solid;
}

th, td {
  padding: 1em;
}

th {
  padding-bottom: .5em;
}

Is minified to:

th {
    border-bottom: 1px solid;
    padding-bottom: .5em;
}

td, th {
    padding: 1em;
}

(Re-beautified for readability here.)

The th rule for padding-bottom: .5em is overridden by padding: 1em, so the styles are broken.

Interestingly, the bug doesn’t occur in the nearly identical situation where the tag names are replaced with class names, e.g.:

.foo {
  border-bottom: 1px solid;
}

.foo, .bar {
  padding: 1em;
}

.foo {
  padding-bottom: .5em;
}

CSSO properly leaves this intact.