twind icon indicating copy to clipboard operation
twind copied to clipboard

[Bug]: MutationObserver does not work in nested Twind components

Open uihp opened this issue 1 year ago • 0 comments

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

image

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);
...

image

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

uihp avatar Aug 21 '24 15:08 uihp