Preact 10.5.x Breaks Material-UI Components (visually)

I’m not sure if this is related to issue #2772 and pull request #2774 or not, but upgrading from preact 10.4.8 to 10.5.x breaks material-ui.

The screenshots and snippets below use the same @material-ui/core version (latest: 4.11.0) - all other packages are the same as well - only difference is the preact version. Swapped back and forth multiple times to confirm. It breaks essentially all material-ui components, I have included TextField and Button below as examples of the way they are impacted. Some things like Dialog and Select are drastically broken [visually] (even the background-color is missing).

This is happening in multiple projects.

sample code to be compiled:

<fieldset>
                                        <TextField
                                            id="username"
                                            name="username"
                                            label="Username"
                                            fullWidth
                                            onChange={this.handleChange.bind(this)}
                                            defaultValue={state.username}
                                            margin="normal"
                                            className="mt-1"
                                            error={state.usernameError ? true : false}
                                            helperText={state.usernameError}
                                            autoFocus
                                        />

                                        <TextField
                                            type="password"
                                            id="password"
                                            name="password"
                                            label="Password"
                                            fullWidth
                                            onChange={this.handleChange.bind(this)}
                                            defaultValue={state.password}
                                            margin="normal"
                                            className="mt-1"
                                            error={state.passwordError ? true : false}
                                            helperText={state.passwordError}
                                        />

                                        <div>
                                            <Button
                                                fullWidth
                                                type="submit"
                                                color="primary"
                                                variant="contained"
                                                className="text-white"
                                                disabled={userStore.login.match({
                                                    pending: () => true, rejected: () => false, resolved: () => false
                                                })}
                                            >
                                                Sign In
                                            </Button>

                                            {userStore.login.match({
                                                pending: () => <CircularProgress size={24} className="loading-button-spinner" />,
                                            })}
                                        </div>
                                    </fieldset>

preact <= 10.4.8 Generated HTML:

<fieldset>
    <div class="MuiFormControl-root MuiTextField-root mt-1 MuiFormControl-marginNormal MuiFormControl-fullWidth">
        <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated" for="username" id="username-label">Username</label>
        <div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"><input aria-invalid="false" autofocus="true" value="" id="username" name="username" type="text" class="MuiInputBase-input MuiInput-input" autocomplete="off" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAkCAYAAADo6zjiAAAAAXNSR0IArs4c6QAAAbNJREFUWAntV8FqwkAQnaymUkpChB7tKSfxWCie/Yb+gbdeCqGf0YsQ+hU95QNyDoWCF/HkqdeiIaEUqyZ1ArvodrOHxanQOiCzO28y781skKwFW3scPV1/febP69XqarNeNTB2KGs07U3Ttt/Ozp3bh/u7V7muheQf6ftLUWyYDB5yz1ijuPAub2QRDDunJsdGkAO55KYYjl0OUu1VXOzQZ64Tr+IiPXedGI79bQHdbheCIAD0dUY6gV6vB67rAvo6IxVgWVbFy71KBKkAFaEc2xPQarXA931ot9tyHphiPwpJgSbfe54Hw+EQHMfZ/msVEEURjMfjCjbFeG2dFxPo9/sVOSYzxmAwGIjnTDFRQLMQAjQ5pJAQkCQJ5HlekeERxHEsiE0xUUCzEO9AmqYQhiF0Oh2Yz+ewWCzEY6aYKKBZCAGYs1wuYTabKdNNMWWxnaA4gp3Yry5JBZRlWTXDvaozUgGTyQSyLAP0dbb3DtQlmcan0yngT2ekE9ARc+z4AvC7nauh9iouhpcGamJeX8XF8MaClwaeROWRA7nk+tUnyzGvZrKg0/40gdME/t8EvgG0/NOS6v9NHQAAAABJRU5ErkJggg==&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;"></div>
    </div>
    <div class="MuiFormControl-root MuiTextField-root mt-1 MuiFormControl-marginNormal MuiFormControl-fullWidth">
        <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated" for="password" id="password-label">Password</label>
        <div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"><input aria-invalid="false" value="" id="password" name="password" type="password" class="MuiInputBase-input MuiInput-input" autocomplete="off" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAkCAYAAADo6zjiAAAAAXNSR0IArs4c6QAAAbNJREFUWAntV8FqwkAQnaymUkpChB7tKSfxWCie/Yb+gbdeCqGf0YsQ+hU95QNyDoWCF/HkqdeiIaEUqyZ1ArvodrOHxanQOiCzO28y781skKwFW3scPV1/febP69XqarNeNTB2KGs07U3Ttt/Ozp3bh/u7V7muheQf6ftLUWyYDB5yz1ijuPAub2QRDDunJsdGkAO55KYYjl0OUu1VXOzQZ64Tr+IiPXedGI79bQHdbheCIAD0dUY6gV6vB67rAvo6IxVgWVbFy71KBKkAFaEc2xPQarXA931ot9tyHphiPwpJgSbfe54Hw+EQHMfZ/msVEEURjMfjCjbFeG2dFxPo9/sVOSYzxmAwGIjnTDFRQLMQAjQ5pJAQkCQJ5HlekeERxHEsiE0xUUCzEO9AmqYQhiF0Oh2Yz+ewWCzEY6aYKKBZCAGYs1wuYTabKdNNMWWxnaA4gp3Yry5JBZRlWTXDvaozUgGTyQSyLAP0dbb3DtQlmcan0yngT2ekE9ARc+z4AvC7nauh9iouhpcGamJeX8XF8MaClwaeROWRA7nk+tUnyzGvZrKg0/40gdME/t8EvgG0/NOS6v9NHQAAAABJRU5ErkJggg==&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;"></div>
    </div>
    <div><button class="MuiButtonBase-root MuiButton-root MuiButton-contained text-white MuiButton-containedPrimary MuiButton-fullWidth" tabindex="0" type="submit"><span class="MuiButton-label">Sign In</span><span class="MuiTouchRipple-root"></span></button></div>
