search

PostHog / posthog

🦔 PostHog provides open-source web & product analytics, session recording, feature flagging and A/B testing that you can self-host. Get started - free.
https://posthog.com
Other
21.84k stars 1.3k forks source link

Actions: HTML selector only supports alphanumeric CSS classes #15480

Open corywatilo opened 1 year ago

corywatilo commented 1 year ago

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):

image

Here's what PostHog sees:

image

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:

image

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

corywatilo commented 1 year ago

Related...

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

image

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

image
corywatilo commented 5 months ago

Two more things that can't be done today:

1. Combining classes

These work (individually):

This doesn't:

2. Cascading DOM elements

This doesn't work: