Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
Video: https://jam.dev/c/b80d8406-e4da-4971-8695-acc7ae88304b
I am experiencing an issue where the root selector variable in the Custom CSS tab is not being parsed/replaced with the Element ID or Class name on the frontend.
The CSS injection mechanism itself works (the code is output to the page), but the logic that swaps root for the actual selector seems broken.
My Troubleshooting (shown in video): I tested this on a clean installation with a simple container > heading structure (ID: #brxe-ehgqal).
Test 1: Using root variable: I attempted to use the standard root selector at both the ID and Class levels. Neither rendered on the frontend.
-
ID Level Code:
root { border: 10px solid red }(Result: Failed) -
Class Level Code:
root { background-color: yellow; }(Result: Failed)
Test 2: Explicit Selectors: To verify if the CSS field was working at all, I replaced root with the manual ID and Class names in the exact same fields. These rendered immediately.
-
ID Level Code:
#brxe-ehgqal { border: 10px solid red }(Result: Success) -
Class Level Code:
.debug-test { background-color: yellow }(Result: Success)
Environment details:
-
CSS Loading Method: Inline Styles
-
I have regenerated CSS files and cleared caches.
Conclusion: The builder is successfully injecting the custom CSS block, but the parser responsible for expanding the root variable is failing to execute.