cssnano is reordering overridden properties

Question

I am using less, postcss and cssnano (version 3.7.3). In less, I am using classes which inherit from a shared base and overriding some of the properties when needed. I am finding that cssnano is reordering the inherited\overridden properties causing unexpected differences in the style.

A trimmed down example .less looks like this:

.cell-label {
    font-size: 11px;
}
.heading-label-cell {
    .cell-label;
    color: @heading-colour;
    font-size: 13px;
}
.question-label-cell {
    .cell-label;
    color: @question-colour;
}

Which is then expanded to css looking like:

.heading-label-cell {
  font-size: 11px;
  font-size: 13px;
  color:#616161;
}
.question-label-cell {
  font-size: 11px;
  color: #0073d6;
}

But cssnano then does the following which has reordered the font-size property:

.heading-label-cell {
    color:#616161;
    font-size:13px
}
.heading-label-cell,.question-label-cell {
    font-size:11px;
}
.question-label-cell {
    color:#0073d6
}

Is there a different way I am expected to do inheritance/overrides that doesn't suffer this problem or is the fault in cssnano?

Answer 1

Reordering CSS properties is not always a safe operation, but it is enabled in the default preset. If you encounter problems, with it, disable it. This optimisation is called cssDeclarationSorter.

For example, the options to call cssnano with:

{
  preset: [
    'default',
    { cssDeclarationSorter: false }
  ]
}

Or if you use cssnano as a plugin for postcss, this is postcss.config.js:

module.exports = {
  plugins: {
    cssnano: {
      preset: [
        'default',
        { cssDeclarationSorter: false }
      ]
    }
  }
}