search

GrapesJS / grapesjs

Free and Open source Web Builder Framework. Next generation tool for building templates without coding
https://grapesjs.com
BSD 3-Clause "New" or "Revised" License
22.33k stars 4.05k forks source link

BUG: Component styles such as md:flex-row(tailwind) are removed #5982

Closed ihatov08 closed 3 months ago

ihatov08 commented 3 months ago

GrapesJS version

What browser are you using?

Chrome 126.0.6478.127

Reproducible demo link

https://jsfiddle.net/6m53pwy7/4/

Describe the bug

How to reproduce the bug? I'm looking to use Tailwind with GrapesJS, but this framework uses Utility-First CSS Classes to build quick layouts. The problem is that it also uses 'special' classes to define style variants, eg: hover:bg-blue or md:w-full etc. Styles that include colons such as md:flex-row hover:bg-black in the component style will be deleted. You can check by looking at "view code"

What is the expected behavior?

domc.addType('hero-section-1', {
  model: {
    defaults: {
      attributes: { class: 'hero-section-1' },
      components: `
  <div class="md:p-18">
  </div>
      `,
      styles: `
  @media (min-width: 768px) {
    .md\:p-18 { padding: 4rem; }
  }
      `
    },
  },
})

view code 👇

<body id="icsl">
  <div class="hero-section-1">
    <div class="md:p-18">
    </div>
  </div>
</body>
  @media (min-width: 768px) {
    .md\:p-18 { padding: 4rem; }
  }

What is the current behavior?

domc.addType('hero-section-1', {
  model: {
    defaults: {
      attributes: { class: 'hero-section-1' },
      components: `
  <div class="md:p-18">
  </div>
      `,
      styles: `
  @media (min-width: 768px) {
    .md\:p-18 { padding: 4rem; }
  }
      `
    },
  },
})

image

Code of Conduct

artf commented 3 months ago

You need to escape properly the CSS

.md\\:p-18 { padding: 4rem; }