Malformed @supports block when using combined :root, :host selectors

[WillYallop]

When transforming CSS that uses a combined :root, :host selector with modern colour formats (oklch/lab) and the targets set to anything greater that last 3 versions. The output includes a malformed and unnecessary @supports block.

Reproduction

import { transform, browserslistToTargets } from 'lightningcss';
import browserslist from "browserslist";

const code = Buffer.from(`:root, :host {
    --color-brand-background: oklch(100% 0 0);
}`);

const res = transform({
    filename: 'output.css',
    code: code,
    targets: browserslistToTargets(browserslist('last 4 versions'))
});

console.log(res.code.toString());

I've also reproduced this on the playground tool here.

Current Output

@supports (color: lab(0% 0 0)) {
   {
    --color-brand-background: lab(100% 0 0);
  }
}

:root {
  --color-brand-background: #fff;
}

@supports (color: lab(0% 0 0)) {
  :root {
    --color-brand-background: lab(100% 0 0);
  }
}

:host {
  --color-brand-background: #fff;
}

@supports (color: lab(0% 0 0)) {
  :host {
    --color-brand-background: lab(100% 0 0);
  }
}

The top @supports block is missing a selector, but also is not needed.

Expected Output

:root {
  --color-brand-background: #fff;
}

@supports (color: lab(0% 0 0)) {
  :root {
    --color-brand-background: lab(100% 0 0);
  }
}

:host {
  --color-brand-background: #fff;
}

@supports (color: lab(0% 0 0)) {
  :host {
    --color-brand-background: lab(100% 0 0);
  }
}

Additional Context

• This only occurs when targets is set to support browsers older than last 3 versions.
• This is being executed with Node v22.13.1 and using Lightning version 1.29.1.
• I ran into this by running Lightning against the TailwindV4 output which uses the:root, :host selector.

Thanks in advanced for looking into this :)