❗ Problem after the latest inline CSS update: Custom styles no longer working

After the most recent update that modified inline CSS handling, I noticed that none of my custom styles or elements are working anymore to new posts. Here’s what’s happening:

🔹 1. Custom Buttons Are Broken

Previously, I was using this simple HTML to insert a styled button in my community:

<a href="#" class="el-button fcom_primary_button">Listen to Episode Now</a>

After the update, this button no longer appears styled — it just looks like a regular link.

🔹 2. Spoiler/Reveal Text Effect Not Working

I had a working custom snippet that applied a blur effect to a text element, which would become readable when clicked. Here's the CSS and JavaScript:

CSS:

css

/* Spoiler effect: use class or data attribute */ .spoiler, [data-spoiler] { position: relative; display: inline-block; color: inherit; filter: blur(5px); cursor: pointer; user-select: none; transition: filter 0.4s ease; animation: floatSlow 15s ease-in-out infinite; } .spoiler::before, [data-spoiler]::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle 0.6px at 10% 20%, rgba(255, 255, 255, 0.4), transparent 80%), radial-gradient(circle 0.5px at 30% 50%, rgba(255, 255, 255, 0.3), transparent 80%), radial-gradient(circle 0.7px at 60% 70%, rgba(255, 255, 255, 0.5), transparent 80%), radial-gradient(circle 0.6px at 80% 40%, rgba(255, 255, 255, 0.2), transparent 80%); background-repeat: repeat; background-size: 400% 400%; animation: particleFloat 20s linear infinite; mix-blend-mode: screen; z-index: 2; } @keyframes floatSlow { 0% { filter: blur(4px); transform: translate(0, 0); } 25% { filter: blur(5px); transform: translate(2px, -2px); } 50% { filter: blur(6px); transform: translate(-2px, 2px); } 75% { filter: blur(5px); transform: translate(1px, -1px); } 100% { filter: blur(4px); transform: translate(0, 0); } } @keyframes particleFloat { 0% { background-position: 0% 0%; } 50% { background-position: 60% 60%; } 100% { background-position: 0% 0%; } } .spoiler.revealed, [data-spoiler].revealed { filter: none !important; animation: none !important; } .spoiler.revealed::before, [data-spoiler].revealed::before { background: none !important; }

JavaScript:

javascript

document.addEventListener("click", function (e) { const target = e.target.closest(".spoiler, [data-spoiler]"); if (target) { target.classList.toggle("revealed"); } });

Now, the blur effect is completely gone, and clicking doesn’t toggle anything.

🔹 3. Tables Are Also Not Rendering

Even basic HTML tables are not displaying properly anymore. They used to work fine before the update.

How can I fix this?

If anyone has experienced something similar or knows how to re-enable these types of customizations after the CSS inline changes, I would truly appreciate any help or workaround.

Thanks in advance!