RFC: napi-rs compiler for SWC StyleX plugin

[Dwlad90]

Motivation

As was correctly noticed in the issue's comment, the approach with extracting metadata via special comment is extremely unstable and inconvenient to use.

As one of the solutions for this problem, @SukkaW suggested using napi-rs to compile StyleX code and to allow access to metadata and to a source map in the babel plugin's style with no need to use the "metacomment" approach. This approach is more stable and convenient to use for writing plugins and tools for working with StyleX, ex. for creating a plugin for Webpack, Rollup, or other tools.

Proposal

The basic implementation of rs compiler is written in Rust and it's based on the napi-rs library. The compiler is a simple javascript function that takes the source code and options as input and returns the transformed code, metadata, and source map as output.

The source code of the compiler is located here: crates/stylex-compiler-rs.

The demo of using rs compiler is located here:crates/stylex-compiler-rs/transform.js.

Example

Source code:

import stylex from "@stylexjs/stylex";

export const styles = stylex.create({
  default: {
    backgroundColor: "red",
    color: "blue",
  },
});

Transformation:

var { transform } = require("@stylexswc/compiler-rs");

/// ...other logic

const { code, metadata, sourcemap } = transform(
  inputSourceCode,
  transformOptions,
);

/// ...other logic

Output:

{
  "code": "import stylex from '@stylexjs/stylex';\nexport const styles = {\n    default: {\n        backgroundColor: \"xrkmrrc\",\n        color: \"xju2f9n\",\n        $$css: true\n    }\n};\n",
  "metadata": {
    "stylex": {
      "styles": [
        {
          "className": "xrkmrrc",
          "style": {
            "ltr": ".xrkmrrc{background-color:red}",
            "rtl": null
          },
          "priority": 3000
        },
        {
          "className": "xju2f9n",
          "style": {
            "ltr": ".xju2f9n{color:blue}",
            "rtl": null
          },
          "priority": 3000
        }
      ]
    }
  },
  "sourcemap": "{\"version\":3,\"sources\":[\"<anon>\"],\"names\":[],\"mappings\":\"AACE;AACA;;;;;;EAKG\"}"
}

Pull Request: #38

Special thanks to @SukkaW for the recommendation. I would like to get a feedback about this RFC.