chromaui / storybook-addon-pseudo-states

CSS pseudo-classes for Storybook
MIT License
90 stars 30 forks source link

feat: support pseudo selectors escape #43

Open PatrykWalach opened 2 years ago

PatrykWalach commented 2 years ago

Support pseudo selectors escape

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

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