Transformed media queries leave gaps between breakpoints

[chbybnwr]

Describe the issue

Take this create call:

const styles = stylex.create({
  foo: {
    gridColumn: {
      default: '1 / 2',
      '@media (width >= 48rem)': '1 / 3',
      '@media (width >= 64rem)': '1 / -1',
    },
  },
});

It is now transformed at compile time to:

const styles = stylex.create({
  foo: {
    gridColumn: {
      default: '1 / 2',
      '@media (width >= 48rem) and (width <= 63.99rem) ': '1 / 3',
      '@media (width >= 64rem)': '1 / -1',
    },
  },
});

Expected behavior

It should be transformed to:

const styles = stylex.create({
  foo: {
    gridColumn: {
      default: '1 / 2',
      '@media (width >= 48rem) and (width < 64rem) ': '1 / 3',
      '@media (width >= 64rem)': '1 / -1',
    },
  },
});

Steps to reproduce

const styles = stylex.create({
  foo: {
    gridColumn: {
      default: '1 / 2',
      '@media (width >= 48rem)': '1 / 3',
      '@media (width >= 64rem)': '1 / -1',
    },
  },
});

Test case

Input:

const styles = stylex.create({
  foo: {
    gridColumn: {
      default: '1 / 2',
      '@media (width >= 48rem)': '1 / 3',
      '@media (width >= 64rem)': '1 / -1',
    },
  },
});

Output:

const styles = stylex.create({
  foo: {
    gridColumn: {
      default: '1 / 2',
      '@media (width >= 48rem) and (width < 64rem) ': '1 / 3',
      '@media (width >= 64rem)': '1 / -1',
    },
  },
});

Additional comments

No response