feat: add inline

[nonzzz]

TL;DR

This feature is same as @stylexjs inline proposal.

Checklist

• [x] core package export new function inline.
• [x] babel-plugin package support parse it.
• [x] extra evaluate-css logic.
• [ ] Others...

More Details

This pull request contain code gen refactor. In past i think each css token should be single object for js. But in fact it's not a good way for @stylexjs babel-plugin. It increases the overhead of conversion.

// input
export function Component(props) {
  const size = '16px'
  return (
    <div stylex={{
      '--font-size-unit': size,
      color: {
        default: null,
        '@media (max-width: 600px)': size ? props.read : props.purple
      }
    }}
    >
    </div>
  )
}

// output

import { create as _create, props as _props } from "@stylexjs/stylex";
const _styles = _create({
  "--font-size-unit": (_$size) => ({
    "--font-size-unit": _$size,
  }),
  color: (_$1c2mtth) => ({
    color: {
      default: null,
      "@media (max-width: 600px)": _$1c2mtth,
    },
  }),
});
export function Component(props) {
  const size = "16px";
  return (
    <div
      {..._props(
        _styles["--font-size-unit"](size),
        _styles["color"](size ? props.read : props.purple)
      )}
    ></div>
  );
}

// after 

import { create as _create, props as _props } from "@stylexjs/stylex";
const _styles = _create({
  "#0": (size, a1c2mtth) => ({
    "--font-size-unit": size,
    color: {
      default: null,
      "@media (max-width: 600px)": a1c2mtth,
    },
  }),
});
export function Component(props) {
  const size = "16px";
  return (
    <div
      {..._props(_styles["#0"](size, size ? props.read : props.purple))}
    ></div>
  );
}

About evaluating values as much as possible like stylex. It's need to be done in next pr.