WIP: Custom pseudo selectors with data attributes are incorrectly escaped

[Borlabs-Ben]

Browser: Chrome 110
OS: macOS
URL: not public
Video: BorlabsScreenshot-2026-03-27-at-21-07-25

The video demonstrates incorrect escaping of the data selector in a custom pseudo selector.

Steps to reproduce:

1. Add a custom pseudo selector :is([data-brlbs-clicked='1'])
2. Add button padding values of 12px and 20px
3. Save and reload Bricks
4. The custom pseudo selector is stored as :is([data-brlbs-clicked=\'1\']) and the button padding is removed
5. Select the incorrectly escaped selector again and change the button padding to 123px and 123px
6. Save again

Generated CSS:

PS: Please ignore the displayed settings 3px and 4px at second 00:14

[Matej]

Hey @Borlabs-Ben

thank you for your report. The funny thing is, that I can’t replicate it. Can you replicate it every time?

This is after page refresh and it works in the backend and on the frontend (red background).

Best regards,
Matej

[Borlabs-Ben]

Hi Matej,
I’m able to reproduce the issue on two different servers, even with all plugins disabled.

[Matej]

Hi @Borlabs-Ben,

I was finally able to replicate it. If you would enter the selector directly here where it says Selector (element), then it would work. At least it works in my case.

But if you enter it as a pseudo class, so that you click that plus button, then it will not work. I’ve created a bug report because it doesn’t make sense that it works one way and not another.

Thank you so much,
Matej.

[Borlabs-Ben]

Hi @Matej,

that works, thank you very much,
Ben

[Matej]

Hi @Borlabs-Ben,

thanks for feedback. Once we fix, we will update this forum topic.

Matej