Reordering of border-radius properties in the output breaks the cascade

[afgomez]

Hi!

Latest stable (4.1.0) seems to change the order of certain properties, breaking the cascade.

Consider this CSS:

.class {
  border-radius: 10px;
  border-bottom-left-radius: 0;
}

When pasted in the playground, it minimizes as:

.class{border-bottom-left-radius:0;border-radius:10px}

The shorthand border-radius overrides the specific border-bottom-left-radius (demo).

Thanks!

[andyjansson]

@afgomez Try to disable cssDeclarationSorter and see if that makes a difference.

[lionel-bijaoui]

@andyjansson I tried in a vue-cli project and it doesn't change a thing

[andyjansson]

@lionel-bijaoui I don't know about your setup, but I tested the snippet that @afgomez posted, and disabling cssDeclarationSorter works.

[lionel-bijaoui]

@andyjansson Here is an example repo, but right now I don't know if this is related to CSSNano or Vue-cli.
Since you seem to make it work maybe it is related to Vue-cli ?
Maybe if you have time, can you take a look ?
Thank you for your time !

[ghost]

Maybe you could try vue inspect?

vue-cli 3 has this configure:

new OptimizeCssnanoPlugin(
  {
     sourceMap: false,
     cssnanoOptions: {
       safe: true,
       autoprefixer: {
         disable: true
       },
       mergeLonghand: false
     }
   }
 )

cssDeclarationSorter also breaks this:

/* Before */
div {
  background-color: #eee;
  background: #fff;
}
/* After */
div{background:#fff;background-color:#eee}

Isn't it treated as a bug?

[alexander-akait]

@titansnow can you provide cssnano version?

[ghost]

@evilebottnawi It’s 4.1.0

[alexander-akait]

@titansnow looks like a bug, we should not move shorthand property before if part of shorthand property already exists, in theory it is not difficult to fix

[andyjansson]

@evilebottnawi it's because of cssDeclarationSorter, same as the other issues we've been seeing.

[andyjansson]

@afgomez I looked into your issue. You didn't set the options to disable cssDeclarationSorter properly.

module.exports = {
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === "production", config => {
      config.plugin("optimize-css").tap(args => {
        args[0].cssnanoOptions.preset[1].cssDeclarationSorter = false;
        return args;
      });
    });
  }
};

[alexander-akait]

Duplicate. Close in favor #535

[Siilwyn]

Seems like postcss-merge-longhand should merge these properties right?

[andyjansson]

At this point of time, it does not, no. It handles border and its longhand properties, but border-radius & border-image are kind of their own thing. We might extend it to handle these in the future.