chore: Unreleased bugs with advanced section

[kof]

Description

• Can't click a property on main in advanced
  https://github.com/user-attachments/assets/a2446685-e7dc-4c01-bf03-4ee64b8f5e16
• looks like property name validation is broken. I add "dispaaayyy" and it accepeted

Steps for reproduction

1. click button
2. expect xyz

Code Review

• hi @kof, I need you to do
  • conceptual review (architecture, feature-correctness)
  • detailed review (read every line)
  • test it on preview

Before requesting a review

• made a self-review
• added inline comments where things may be not obvious (the "why", not "what")

Before merging

• tested locally and on preview environment (preview dev login: 0000)
• updated test cases document
• added tests
• if any new env variables are added, added them to .env file

[johnsicili]

1. Paste in/type gap: 2px, see "unset" as the value.

2. Paste in/type gap: 2px, see you can only select shorthands (normally it converts to longhand)

3. It still accepts invalid names

[kof]

@johnsicili how exactly did you manage to get it to insert invalid property name?

[kof]

Paste in/type gap: 2px, see you can only select shorthands (normally it converts to longhand)

Yeah, you either select one of the shortcuts or you escape and insert what you wrote. Should I add to the dropdown additionally the same shorthand notation user has so they understand they don't have to choose the shorthand provided?

[kof]

1. Paste in/type gap: 2px, see "unset" as the value.

Can't reproduce, how did you get that? is it possible you somehow tested the wrong branch? here is what I get

[johnsicili]

how exactly did you manage to get it to insert invalid property name?

I know forsure it will add via typing/pasting full declaration displayyyyy: 2px

[johnsicili]

Should I add to the dropdown additionally the same shorthand notation user has so they understand they don't have to choose the shorthand provided?

Yes. I did not think of hitting escape but even with knowing that, it requires an unnecessary step so adding to the autocomplete is a good idea

[johnsicili]

Can't reproduce, how did you get that? is it possible you somehow tested the wrong branch? here is what I get

unset2.mp4

[kof]

fixed, when user enters a proeprty that's unknown/wrong, it will be added but the value marked as error. Simply to avoid situation where stuff I enter disappears.

displayyyyy: 2px

[kof]

On the second thought, to make it consistent with "entering proeprty without dashes and automatically turning it into a custom property" it seems better to have invalid properties automatically turned into custom properties always, instead of adding them with unset value

Now this: displayyyyy: 2px will turn into