Avoid invalid CSS generation for styles using vendor pseudo-elements

chromaui · May 7, 2024 · 42556b2 · 42556b2
1 parent cab0bc6
commit 42556b2
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -4,7 +4,7 @@ export const PARAM_KEY = "pseudo"
 
 // Regex patterns for pseudo-elements which are not allowed to have classes applied on them
 // E.g. ::-webkit-scrollbar-thumb.pseudo-hover is not a valid selector
-export const EXCLUDED_PSEUDO_ELEMENT_PATTERNS = ["::-webkit-scrollbar-thumb", "::-webkit-slider-thumb", "::part\\([^)]+\\)"]
+export const EXCLUDED_PSEUDO_ELEMENT_PATTERNS = ["::-(webkit|moz|ms)-[a-z-]+", "::part\\([^)]+\\)"]
 
 // Dynamic pseudo-classes
 // @see https://www.w3.org/TR/2018/REC-selectors-3-20181106/#dynamic-pseudos

diff --git a/src/preview/rewriteStyleSheet.test.ts b/src/preview/rewriteStyleSheet.test.ts
@@ -137,27 +137,41 @@ describe("rewriteStyleSheet", () => {
     ].includes(x))).toEqual([])
   })
 
-  it("does not add .pseudo-<class> to pseudo-class/element which does not support classes", () => {
-    const sheet = new Sheet("::-webkit-scrollbar-thumb:hover { border-color: transparent; }")
+  it("does not add invalid selector where .pseudo-<class> would be appended to ::-webkit-* pseudo-element", () => {
+    const sheet = new Sheet("::-webkit-foo-bar:hover { border-color: transparent; }")
     rewriteStyleSheet(sheet as any)
-    expect(sheet.cssRules[0].getSelectors()).not.toContain("::-webkit-scrollbar-thumb.pseudo-hover")
-    expect(sheet.cssRules[0].getSelectors()).toContain(".pseudo-hover-all ::-webkit-scrollbar-thumb")
+    expect(sheet.cssRules[0].getSelectors()).not.toContain("::-webkit-foo-bar.pseudo-hover")
+    expect(sheet.cssRules[0].getSelectors()).toContain(".pseudo-hover-all ::-webkit-foo-bar")
   })
 
-  it("adds alternative selector when ::-webkit-scrollbar-thumb follows :hover", () => {
+  it("does not add invalid selector where .pseudo-<class> would be appended to ::-moz-* pseudo-element", () => {
+    const sheet = new Sheet("::-moz-foo-bar-baz:hover { border-color: transparent; }")
+    rewriteStyleSheet(sheet as any)
+    expect(sheet.cssRules[0].getSelectors()).not.toContain("::-moz-foo-bar-baz.pseudo-hover")
+    expect(sheet.cssRules[0].getSelectors()).toContain(".pseudo-hover-all ::-moz-foo-bar-baz")
+  })
+
+  it("does not add invalid selector where .pseudo-<class> would be appended to ::-ms-* pseudo-element", () => {
+    const sheet = new Sheet("::-ms-foo:hover { border-color: transparent; }")
+    rewriteStyleSheet(sheet as any)
+    expect(sheet.cssRules[0].getSelectors()).not.toContain("::-ms-foo.pseudo-hover")
+    expect(sheet.cssRules[0].getSelectors()).toContain(".pseudo-hover-all ::-ms-foo")
+  })
+
+  it("adds alternative selector when .pseudo-<class> would not be appended to pseudo-element", () => {
     const sheet = new Sheet("div:hover::-webkit-scrollbar-thumb { border-color: transparent; }")
     rewriteStyleSheet(sheet as any)
     expect(sheet.cssRules[0].getSelectors()).toContain("div.pseudo-hover::-webkit-scrollbar-thumb")
   })
 
-  it("does not add .pseudo-<class> to pseudo-class/element (with arguments) which does not support classes", () => {
+  it("does not add invalid selector where .pseudo-<class> would be appended to ::part()", () => {
     const sheet = new Sheet("::part(foo bar):hover { border-color: transparent; }")
     rewriteStyleSheet(sheet as any)
     expect(sheet.cssRules[0].getSelectors()).not.toContain("::part(foo bar).pseudo-hover")
     expect(sheet.cssRules[0].getSelectors()).toContain(".pseudo-hover-all ::part(foo bar)")
   })
 
-  it("adds alternative selector when ::part() follows :hover", () => {
+  it("adds alternative selector when .pseudo-<class> would not be appended to ::part()", () => {
     const sheet = new Sheet("custom-elt:hover::part(foo bar) { border-color: transparent; }")
     rewriteStyleSheet(sheet as any)
     expect(sheet.cssRules[0].getSelectors()).toContain("custom-elt.pseudo-hover::part(foo bar)")