</fieldset>

Image Preview:

preact >= 10.5.0 Generated HTML:

<fieldset>
    <div class="MuiTextField-root mt-1">
        <label class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated" for="username" id="username-label">Username</label>
        <div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"><input aria-invalid="false" autofocus="true" id="username" name="username" type="text" class="MuiInputBase-input MuiInput-input" autocomplete="off" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAkCAYAAADo6zjiAAAAAXNSR0IArs4c6QAAAbNJREFUWAntV8FqwkAQnaymUkpChB7tKSfxWCie/Yb+gbdeCqGf0YsQ+hU95QNyDoWCF/HkqdeiIaEUqyZ1ArvodrOHxanQOiCzO28y781skKwFW3scPV1/febP69XqarNeNTB2KGs07U3Ttt/Ozp3bh/u7V7muheQf6ftLUWyYDB5yz1ijuPAub2QRDDunJsdGkAO55KYYjl0OUu1VXOzQZ64Tr+IiPXedGI79bQHdbheCIAD0dUY6gV6vB67rAvo6IxVgWVbFy71KBKkAFaEc2xPQarXA931ot9tyHphiPwpJgSbfe54Hw+EQHMfZ/msVEEURjMfjCjbFeG2dFxPo9/sVOSYzxmAwGIjnTDFRQLMQAjQ5pJAQkCQJ5HlekeERxHEsiE0xUUCzEO9AmqYQhiF0Oh2Yz+ewWCzEY6aYKKBZCAGYs1wuYTabKdNNMWWxnaA4gp3Yry5JBZRlWTXDvaozUgGTyQSyLAP0dbb3DtQlmcan0yngT2ekE9ARc+z4AvC7nauh9iouhpcGamJeX8XF8MaClwaeROWRA7nk+tUnyzGvZrKg0/40gdME/t8EvgG0/NOS6v9NHQAAAABJRU5ErkJggg==&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;"></div>
    </div>
    <div class="MuiTextField-root mt-1">
        <label class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated" for="password" id="password-label">Password</label>
        <div class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"><input aria-invalid="false" id="password" name="password" type="password" class="MuiInputBase-input MuiInput-input" autocomplete="off" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAkCAYAAADo6zjiAAAAAXNSR0IArs4c6QAAAbNJREFUWAntV8FqwkAQnaymUkpChB7tKSfxWCie/Yb+gbdeCqGf0YsQ+hU95QNyDoWCF/HkqdeiIaEUqyZ1ArvodrOHxanQOiCzO28y781skKwFW3scPV1/febP69XqarNeNTB2KGs07U3Ttt/Ozp3bh/u7V7muheQf6ftLUWyYDB5yz1ijuPAub2QRDDunJsdGkAO55KYYjl0OUu1VXOzQZ64Tr+IiPXedGI79bQHdbheCIAD0dUY6gV6vB67rAvo6IxVgWVbFy71KBKkAFaEc2xPQarXA931ot9tyHphiPwpJgSbfe54Hw+EQHMfZ/msVEEURjMfjCjbFeG2dFxPo9/sVOSYzxmAwGIjnTDFRQLMQAjQ5pJAQkCQJ5HlekeERxHEsiE0xUUCzEO9AmqYQhiF0Oh2Yz+ewWCzEY6aYKKBZCAGYs1wuYTabKdNNMWWxnaA4gp3Yry5JBZRlWTXDvaozUgGTyQSyLAP0dbb3DtQlmcan0yngT2ekE9ARc+z4AvC7nauh9iouhpcGamJeX8XF8MaClwaeROWRA7nk+tUnyzGvZrKg0/40gdME/t8EvgG0/NOS6v9NHQAAAABJRU5ErkJggg==&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;"></div>
    </div>
    <div><button class="MuiButton-root MuiButton-contained text-white MuiButton-containedPrimary MuiButton-fullWidth" tabindex="0" type="submit"><span class="MuiButton-label">Sign In</span><span class="MuiTouchRipple-root"></span></button></div>
</fieldset>

Image Preview:

Preact related package versions:

├── preact@10.5.2
├── preact-cli@3.0.0-rc.9
├── preact-cli-plugin-env-vars@1.2.1
├── preact-cli-plugin-fast-async@1.0.1
├── preact-material-components@1.6.1
├── preact-render-to-string@5.1.10
├── preact-router@3.2.1

[marvinhagemeister]

Just published 10.5.3 which includes the fix for this issue 🎉

[cyclops26]

Confirmed working/resolved in 10.5.3. Thanks @marvinhagemeister