Should not resolve CSS Custom Variables

[iahu]

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

What is the current behavior?
CSS Custom Variables be compiled as normal css property, like the split properties compile to be a shorthand property.

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

:root {
  --balloon-size-padding-top: 16px;
  --balloon-size-padding-right: 16px;
  --balloon-size-padding-bottom: 16px;
  --balloon-size-padding-left: 16px;
}

will be compiled to

:root {padding:16px}

What is the expected behavior?
expected keep the CSS Custom Variables properties

:root{--balloon-size-padding-top:16px;--balloon-size-padding-right:16px;--balloon-size-padding-bottom:16px;--balloon-size-padding-left:16px;}

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

[alexander-akait]

Test for this #709

[alexander-akait]

Main CI passed https://travis-ci.org/webpack-contrib/css-loader/builds/373920345?utm_source=github_status&utm_medium=notification. Looks like you have other plugins for postcss-loader or other loader what minimize you css or plugin for css minification and he is remove this. Not related to css-loader. Thanks!

[iahu]

Thanks you reply.
I have trace the issue some times, and find it only happens at merging longhand properties to shorthand property. maybe we should add some case like

:root {
    --box-padding-top: 10px;
    --box-padding-right: 10px;
    --box-padding-bottom: 10px;
    --box-padding-left: 10px;
}

In fact, I have made a fork repository to test this case, you can clone it to run test command.

[alexander-akait]

@iahu already fixed in cssnano. In near future will be stable release. Workaround - disable minimize in loader and use plugin for minification with latest cssnano version (i.e. rc-2)