Enable sx prop on any components

[siriwatknp]

closes #35

• transform sx prop using runtime {…sx()} spread (see the test cases)
• Remove ForwardSx
• Remove allowTransformSx check (to transform any component)
• Remove sx related logic from runtime styled (I like this so much because sx is not independent of styled)
• Remove double class CSS specificity

Tested in next-app, it works with HTML tags and Material UI components.

---

• I have followed (at least) the PR section of the contributing guide.

[siriwatknp]

Ignore sx prop on JSX html tag.

[siriwatknp]

Just to test that we can modify the types of JSX elements.

[mnajdova]

Nice, we can use the SxProps tough, no? :) I would recommend adding a documentation about this in the README.md too, so we can test everything, including typings and make sure we haven't forgot something.

[siriwatknp]

It's for POC at this point. There is one issue to fix from Pigment side which is delegating sx logic to the theme. Currently, Pigment is using styleFunctionSx from MUI System which is impossible to customize.

Once that's done, I will add docs for it.

[siriwatknp]

Casting type like this will fail this.replacer((_tagPath: NodePath<CallExpression>) => { because Type 'Node' is not assignable to type 'CallExpression'.

So I have to create a new variable instead.

[mnajdova]

I ❤️ this!

[brijeshb42]

I haven't tested this but how would conditional sx work here ->

<div sx={props.isPrimary ? {color: 'red', background: 'blue'} : {fontWeight: '400'}} />

[siriwatknp]

I haven't tested this but how would conditional sx work here ->

<div sx={props.isPrimary ? {color: 'red', background: 'blue'} : {fontWeight: '400'}} />

It will be:

<div {…props.isPrimary ? sx(…) : sx(…) } />

The logic that you had implemented remains the same. What I added is the conversion of sx prop to spread {…sx()} call.

The runtime sx() will always return { className: '...', style: { … } }.

[siriwatknp]

I have to add @pigment-css/react to the root package.json