Minimizing border styles creates incorrect output CSS

[dennis-johnson-dev]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce.

given an input CSS style such as:

.some-cool-style {
    border-width: 1px;
    border-top-width: 0;
    border-left-width: 0;
    border-style: solid;
    border-color: #000;
}

and configuring the css-loader in webpack.config.js to be:

{
  test: /\.css$/,
  use: [
     {
        loader: 'style-loader'
      },
      {
         loader: 'css-loader',
          options: {
            minimize: true
          }
       }
   ]
},

The loader outputs:

.some-cool-style {
    border-top-width: 0;
    border-left-width: 0;
    border: 1px solid #000;
}

This output does not produce the desired output as the shorthand property border: 1px solid #000 overrides the individual border-top-width, border-left-width styles and incorrectly styles the component. In this case, the component would have a 1px border around each side, which is not what the developer intended.

What is the expected behavior?

Not exactly sure of the extent to which this changes things, but in this case I think if the minifier changed the long form into:

.some-cool-style {
    border: 1px solid #000;
    border-top-width: 0;
    border-left-width: 0;
}

with the shorthand first, this will compile to correct CSS. The top and left borders have a width of 0 as expected.

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as your webpack version, Node.js version and Operating System.

css-loader: 0.28.10
Webpack: 3.11.0
Node.js: 8.9.0
Operating System: Mac OS Sierra 10.12.6

[dennis-johnson-dev]

Update:

Upon a little investigation, it appears that the bug may actually be in cssnano. I've added a failing test there - cssnano/cssnano#449.

Not sure exactly who should own the issue so I'll leave this open in case other folks hit it.

[alexander-akait]

@songawee in future version we remove minimize option. I recommending use plugin for this purpose. WE use old version cssnano and they have bugs.