@stylexjs/babel-plugin 0.2.0-beta.8 → 0.2.0-beta.9

package/README.md

@@ -0,0 +1,35 @@
+# @stylexjs/babel-plugin
+
+StyleX expects you to transform all `js`/`ts`/`tsx` files with `@stylexjs/babel-plugin`.
+In addition to transforming JS code, this plugin also produces an Array of CSS rules. All the CSS rules
+generated from all JS files within your project should be concatenated together and converted to a CSS
+file using the `processStyles` function which is also exported from the same module.
+
+(NOTE: StyleX only uses RTL-friendly logical values of `start` and `end` and disallows using `left` and `right` entirely.)
+
+`@stylexjs/babel-plugin` is fairly lightweight. It pre-computes `stylex` related functions like
+`stylex.create` and `stylex.keyframes` by converting the argument AST to a JS object and transforming them
+by passing them to the functions of the corresponding names within `@stylex/shared`
+
+
+## Babel Metadata
+
+The StyleX Babel plugin does more than transform Javascript (or Typescript) files. It also returns a list of injected styles. The way that such a value can be returned while transforming a JS file is by using Babel's `metadata` API.
+
+An example of this can be seen in some of the tests, but the result of using Babel's `transform(...)` function returns an object contains at least two keys:
+
+1. `code` which is the transformed JS code
+2. `metadata` is an object of metatdata that the plugin may want to return as a side-effect.
+
+e.g.
+
+```js
+const result = transformSync(sourceCode, {
+  filename: opts.filename,
+  parserOpts: { flow: { all: true } },
+  plugins: [stylexPlugin, opts],
+});
+
+const transformedCode = result.code;
+const injectedStyles = result.metadata.stylex;
+```