diff --git a/src/preview/rewriteStyleSheet.test.ts b/src/preview/rewriteStyleSheet.test.ts index 774f167..bafb6a2 100644 --- a/src/preview/rewriteStyleSheet.test.ts +++ b/src/preview/rewriteStyleSheet.test.ts @@ -247,6 +247,12 @@ describe("rewriteStyleSheet", () => { expect(sheet.cssRules[0].selectorText).toEqual(":not(:hover), :not(.pseudo-hover)") }) + it('supports ":has"', () => { + const sheet = new Sheet(":has(:hover) { color: red }") + rewriteStyleSheet(sheet as any) + expect(sheet.cssRules[0].cssText).toEqual(":has(:hover), :has(.pseudo-hover) { color: red }") + }) + it("override correct rules with media query present", () => { const sheet = new Sheet( `@media (max-width: 790px) { diff --git a/src/preview/rewriteStyleSheet.ts b/src/preview/rewriteStyleSheet.ts index ee12171..22c7fc7 100644 --- a/src/preview/rewriteStyleSheet.ts +++ b/src/preview/rewriteStyleSheet.ts @@ -62,7 +62,7 @@ const rewriteRule = ({ cssText, selectorText }: CSSStyleRule, shadowRoot?: Shado } return [selector, classSelector, ancestorSelector].filter( - (selector) => selector && !selector.includes(":not()") + (selector) => selector && !selector.includes(":not()") && !selector.includes(":has()") ) }) .join(", ")