Alias the property `background` with `bg` about xstyled

[gregberge]

Hello @remorses, I don't think having to learn a new language to use xstyled is a good thing. We add alias for margin and padding because it is very commonly used especially in grids. But background is not a common property that you use everywhere.

Also background and backgroundColor does not have the same treatment. So it could be confusing.

I think it is a bad choice from styled-system to alias it. Let's see if other users want it!

[P1X3L]

I would add bg AND bgColor to avoid any confusion.
bg would be the alias of background (and would need to be implemented as a style prop)
bgColor the alias of backgroundColor

As you said, I don't like bg being the alias of backgroundColor like styled-system does.

[seeden]

I migrated from styled-system/rebass and was surprised why my "bg" not working :) I can live without it but I like this property as well. I tried to use it in the theme

import { css } from '@xstyled/styled-components';

export default {
  colors: {
    lineBackgroudColor: 'red',
  },
  sizes: {
    lineHeight: '1px',
  },
  block: {
    line: {
      default: css`
        height: lineHeight;
        bg: lineBackgroudColor;
      `,
    },
  },
};

[gregberge]

@P1X3L @theo-mesnil, your advice on this one?

[theo-mesnil]

Hey !

Maybe is not the best choice from styled system but, if this exist on styled system, it's better to have it on xstyled :)

[gregberge]

OK, could someone make the PR to alias backgroundColor to bg?

Replace this line by an array https://github.com/smooth-code/xstyled/blob/master/packages/system/src/styles/backgrounds.js#L9 and add tests.

[gregberge]

@P1X3L @theo-mesnil we will stick to styled-system.