Conflict between CSS custom properties used by Yoast plugin and custom website style

[claudia-romano]

• I've read and understood the contribution guidelines.
• I've searched for any related issues and avoided creating a duplicate issue.

Please give us a description of what happened.

The plugin style uses CSS variables (e.g., --color-primary) that may conflict with the primary website style when using Gutenberg.
I understand the style of the plugin is not applied to the website but it creates issue while building the website with the Gutenberg editor.

Please describe what you expected to happen and why.

I would expect the Yoast style to use less generic CSS variable names (e.g., --yoast-color-primary) so that conflicts could be avoided.

How can we reproduce this behavior?

1. Open the Gutenberg editor and check the style applied to a generic element. You'll see the Yoast variable definition:
   https://www.dropbox.com/s/mbysdat5u5ngxv4/Screenshot%202020-06-01%2009.18.16.png?dl=0

Technical info

• If relevant, which editor is affected (or editors):

• Classic Editor
• Gutenberg
• Classic Editor plugin

• Which browser is affected (or browsers): All

Used versions

• WordPress version: 5.4.1
• Yoast SEO version: 14.2

• Tested with theme: twentytwenty

[Djennez]

@claudia-romano thanks for the report, I can see the potential issue you're describing, but can you be a bit more specific in the problems that you're personally experiencing?

[claudia-romano]

Hi @Djennez thanks for considering this.

I'm importing my custom website style (that uses css variables) in Gutenberg.
I created a new block and registered some style for this block (for example, I have background-color: var(--color-primary) ).

Now the --color-primary is defined both in my custom style and in the Yoast plugin style and they will both be applied in the Gutenberg editor creating a conflict (the Yoast color variable value can overwrite my color value). This creates issues while building the website.

That's why I was wondering if the yoast style could use a different naming convention for css custom properties (e.g., --yoast-color-primary) in order to avoid those conflicts.

Thanks.

[Djennez]

@claudia-romano thanks for the extra information! Seems like a valid issue to me, though I have not seen this issue reported before, which leaves the priority at a low level. I'll inform our product owners about this.

[IreneStr]

Fixed in #15360 and Yoast/javascript#702