Babel plugin to transform a custom sx prop for any component

[kripod]

Motivation

Calling the useStyling hook is verbose, especially for small components, e.g.:

import { useStyling } from 'glaze';

export default function Component() {
  const sx = useStyling();

  return (
    <p
      className={sx({
        px: 4, // Sets padding-left and padding-right to 1rem
        color: 'white',
        bg: 'red', // Sets background to #f8485e
      })}
    >
      Hello, world!
    </p>
  );
}

Basic example

Instead, an API like below could be made possible with code transforms:

export default function Component() {
  return (
    <p
      sx={{
        px: 4, // Sets padding-left and padding-right to 1rem
        color: 'white',
        bg: 'red', // Sets background to #f8485e
      }}
    >
      Hello, world!
    </p>
  );
}

Details

Style composition (#4) should also be made available.

A custom JSX pragma is not required, nor recommended. If someone opts into using the Babel plugin, TypeScript module augmentation should be applied on React elements, extending the list of available props with sx.

[kripod]

For auto-importing the useStyling hook, the implementation in emotion-js/emotion#200 can be utilized. After that, every component with an element using the sx prop should start with:

const sx = useStyling();

[tatchi]

Hey,

I would love to give a shot at this one. I've never written any babel plugin but I guess that's a cool learning opportunity 😊

Since there's an example I can base myself on I hope it's won't be too difficult :)

[kripod]

@tatchi Thank you for trying! I’ve also never written a Babel plugin before, but this explanation and the preset for emotion’s css prop may help us through the journey.

Let me know if you have any questions!

[kripod]

Now only the documentation and type definitions are left. I'm doing both right now 😊