Actions: HTML selector only supports alphanumeric CSS classes

[corywatilo]

Bug description

PostHog doesn't support HTML selector matches with CSS classes that contain non-alphanumeric characters. This becomes a problem for sites that use Tailwind CSS. If a customer is strictly using Tailwind, targeting HTML selectors becomes tricky.

Examples:

.rounded-sm
button[class="rounded-sm"]
.py-2.5 (notice the dot used _within_ the class)
.border-[1.5px]
.!ml-auto

Example HTML for an element like this (defined in this action):

Here's what PostHog sees:

---

It's worth noting that, while the class in the DOM shows like text-[15px], the Tailwind class it's actually referencing (as seen in the Styles tab in Inspector) escapes characters like [, ], .:

.text-\[15px\] {
    font-size: 15px;
}

I also tried creating an action that escaped the non-alphanumeric characters (like .border-\[1\.5px\]) but it returns a 500 error when trying to calculate:

Somewhat related: https://github.com/PostHog/posthog/issues/3047

[corywatilo]

Related...

When trying to define an action using the toolbar, it can correctly read the classes and loads them into the selector field...

... but trying to save an event with non-supported selectors breaks the page.

[corywatilo]

Two more things that can't be done today:

1. Combining classes

These work (individually):

• .text-sm
• .text-center

This doesn't:

• .text-sm.text-center

2. Cascading DOM elements

This doesn't work:

• .text-sm .text-center

[pauldambra]

another I spotted while looking at https://posthoghelp.zendesk.com/agent/tickets/28216

we generate valid css matching like [data-attr="session\.recording\.preview"] but the action matcher when querying events only works if you use [data-attr="session.recording.preview"]

even though as far as CSS is concerned they are equivalent

[ordehi]

Another example here, the selector was taken from the toolbar: https://posthoghelp.zendesk.com/agent/tickets/28761

.ρd__all > .ρd__all > .ρd__all .ρd__all .rounded-full