Merge rules with vendor-specific pseudo-element selectors

## index.html
<!doctype html>
<style>
#original input[type=range] {
  -webkit-appearance: none !important;
}

#original input[type=range]::-webkit-slider-runnable-track {
  height: 2px;
  width: 100px;
  background: red;
  border: none;
}

#original input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  border: none;
  width: 10px;
  height: 10px;
  background: red;
}

#original input[type=range]::-moz-range-thumb {
  border: none;
  width: 10px;
  height: 10px;
  background: red;
}

#merged input[type=range] {
  -webkit-appearance: none!important
}

#merged input[type=range]::-webkit-slider-runnable-track {
  height: 2px;
  width: 100px;
  background: red;
  border: none
}

#merged input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none!important
}

#merged input[type=range]::-moz-range-thumb,
#merged input[type=range]::-webkit-slider-thumb {
  border: none;
  width: 10px;
  height: 10px;
  background: red
}
</style>

<p id="original">Original: <input type="range"></p>

<p id="merged">Merged: <input type="range"></p>