Description
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