Skip to content
New issue

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

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

Already on GitHub? # to your account

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

Open
uihp opened this issue Aug 21, 2024 · 0 comments
Open

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

uihp opened this issue Aug 21, 2024 · 0 comments
Labels
🐞 Bug Bug or Bug fixes

Comments

@uihp
Copy link

uihp commented Aug 21, 2024

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 uihp added the 🐞 Bug Bug or Bug fixes label Aug 21, 2024
uihp pushed a commit to uihp/twind that referenced this issue Nov 24, 2024
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
🐞 Bug Bug or Bug fixes
Projects
None yet
Development

No branches or pull requests

1 participant