twind
twind copied to clipboard
[Bug]: MutationObserver does not work in nested Twind components
Reproduction
https://github.com/uihp/mcve-twind-nested-components
Describe the bug
In the minimal repro, no CSS is generated for the nested component with the tailwind class
This can be fixed by removing the line in @twind/core/core.js
function mo(tw) {
let observer = new MutationObserver(handleMutationRecords);
return {
observe (target) {
observer.observe(target, {
attributeFilter: [
'class'
],
subtree: true,
childList: true
});
/** DELETE THESE COMMENTED CODES
* // handle class attribute on target
* handleClassAttributeChange(target);
* // handle children of target
* handleMutationRecords([
* {
* target,
* type: ''
* }
* ]);
*/
},
disconnect () {
observer.disconnect();
}
};
function handleMutationRecords(records) {
for (let { type , target } of records)if ('a' == type[0]) /* attribute */ // class attribute has been changed
handleClassAttributeChange(target);
...
I don't know what the deleted code is for. According to the @twind/with-web-components, the target should be a shadowRoot, but these two functions should perform attribute on a Element
Severity
annoyance
System Info
## Binaries:
- Node: 20.15.1 - C:\Program Files\nodejs\node.EXE
- Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
- npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
## Browsers:
- Edge: Chromium (127.0.2651.74), ChromiumDev (127.0.2610.3)
- Internet Explorer: 11.0.22621.3527
## npmPackages:
- @twind/core: ^1.1.3 => 1.1.3
- @twind/preset-autoprefix: ^1.0.7 => 1.0.7
- @twind/preset-tailwind: ^1.1.4 => 1.1.4
- @twind/with-web-components: ^1.1.3 => 1.1.3
Additional Information
No response