Styles that need shorthands are not being errored when they are inside of selectors

[khmakoto]

Styles like padding and margin which need the use of a shorthand to be expanded into their left, right, top, bottom equivalents error when you try to use them in a makeStyles call. However, if they are used inside of a selector that's not part of CSS.Pseudos then they do not error out and the styles are ultimately ignored.

We should fix the types so that these styles always error out to indicate the user that they need to change them to shorthands.

Example:

const useStyles = makeStyles({
  base: {
    ':hover': {
      // will error out
      padding: "1px"
    },

    [`& .${testClassName}`]': {
      // will not error out
      padding: "1px"
    }
  }
});

[miroslavstastny]

Unfortunately we have not found a way how to avoid this in Typescript.
Currently Griffel already warns on the padding in development mode and never adds it to DOM (see #47).
We plan to add Lint rules to improve the build time check in #76.

[layershifter]

We cannot do anything against it unfortunately. But the ESLint plugin with a matching rule was implemented in #99, you can find an example how it could be consumed in docs or in the real PR (microsoft/fluentui#22961).