CSS media query range syntax not downleveled

[Josh-Cena]

Playground

.container {
  width: 100%;
}

@media (width > 768px) {
  .container {
    width: 50%;
  }
}

a {
  &:hover {
    color: red;
  }
}

import * as esbuild from "esbuild";

const result = await esbuild.build({
  entryPoints: ["styles.css"],
  bundle: true,
  outdir: "dist",
  target: "chrome70",
});
console.log(result);

Compiled output:

/* styles.css */
.container {
  width: 100%;
}
@media (width > 768px) {
  .container {
    width: 50%;
  }
}
a:hover {
  color: red;
}

Note that the nesting syntax is downleveled, but not the range syntax. Range syntax is only supported from Chrome 104. It should be possible to compile it to min-width: 769px, or otherwise throw an error.