Add margin and padding shortcuts

[Thomas]

The new direction on the classnames is great, but not having the px, mx, py, my... shortcuts definitely slow down the workflow.

[Vladislav Shkodin]

I think it's possible to add any shortcuts to your own config

[Christian Alfoni]

Yeah, this can be added manually, though there is an other reason we do not have these. Specificity is a really tricky thing.

// You define a button
const button = c('padding-2')

// You create an extended version of it
const wideButton = c(button, 'padding-x-2')

The problem we have here is that padding-x and padding are two different base classes, which means padding-x does not replace padding as they are different base classes. That means the css of padding-2 might override padding-x-2, depending on where it exists in the resulting stylesheet.

This is actually the case for padding and the current padding-top, padding-left etc. as well. We might actually have to get rid of padding and margin as well to have 100% predictable classname behaviour.

That said, this is something we are researching. We might need more implementation to understand that padding and padding-top are actually two different properties affecting the same result. CSS is really a mess 😂 Though no wonder, building on top of a 100% backwards compatible platform

We will have an approach for this before official release 😄

[Christian Alfoni]

Hi again!

So we found a way to handle this, the latest beta has padding-vertical and padding-horizontal and the same for margin :)