"&" selector not preserved inside @scope

[axyz]

Hi, I noticed an issue with @scope at rules.

When the & selector is used, it does not get preserved and it gets substituted with a :scope selector

can be verified here

Beside being slightly longer for the sake of minification, the selector should be preserved as it is (either & or :scope) due to the different impact on specificity.

Additionally & supports reuse in the same selector.

e.g.

@scope(.foo) {
  & &  {
    --color: yellow;
  }
}

this is valid in CSS, but using lightningcss it outputs

@scope (.foo) {
  :scope :scope {
    --color: yellow;
  }
}

that is invalid. playground here

[devongovett]

Hmm, I think this isn't really a valid configuration. You've set the target to an old version of chrome that doesn't support @scope or nesting. And since scope is only supported in browsers that also support nesting, this won't actually happen. If you raise your target to a newer version, it works correctly. See example