bug: Invalid @supports syntax in icon.css breaks under strict CSS parsers (e.g. Lightning CSS)

[johnjenkins]

Current Behavior

icon.css has:

@supports not selector(:dir(rtl)) and selector(:host-context([dir='rtl'])) {
  :host(.icon-rtl) .icon-inner {
    transform: scaleX(-1);
  }
}

Per the CSS Conditional Rules spec, not and and can't be mixed in a <supports-condition> without explicit parens grouping each operand.

Whilst PostCSS allowed this formatting, Lightning CSS (used in the upcoming stencil v5 release) fails with: Unexpected token Ident("and")

Expected Behavior

@supports (not selector(:dir(rtl))) and (selector(:host-context([dir='rtl']))) {

Steps to Reproduce

const { transform } = require('lightningcss');
transform({
  filename: 'icon.css',
  code: Buffer.from(`
    @supports not selector(:dir(rtl)) and selector(:host-context([dir='rtl'])) {
      a { color: red; }
    }
  `),
});
// throws: Unexpected token Ident("and")

Alternatively, swap in stencil/core 5.0.0-alpha.35 in the main ionic repo and run npm run build

Code Reproduction URL

No response

Additional Information

No response