`border` and `border-width` interact to produce expanded code

[epmatsw]

The snippet .foo { border: 1px solid black; border-width: 1px 1px 0 0; } gets transpiled+minified to .foo{border-top:1px solid #000;border-bottom:0 solid #000;border-left:0 solid #000;border-right:1px solid #000}.

const css = require('@parcel/css');

const a = `.foo { border: 1px solid black; border-width: 1px 1px 0 0; }`
let { code } = css.transform({
  filename: 'style.css',
  code: Buffer.from(a),
  minify: true,
  sourceMap: true,
  targets: {
    // Semver versions are represented using a single 24-bit number, with one component per byte.
    // e.g. to represent 13.2.0, the following could be used.
    safari: (13 << 16) | (2 << 8)
  }
});

console.log(`${a} transformed to ${code}`);

Outputs: .foo { border: 1px solid black; border-width: 1px 1px 0 0; } transformed to .foo{border-top:1px solid #000;border-bottom:0 solid #000;border-left:0 solid #000;border-right:1px solid #000}

[devongovett]

Good catch. Can improve the output here.