Issue #2624Opened March 5, 2020by kierenayima1 reactions

[BUG] Generated styles do not escape colons in classnames

Question

Currently using GrapeJS for a project that I am working on locally and integrated it with some tailwind UI components.

It mostly works great, but I have noticed that making changes on some elements does not work (for example, changing text color or formatting).

Looking at it further I can see that this is because the generated styles do not escape colons from the classes grapesJs uses to make the CSS selector.

For example, this is a selector grapeJs outputs:

.text-3xl.leading-9.font-extrabold.text-gray-900.sm:text-4xl.sm:leading-10.lg:text-5xl.lg:leading-none{
  color:#3866c2;
}

The selector should actually be something like this:

.text-3xl.leading-9.font-extrabold.text-gray-900.sm\:text-4xl.sm\:leading-10.lg\:text-5xl.lg\:leading-none{
  color:#3866c2;
}

Answers (1)

artfMarch 10, 20201 reactions

Thanks for the report @kierenayima Selectors will be escaped in the CSS in the next release

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.