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:
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:As well as unwanted behaviour, the class mentioned above with corresponding styles:
is being rewritten incorrectly causing, conditional styles to not be applied. Here is a comparison of resulting classes before and after pull request: