Does not apply styles from tailwind-like classes like md:flex

[petejodo]

Describe the bug
happy-dom is not applying the styles of classes defined in a tailwind-like way These are classes that
have colon (:) separators like md:flex. I suspect the fundamental issue has to do with escaping because
the CSS for these classes look like:

.md\:flex {
  display: flex;
}

I created a repro repo here.
The test looks like:

import { render, screen } from "@testing-library/react";
import { Example } from "./example";

const css = `
.hidden { display: none; }
@media (min-width: 768px) {
    .md-flex {
        display: flex;
    }
    .md\:flex {
        display: flex;
    }
}
`;

test("should be visible", () => {
    const style = document.createElement("style");
    style.innerHTML = css;
    document.head.appendChild(style);

    // @ts-ignore
    window.happyDOM.setInnerWidth(768);

    render(<Example />)
    expect(screen.getByText("example with dash")).toBeVisible()
    expect(screen.getByText("example with tailwind-like class")).toBeVisible()
});

The Example component looks like:

export function Example() {
    return (
        <div>
            <div className="hidden md-flex">example with dash</div>
            <div className="hidden md:flex">example with tailwind-like class</div>
        </div>
    );
}

I expect the test to pass but it isn't and is failing on this line:

expect(screen.getByText("example with tailwind-like class")).toBeVisible()

To Reproduce
Steps to reproduce the behavior:

1. Clone repro repo here
2. Run npm test
3. See test fail

Expected behavior
The test should pass with the element in question on the failed line should be visible.

Device:

• OS: MacOS Monterey
• Browser: N/A, ran in terminal

[petejodo]

Found at least one part of the bug. This line in SelectorItem is altering the selector from .md\\:flex (the double \ is the string form and escaping the \) to .md\\. This means that PSUEDO_REGEXP is not quite correct

[petejodo]

Also in matchesClass, it does const classSelector = selector.split(':')[0]; causing the classSelector to be .md\\ instead of .md\\flex

[petejodo]

CLASS_REGEXP likely needs to be updated to include an escaped :. I fixed PSUEDO_REGEXP haphazardly by changing it

• from: /:([a-zA-Z-]+)\(([0-9n+-]+|odd|even)\)|:not\(([^)]+)\)|:([a-zA-Z-]+)/g
• to: /(?<!\\):([a-zA-Z-]+)\(([0-9n+-]+|odd|even)\)|(?<!\\):not\(([^)]+)\)|(?<!\\):([a-zA-Z-]+)/g

basically all I did was add (?<!\\) in front of each match group. I'm not exactly a regex pro so that's why I say "haphazardly" 😅

[capricorn86]

Thanks again for your contribution @petejodo! 🙂

The fix has been released.

You can read more about the release here:
https://github.com/capricorn86/happy-dom/releases/tag/v7.7.1