Builder-breaking "bug" in custom CSS editor.. thoughts?

Report Bugs
1

When I’m in the CSS editor for a certain tag or class, I was under the impression that it worked like SASS or LESS, in terms of being able to stack multiple components together for the same rules.

Example, on an element of scorecard-grid:

self {
}

 .scorecard-colgroup, div {
    display: contents!important;
    flex-direction: column;
    gap: 0;
    text-align: center;
    min-width: 0;
 }

This is how I expected it to look, with scorecard-colgroup and div being split into iterative paths under .scorecard-grid:

.scorecard-grid .scorecard-colgroup, 
.scorecard-grid div {
    display: contents!important;
    flex-direction: column;
    gap: 0;
    text-align: center;
    min-width: 0;
 }

But what ended up happening was hilarious, as it took .scorecard-colgroup, div as one full entity, which made the CSS:

.scorecard-grid .scorecard-colgroup, 
div {
    display: contents!important;
    flex-direction: column;
    gap: 0;
    text-align: center;
    min-width: 0;
 }

Meaning yes, EVERY <div> on my entire divhunt site, including the BUILDER, the toolbars, etc etc, was all rendered with display:contents!important;!!! :rofl: :rofl:

Screenshot 2023-08-23 225548
Screenshot 2023-08-23 2255483381×1913 444 KB

It was a mess!

Luckily I was savvy enough to reverse it, but man… :joy:

What do you think are options here? Perhaps full nested braces?

self {
  .scorecard-colgroup,div {
     ...
  }
}

I feel like the current “(spacebar) .classname” is kind of difficult to see at a glance, though I understand the literality of it pretty well, it might not be as obvious to some? Maybe some way to more clearly visually connect parent and child classes?

Thanks for looking!

2

Hey,

Thanks for reporting, we will try to prevent such things.

For now what you need to know you cant use advanced CSS, like SCSS or LESS, or even inline multiple elements such as .scorecard-colgroup, div {}

You should be editing element at a time. When you are editing class, you dont need to type that class in custom CSS, you can type self, and self will know that you are applying css to selected tag/class.

So if you selected a class scorecard-colgroup, and lets say you want to edit default & hover state, and all divs inside of any tag with that class.

You would be doing it like this:

self {
 // css for default state
}

self:hover {
 // css for hover state
}

self div {
 // css for all divs inside of currently selected tag/class
}

self:hover div {
 // when current tag is hovered, do something with all divs inside
}

We will write better documentation on all of this. But how you can learn what is allowed is to edit some element with couple states, and child selector, and go into custom CSS tab, and see what results you got when you were doing it with builder.

This is some example of how it looks.

image
image288×611 17.6 KB

3

Thanks @Pakic!

I ask because sometimes I want the same rules for two different things, maybe I should just use custom CSS for those cases, hm. Just thought it was worth mentioning, I never expected the builder to be affected by the “injected” CSS.

Maybe the injected CSS should be scoped to the builder frame of the layout so the rest of the page isn’t affected, should someone else run into this quirk?

Could easily see someone forgetting to put a space before div and mess up their site!