Support not wrapping simple modifiers with a function

[andrefgneves]

PROPOSED BEHAVIOR

Would be great if simple modifiers that do not depend on props didn't have to be defined as functions. Right now we must do:

const bgColorModifiers = {
  white: () => css`
    background: white;
  `,
  black: () => css`
    background: black;
  `,
};

But we could save another function call per modifier if we could do:

const bgColorModifiers = {
  white: css`
    background: white;
  `,
  black: css`
    background: black;
  `,
};

or even:

const bgColorModifiers = {
  white: {
    background: 'white',
  },
  black: {
    background: 'black',
  },
};

[andrewtpoe]

I'm hugely in favor of dropping the extra function call, but I think the object return pattern will actually be a step back.

Early on in this project some of the core devs from styled-components looked over the API and advised always using the css util for styles. This enables tooling (like stylelint and others) to know the CSS code is actually CSS. I think there were also concerns inside styled-components that were resolved when using css instead of a string template or other approach.