Custom spacing not working in Stack gap prop

[npearson72]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.12.1

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

All

Describe the bug

When adding a custom spacing value (ex: 2xl) in the theme, and then using it as a value in the gap prop of the Stack component, it does not work.

See: https://codesandbox.io/p/sandbox/6h3gvl

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/sandbox/6h3gvl

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[Kenzo-Wada]

Currently, the specification does not allow custom properties to specify strings that begin with a number.” xxl” and so on, it works fine, so can we ask you to use something like that for now?

P.S. I'll work on fix later, stay tuned:)

[npearson72]

Currently, the specification does not allow custom properties to specify strings that begin with a number.” xxl” and so on, it works fine, so can we ask you to use something like that for now?

P.S. I'll work on fix later, stay tuned:)

I didn't realize this. It worked in v6, is there a reason for this change. I have some pacing that go up to 5xl, which would make it rather awkward to use xxxxxl.

[Kenzo-Wada]

There are major differences in the architecture to begin with, such as the dependence on emotion in v6 but the use of css modules instead of emotion in v7.

I understand your opinion and I have just created a PR! Can you please support the above until the modified version is released?

[npearson72]

@Kenzo-Wada yes, absolutely. Thank you for doing that.