WIP: CSS Sync Automatically Injects Invalid border-width Declaration when Switching Between Elements

Bugs
1

Hi Bricks Team,

I encountered an issue with the CSS Sync feature. When using custom CSS that includes the border shorthand with CSS variables alongside specific border properties, switching away to another element and then returning to the original element causes CSS Sync to automatically inject a malformed border-width property at the bottom of the %root% block.

Steps to Reproduce:

  1. Add any element (e.g., a Div or Block) and enable CSS Sync (or use a synced workflow between UI controls and Custom CSS).

  2. In the element’s Style > CSS > Custom CSS, paste the following code:

    
%root% {
display: inline-flex;
width: fit-content;
gap: var(--gap-md);
padding: var(--space-md);
border: var(--border-1) solid var(--border);
border-radius: var(--radius-md);
background-color: var(--surface-alt);
align-items: flex-start;
border-right-width: solid;
border-left-width: solid;
transition: box-shadow var(--duration) var(--ease),
background-color var(--duration) var(--ease);
&:hover {
box-shadow: var(--shadow-section);
background-color: color-mix(in srgb, var(--primary-lighter) 10%, transparent);}
}

  3. Select any other element on the canvas/structure panel.

  4. Select the original element again and check the Custom CSS box.

Expected Behavior: The Custom CSS code should remain exactly as written without unexpected modifications.

Actual Behavior: CSS Sync automatically appends an invalid border-width declaration at the end of the %root% rule:

%root% {
  display: inline-flex;
  width: fit-content;
  gap: var(--gap-md);
  padding: var(--space-md);
  border: var(--border-1) solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface-alt);
  align-items: flex-start;
  border-right-width: solid;
  border-left-width: solid;
  transition: box-shadow var(--duration) var(--ease),
    background-color var(--duration) var(--ease);
  &:hover {
    box-shadow: var(--shadow-section);
    background-color: color-mix(in srgb, var(--primary-lighter) 10%, transparent);
  }
  border-width: var(--border-1) var(--border-1) solid var(--border) var(--border);
}

Here is the short-video: Berrycast - Best video screen recorder for Windows and Mac

Environment Info:

  • Bricks Version: [2.4.3]

  • Browser: [Chrome 155]

  • OS: [Windows 11]

3

Hi Rio,
Thanks for the report. We were able to reproduce the issue and will update this thread once it’s fixed.