Add margin and padding shortcuts
th-km opened this issue · comments
The new direction on the classnames is great, but not having the px, mx, py, my... shortcuts definitely slow down the workflow.
I think it's possible to add any shortcuts to your own config
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 😄
Hi again!
So we found a way to handle this, the latest beta has padding-vertical
and padding-horizontal
and the same for margin :)