Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support pseudo selectors escape #43

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

PatrykWalach
Copy link

Support pseudo selectors escape

This pull request adds support for escaping pseudo selectors, for example:

  • .btn\:hover is a a class with no psuedo selector applied <div class="btn:hover">
  • .btn\\:hover is a class with a psuedo selector applied <div class="btn\">

Motivation:

In tailwindcss it's common to use classes containing : such as: <div class="group-hover:peer-checked:hover:opacity-100">.
At the moment these escaped classes lead to errors such as:

DOMException: Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '.peer:placeholder-shown:focus ~ .peer-placeholder-shown\:peer-focus\:left-3, .peer:placeholder-shown.pseudo-focus ~ .peer-placeholder-shown\:peer-focus\:left-3, .pseudo-focus .peer:placeholder-show ~ .peer-placeholder-shown\:peer-focus\:left-3 { left: 0.75rem; }'.
    at rewriteStyleSheet (http://localhost:6006/node_modules/.vite-storybook/deps/storybook-addon-pseudo-states_dist_esm_preset_preview__js.js?v=fd8fff85:127:15)
    at http://localhost:6006/node_modules/.vite-storybook/deps/storybook-addon-pseudo-states_dist_esm_preset_preview__js.js?v=fd8fff85:217:46
    at Array.forEach (<anonymous>)
    at rewriteStyleSheets (http://localhost:6006/node_modules/.vite-storybook/deps/storybook-addon-pseudo-states_dist_esm_preset_preview__js.js?v=fd8fff85:217:27)
    at Object.<anonymous> (http://localhost:6006/node_modules/.vite-storybook/deps/storybook-addon-pseudo-states_dist_esm_preset_preview__js.js?v=fd8fff85:220:34)
    at http://localhost:6006/node_modules/.vite-storybook/deps/chunk-2XEYCXA4.js?v=fd8fff85:233:18
    at Array.forEach (<anonymous>)
    at Channel2.handleEvent (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-2XEYCXA4.js?v=fd8fff85:232:23)
    at handler2 (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-2XEYCXA4.js?v=fd8fff85:162:20)
    at Channel2.emit (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-2XEYCXA4.js?v=fd8fff85:167:13) null

As well as unwanted behaviour, the class mentioned above with corresponding styles:

.group:hover .peer:checked ~ .group-hover\:peer-checked\:hover\:opacity-100:hover {
  opacity: 1;
}

is being rewritten incorrectly causing, conditional styles to not be applied.
Here is a comparison of resulting classes before and after pull request:

- .group.pseudo-hover .peer:checked ~ .group-hover\:peer-checked\.pseudo-hover\:opacity-100.pseudo-hover
+ .group.pseudo-hover .peer:checked ~ .group-hover\:peer-checked\:hover\:opacity-100.pseudo-hover

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant