Skip to content

Commit

Permalink
Avoid invalid CSS generation for styles using vendor pseudo-elements
Browse files Browse the repository at this point in the history
  • Loading branch information
m-akinc committed May 7, 2024
1 parent cab0bc6 commit 42556b2
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 8 deletions.
2 changes: 1 addition & 1 deletion src/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
28 changes: 21 additions & 7 deletions src/preview/rewriteStyleSheet.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)")
Expand Down

0 comments on commit 42556b2

Please sign in to comment.