cssnano 正在重新排序被覆盖的属性

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 }
      ]
    }
  }
}