Shorthand for border properties

[klshriharsha]

I use this shorthand for border in CSS a lot.

border: 1px solid #000;

It would be really convenient to have a function like this.

...border('1px', 'solid', '#000')

That outputs something like this.

'borderWidth': '1px';
'borderStyle': 'solid';
'borderColor': '#000';

And/Or functions for each of the four directions like this.

...borderTop('1px', 'solid', '#000')
...borderRight('1px', 'solid', '#000')
...borderBottom('1px', 'solid', '#000')
...borderLeft('1px', 'solid', '#000')

[bhough]

Per @klshriharsha in #265

I use a small tool called Fela (https://github.com/rofrischmann/fela) to write styles. It's configured to extract all the CSS in JS and create a CSS file. It does this by taking sets of common styles across the app and creating a CSS class for each set of common styles. But it doesn't try to do this with shorthand properties in CSS like border: 1px solid #000. So instead, if I use borderStyle, borderWidth and borderColor separately, it allows the tool to check if the same are used in other places as well and if so, create a class for it.

[aga5tya]

@bhough This looks like a valid use case, I too use border shorthand at various places and this helps with tools like fela and styletron to yield proper atomic class names. Would love to hear if others have an alternative way of handling this use case, esp with object style libs?

[bhough]

Addressed in 2.0: https://github.com/styled-components/polished/milestone/1