Expanded Editor: Quotation marks in ::after content are escaped

[Toshiwoz]

I was trying to use the following CSS markup:

#home-hero .sow-slider-base::after {
    content: "";
    width: 100%;
    height: 10px;
    background: red;
    position: relative;
    display: table;
}

If I add it into the theme CSS directly it works, and even in the editor it works, nonetheless, when I save it, the quotation marks ("), as well as apostrophes (') are escaped, making it into an invalid CSS:

#home-hero .sow-slider-base::after {
    content: \"\";
    width: 100%;
    height: 10px;
    background: red;
    position: relative;
    display: table;
}

[Misplon]

Hi, thanks for reaching out.

I've added the above rule here https://demo.siteorigin.com/corp/?ao_noptimize=1. It seems to output as expected:

[Toshiwoz]

In the editor all looks fine, that little red triangular shape at the end of the header is what I was expecting to see.

Nonetheless, when I save it the browser doesn't show it, and inspecting the CSS file I see this content: \"\"; thingie.

[Misplon]

Thanks for the screenshots. Please, try checking for a working baseline. Does the issue persist if you temporarily deactivate all plugins except for SiteOrigin CSS and then re-save the contents at Appearance > Custom CSS?

[Toshiwoz]

Edit: it was not the SVG plugin. I'll try deactivating others.

[Misplon]

Thanks. SVG Support is present on the Corp demo site. When you have a moment, please, try activating only SiteOrigin CSS and SVG Support. Does the issue persist?

[Toshiwoz]

With only the following modules installed I still get the problem, but only if I use the "expand" mode, wher you have the CSS editor on the left, and the preview to the right. If I save from the regular view (no preview), it saves it correctly.

[Misplon]

Nicely spotted. Thanks for the feedback. I'll ask Alex to attend. The issue won't be resolved in the next release as that's ready to go. I'll ask Alex to send you a beta release once this fix is complete.

[Toshiwoz]

Cool, thanks. I prefer your tool over the default one. Since I'm here, it would be cool if there was a way to add a widget with css specific to a page. If I remember correctly, google insight speed doesn't like unused CSS and I don't know of any tool that helps with that.

[Misplon]

Hi. At the moment, SiteOrigin CSS isn't able to load CSS rules on a per-page basis.

If you want to target rules for specific pages, that can be done using body classes. More on that at the below URL:

https://siteorigin.com/unique-page-styling-custom-css-body-classes/

[AlexGStapleton]

Hi,

I've come up with a fix for this issue by updating css.js (which is used for processing and parsing CSS). I've submitted it here and you've created a build for you to try. You can download it by clicking here.

Before proceeding, do a backup.

Navigate to Plugins > Installed Plugins and deactivate SiteOrigin CSS, and then delete it. Scroll to the top of the page and click Add New, Upload Plugin and upload so-css.1.4.3-beta.zip. When prompted, activate SiteOrigin CSS. Do the quotation marks still get escaped for you?

Kind regards, Alex

[Misplon]

Hi Toshio

Kindly, note that the 1.4.3 release doesn't include the above fix. Please, don't upgrade to 1.4.3 if using the above beta version. The above fix will be included in 1.4.4. or 1.5.

Thanks

Andrew

[Toshiwoz]

I removed the original plug-in and installed yours, after that I reloaded the css editor page and tried to save in both preview and non preview modes, it still works the same, with the only difference maybe that if I CTRL+F5 in the full editor I do see it escaped even in the editor:

Edit: in some cases I noticed that the escape punctuation even multiplied, becoming something like content: \\\\"\\\\".

[Misplon]

Thanks. Does the same issue occur if you remove the escaped commas and replace them with content: ""; and then save?

[Toshiwoz]

Yes, it happens even if I remove them, unless, as before, I remove them, and save it from the full editor (no preview).

[Misplon]

Thanks for testing. @AlexGStapleton will follow up when he's next working. Appreciate the help.

[AlexGStapleton]

Hi Tosh,

I've been unable to replicate this issue after making the changes in https://github.com/siteorigin/so-css/pull/157. Would it be possible for you to record a video of this issue occurring for you? I suspect I may be doing something slightly different when replicating and I've ended up fixing the method I found of causing it.

Kind regards, Alex

[Toshiwoz]

Sure, no problem. Tomorrow I'll send a quick clip of the issue.

On Tue, Nov 30, 2021 at 2:47 PM Alex S @.***> wrote:

Hi Tosh,

I've been unable to replicate this issue after making the changes in #157 https://github.com/siteorigin/so-css/pull/157. Would it be possible for you to record a video of this issue occurring for you? I suspect I may be doing something slightly different when replicating and I've ended up fixing the method I found of causing it.

Kind regards, Alex

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/siteorigin/so-css/issues/155#issuecomment-982963855, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFCPRTGSXDOPWHGYPHBU2TTUOUS63ANCNFSM5I3KBEWA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[Misplon]

Thanks!

[Toshiwoz]

https://youtu.be/aYhCogvUWmw Here we go, it is an unlisted video.

[Toshiwoz]

Hi, I don't know if it might be related, but take into account:

• I use Firefox developer, in general Firefox is a bit strict on certain things.
• I have an ad blocker, but I have created an exception for the site, should not be an issue I believe
• The website url is configured locally only, by modifying the hosts file

[Misplon]

Hi Toshio

Thanks for your detailed feedback. I can replicate the issue. Alex will attend as soon as he's able to.

Chat then.

Cheers, Andrew.

[AlexGStapleton]

Hi Toshio,

Sorry for the delay. Thanks again for your very detailed feedback! :)

I've identified the cause of the second issue and come up with a fix that's also been added to https://github.com/siteorigin/so-css/pull/157 I've prepared a new build with both changes present and you can download it by clicking here.

Before proceeding, do a backup.

Navigate to Plugins > Installed Plugins and deactivate SiteOrigin CSS, and then delete it. Scroll to the top of the page and click Add New, Upload Plugin and upload so-css.1.4.3-beta-2.zip. When prompted, activate SiteOrigin CSS. Do the quotation marks still get added after saving?

Please note that this fix isn't able to be retroactive so you'll need to re-save your custom CSS after installing the provided build.

Kind regards, Alex

[Toshiwoz]

Yes, it works! I can save from the preview editor and when refreshing from the regular page I see the changes reflected, and the content: ""; CSS doesn't escape.

[AlexGStapleton]

Hi Toshio,

Great to hear that helped! :) These changes will be included in the new SiteOrigin CSS update.

Kind regards, Alex