svelte-json-view icon indicating copy to clipboard operation
svelte-json-view copied to clipboard

remove `:where` for Svelte 5 compatibility

Open zeroberry opened this issue 9 months ago • 0 comments

In Svelte 5, the CSS scoping strategy has changed. Previously, scoped styles were compiled as .xyz123:where(.class), but now they're compiled as :where(.class.xyz123). This change affects selector specificity:

  • Before: .s-_ijnsPqesdMQ:where(._jsonList) = specificity (0,0,1,0)
  • Svelte 5: :where(._jsonList.s-_ijnsPqesdMQ) = specificity (0,0,0,0)

Now the component styles can be too easily overridden by any other CSS rules, including common CSS reset utilities like

ul {
  padding: 0;
  border: 0;
}

zeroberry avatar Feb 19 '25 11:02 zeroberry