Merge branch 'main' into next

CHANGELOG.md

@@ -1,3 +1,15 @@
+# v2.2.1 (Tue Mar 05 2024)
+
+#### 🐛 Bug Fix
+
+- Avoid generating invalid selector with `:has` [#105](https://github.com/chromaui/storybook-addon-pseudo-states/pull/105) ([@m-akinc](https://github.com/m-akinc))
+
+#### Authors: 1
+
+- [@m-akinc](https://github.com/m-akinc)
+
+---
+
 # v2.2.0 (Mon Mar 04 2024)
 
 #### 🚀 Enhancement

package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-pseudo-states",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "CSS pseudo states for Storybook",
   "keywords": [
     "storybook-addons",

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) {

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(", ")