soflyy/oxygen-bugs-and-features

Custom CSS in Reusable Components converts to random string characters

Opened this issue · 4 comments

aman-sharma24 commented

Describe the bug
A clear and concise description of what the bug is.
Custom CSS in Reusable Components converts to random string characters. I created a reusable component in Oxygen builder. I added custom CSS property to that component however when I added that component in another page the custom CSS of that component converted to random strings characters i.e "YmFja2dyb3VuZC1wb3NpdGlvbjogY2VudGVyOw=="

The same thing is happening with the javascript as well.

**A link to a Sandbox site where the bug has been reproduced [https://oxygenbuilder.com/try? (REQUIRED)] (https://oxygen-qt4ml3wkczqxl.oxygen-demo.qsandbox.org/)

Parent Page where I Created Reusable Component: https://oxygen-qt4ml3wkczqxl.oxygen-demo.qsandbox.org/?page_id=56&ct_builder=true&ct_inner=true

Page where I Tried using Reusable Component:https://oxygen-qt4ml3wkczqxl.oxygen-demo.qsandbox.org/?page_id=60&ct_builder=true&ct_inner=true

Steps to reproduce the behavior:

  1. Create a Reusable component with Custom CSS.
  2. Use that component in another Page in editable mode.
  3. View Custom CSS of the component on newly created Page.
  4. See error

Parent Page
Reusable Component

Kpudlo commented

Thank you for the report. Replicated and reported internally via https://github.com/soflyy/oxygen/issues/5332.

If you open the Reusable part and update the CSS to be correct, it will work correctly when adding the Reusable part to other pages/templates. This issue only seems to occur when saving an element(s) with custom CSS/JS to a Reusable part.

aman-sharma24 commented

The current issue is significantly impacting our development workflow and contributing to a growing backlog. Addressing the bug by modifying the custom CSS on all our reusable components presents a considerable challenge. Is there any other way to get around this bug without having to do all the manual work?

Kpudlo commented

Hello @aman-sharma24,

The code gets base-64 encoded. So, it should be possible to open the Reusable Part, find the encoded code, run it through a base64 decoder, and then copy it back to the Reusable Part. Unfortunately, we are not aware of a workaround or solution at this time to fix this or decrypt the code automatically.

aman-sharma24 commented

When we add custom styles using an ID selector, the CSS code gets encoded in a way that causes issues. However, this doesn't happen when we use class selectors for custom styles. As a workaround, we've been using classes for all our custom CSS for now. It would be great if you could fix this issue with ID selectors in Custom CSS.