codesnippetspro/code-snippets

CSS Snippet for Custom Properties Fails

Opened this issue · 4 comments

Mij-Strebor commented

Prerequisites

  • I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
  • The issue still exists against the latest stable version of Code Snippets.

Type of Bug

Snippet type CSS

Description

I tried to submit this problem at the end of May. I don't see it anywhere, so I'm resubmitting it. If it is a duplicate, I apologize.

Creating a custom property (CSS variable) fails to load and work properly. Using Elementor's new value edit capability (pencil instead of px on value properties) an entry of var(--x) does not work.

The attached images show the snippet, the Elementor code; the preview of the test page using CS and Ele; and a DevTools view. Note the styles display shows the "var(--test);" is grayed out. It would be blue indicating a link to the CSS file if active. That's how it shows when I run the Elementor test.

Thanks for your attention!

Steps to reproduce

  1. Create a Code Snippet for CSS containing :root{--test: 50px;} and publish and activate.
  2. In WordPress 6.2.2, and the Elementor Hello theme, create a page, Test, and edit with Elementor 3.13.4.
  3. Drop a container on the page.
  4. In the container's Style section set a border type of Solid with Width set to var(--test) on all sides.
  5. Publish and Preview Changes The border is NOT 50px wide.
  6. Deactivate the CS snippet for the test and create an Elementor Custom Code <script>:root{--test: 50px;};</script>
  7. Refresh the page called Test and Preview Changes The border IS 50px wide.

Screenshot 2023-05-30 204302
Screenshot 2023-05-30 204507
Screenshot 2023-05-30 204832
Screenshot 2023-05-31 052710
Screenshot 2023-05-31 052812

Isolating the problem

  • This bug happens with only the Code Snippets plugin active (Free or Pro).
  • This bug happens with a Blank WordPress theme active. For example: (Hello theme).
  • I can reproduce this bug consistently following the steps above.

Comment

Note you cannot have the Code Snippet and Elementor custom code both active at the same time. Deactivate CS snippet for Ele run and trash Ele custom code to activate and test CS.
imantsk commented

Hi there @Mij-Strebor 👋
Thank you for reporting your issue!

This issue should be resolved with the latest PRO version 3.4.2.2

milliephanillie commented

This issue is not still happening for me, after upgrading. Are we supposed to be able to use CSS variables?.

sheabunge commented

@milliephanillie This is an issue to do with the version of CodeMirror that WordPress uses – it's not something we can fix ourselves unless we switch to loading our own version of the editor.

milliephanillie commented

@sheabunge thanks for the reply and info. I am curious if you maybe could help me find a ticket on WordPress core that addresses this?