Do not add CSS shorthands in runtime

We don’t allow to use CSS shorthands: https://github.com/microsoft/griffel/blob/b4c7acc77e5e7b4883ca32249418a3d93dc43e77/packages/core/src/types.ts#L5-L49

We should implement something in runtime to prevent adding rules with shorthands. Currently shorthands usage produces TS errors, but rules are still inserted to DOM. That creates confusion and feeling that something is wrong with typings.

• This should be based on typings that we have
• The runtime check should be development (non-production) to avoid contributions to bundle size

Expected behavior

import { makeStyles } from "@griffel/react";

const useClasses = makeStyles({
  root: {
    // ⏭ "background" is not inserted to DOM & a warning is produced (currently inserted)
    // 💥 produces TS error (already done)
    background: "red"
  }
});

[layershifter]

Maybe your document seems like didn’t mention that. and I don’t know why I can’t scroll down your docs page

This looks really strange. Can you please share details about your environment? OS, browser?

[layershifter]

@Aloento you find out more details in that comment, https://github.com/microsoft/griffel/issues/30#issuecomment-1045959297. If you have questions, let’s continue there.