RFC: useCompiledCSS() "hook"

[itsdouges]

Currently when wanting a class name directly you can use the ClassNames component, but it's a bit convoluted. We can streamline usage by the creation of a "hook" instead.

There will be one limitation however - it can't be used in a custom hook. This is because the code would be transformed to essentially be the output of the ClassNames component - however just have a streamlined usage flow.

Input

import { useCompiledCSS } from '@compiled/react';

const Button = ({ color }) => {
  const [className, styles] = useCompiledCSS({
    background: '#8777d9',
    color,
  });

  // Wiring up of styles and class name needs to be done by hand.
  return <button styles={styles} className={className}>Hello, world!</button>
};

Output

import * as React from 'react';
import { ix, CC, CS } from '@compiled/react/runtime';
const _ = '._irr3mlcl{background-color:#8777d9}';

export const Button = ({ color }) => {
  return (
    <CC>
      <CS>{[_]}</CS>
      {
        <button
          type="button"
          style={{ '_133asw': ix(color) }}
          className={'_irr3mlcl _ect4pa23'}>
          {children}
        </button>
      }
    </CC>
  );
};

[itsdouges]

Closing for now. Will revisit in the future, maybe.