NO BUG: CSS applied to Query Loops and children using 'root' either doesn't generate CSS code or doesn't generate correct reference

Bugs
1

Browser: All browsers
OS: All OSes

I’m working with a site running 1.9, and I noticed that when ‘root’ is used in the CSS panel of an object with a query, or one of it’s children, does not seem to generate that CSS, or is not generating it correctly as a class instead of an ID, making use of the ‘root’ reference in the CSS panel of queries and their children useless.

I would think it should generate the class value, as seems to implied by this prior bug (SOLVED: CSS media queries don't apply on query loops), where media queries with root were still generating ID values instead of class value?

Steps to replicate:

  1. Create a query enclosure.
  2. Add an object into that enclosure.
    2a. When generating code, the unique id of that enclosed object is applied as a class instead. ex: .brxe-ofefsl
  3. Try to address that enclosed object by using ‘root’ in the CSS panel. ex: root {border: solid 1px red;}. The change will show up correctly in the builder… but…
  4. Save the change and load the public version of the page, and the code will not be present.

I’ve checked the generated CSS for the page, and I’m not finding any instance of CSS that used ‘root’ somewhere in its reference. Either as a class or an id. CSS that is hard-coded to reference the object’s id as a class does get generated. So, root {border:etc…} does not generate code, while .brxe-ofefsl {border:etc…} does show up in the generated CSS.

2

Hi Rob,
Thanks so much for your report, and welcome to the forum!

root is a placeholder for the ID or the class that gets converted on the fly to the “correct” ID or class name (#brxe-abcde or .className). Otherwise, you could use the root keyword only once.

In the loop, IDs behave differently than usual since IDs may only occur once in the DOM. Accordingly, they are converted into classes. Accordingly, this is not a bug.

If you use multiple root keywords within your custom CSS the problem is this: WIP: Root keyword in custom CSS selector gets substituted only once

We will adjust the root keyword and fix this (and other root-related issues) in Bricks 1.9.1, which will be released soon.

Best regards,
timmse

3

Good to know about multiple uses of ‘root’, but that wasn’t the issue I was running into. The problem was that any line that included ‘root’ would apparently just get skipped over.

I assume from your message about fixing this for 1.9.1 that you were able to replicate the issue? If not, let me know and I’ll see if I can either reproduce it on an install that I can share, or try to identify if there are any other contributing factors.

4

No, I can’t reproduce the problem. The statement referred to various problems accumulated over time with root, but not your specific problem.

Can you provide me with the loop template as a json file so that I can reproduce it if necessary?

Alternatively, you can send login credentials to help@bricksbuilder.io, a link to this thread, and some information on where I can find the loop :v: