CSS: Variables not stripped from the editor, but not passed to the site.

[arinoch]

Quick summary

CSS is in limbo on sites without plugins if that CSS includes variables.

Steps to reproduce

1. Create a site on a CSS-enabled plan. Do not install plugins.
2. Declare any number of variables for use in later CSS code.
3. Use those variables in example code.

What you expected to happen

If we intend to strip variables, then they should be removed from the editor and perhaps address in a way such as suggested in #56742. IF the intention is not to strip them, we should pass them to the live site.

What actually happened

The code is in limbo. It remains in the editor, but doesn't publish to the live site.

Context

Reported in 35832748-hc, tested by me, and reproduced in p1655949377063189-slack-C03TY6J1A.

Simple, Atomic or both?

Simple

Theme-specific issue?

No response

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

There is no user impact

Workaround details

If a user is able, there may be a non-variable way to achieve the same CSS result. Variables would be more efficient, however.

[Robertght]

📌 HOUSEKEEPING

• Labels ✅
• Priority ✅
• Replicable on Core - Yes/No

📌 SCRUBBING

• Tested on P2 - no
• Tested on Simple ✅
• Tested on AT ✅
• Tested on Self-hosted - yes

📌 FINDINGS/SCREENSHOTS/VIDEO

• I can confirm the code can be added to the editor, however, I do not see the reason for using CSS code inside the editor. For now, we can recommend using CSS inside the CSS field or in a child theme if they want that to be applied on the site as well.
• I can confirm the CSS code isn't stripped on the self-hosted site either.

📌 ACTIONS

• Marked as Triaged for Quality Squad review

[Jaykame]

5426069-zen

For this one, it's a Custom CSS add-on on a simple site that does not take in calc or var (which I tested because I remember this bug report) functions. It appears that the Additional CSS/custom CSS add-on only takes in plain simple CSS syntax/elements. I adjusted the CSS from this bug report workaround and it works after: #64917

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 5426069-zen

[agrullon95]

I'm able to reproduce the issue on my simple site on the Premium plan.
CSS variables are removed on the "Customizer" page after I save and reload.

@fullofcaffeine - I stumbled upon your diff (D70703-code) related to removing CSSTidy and wanted to confirm that this would also fix CSS variable issues. Do you have an ETA for this diff? Thanks.

Following these conversations:
Internal discussion is here: p1632916575392700/1632789758.337500-slack-C03TY6J1A
#56742

This is an intended behavior for simple sites. It seems like adding a prompt to switch to Atomic (for example, users may be on a Business plan, but may have transferred to AT) or adding more visible details (Link to docs?) for simple site users without a plan that cannot access these features.