Order of properties in SystemStyleObject is not preserved

[MarcusCaspeco]

Description

When migrating from V2 to V3, most of my recipes were able to stay the same without changes. But one recurring bug that keeps happening is that all my borders go black. This is because I realized that the order of defined properties is no longer preserved, so if I defined border: 1px solid and then border-color: red this would previously always render correctly in the browser. But now they can sometimes end up in the wrong order in the browser, which means that border : 1px solid will override the color to the initial value (currentColor).

This is an example of my recipe for input:

export const inputRecipe: RecipeDefinition = defineRecipe({
	className: "input",
	base: {
        ...
        border: ThemeBorderToken.XSmall, // "1px solid"
        backgroundColor: ThemeColorToken.OnSurfaceBorder // "#1514113D"
        ...
    },
    ...
});

Before, this would turn out in the browser something like like:

Which renders fine.

Now it sometimes ends up in the wrong order, which does not work since the border shorthand sets border-color to currentColor:

This seems like a bug to me, and if not, I would like to know how to work around this.

Link to Reproduction

https://stackblitz.com/edit/chakra-ui-v3-dryh9zf9?file=src%2Finput-recipe.ts

Steps to reproduce

1. Open stackblitz
2. See black border, despite this inputRecipe:

   export const inputRecipe = defineRecipe({
     base: {},
     variants: {
       variant: {
         outline: {
           border: '2px solid',
           borderColor: 'red',
         },
       },
     },
   });

Because when it hits the browser, it is rendered as borderColor first, then border.

Chakra UI Version

3.34.0

Browser

Google Chrome 145.0.7632.160

Operating System

• macOS
• Windows
• Linux

Additional Information

Thank you for your patience with me, I am going through a very big migration so I have to open things as I go :)

[segunadebayo]

We could fix this, but it might result in extra runtime work. If you're aiming for correctness, please prefer to use atomic css properties instead, e.g., borderWidth, borderColor instead of border.