Babel generated code isn’t picked up by the StyleX plugin

[joshuabaker]

I’ve been experimenting with a Babel plugin that injects StyleX create and props calls as a proof of concept. It seems like no matter what I do, the StyleX plugin is skipping generated nodes.

The plugin is really simplistic. It simply injects a styleX.create call at the end of the file and adds the styleX.props spread to the div element.

Can anyone offer any guidance on this?

---

Raw source file

import styleX from "@stylexjs/stylex";

const styles = styleX.create({
  base: {
    color: "blue",
  },
});

export default function Test() {
  return (
    <>
      <p {...styleX.props(styles.base)}>StyleX</p>
      <div>Generated</div>
    </>
  );
}

After running inject-test.js

Everything looks good at this point. The generated variable is there and the relevant StyleX calls are present. Both are using the same import.

import styleX from "@stylexjs/stylex";
const styles = styleX.create({
  base: {
    color: "blue"
  }
});
export default function Test() {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", styleX.props(styles.base), "StyleX"), /*#__PURE__*/React.createElement("div", styleX.props(generated.base), "Generated"));
}
const generated = styleX.create({
  base: {
    color: "green"
  }
});

After running @stylexjs/babel-plugin

Note that the manually defined call is compiled, but the generated one is ignored.

import styleX from "@stylexjs/stylex";
export default function Test() {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
    className: "xju2f9n"
  }, "StyleX"), /*#__PURE__*/React.createElement("div", styleX.props(generated.base), "Generated"));
}
const generated = styleX.create({
  base: {
    color: "green"
  }
});

---

I’ve triple checked in AST explorers. This makes no sense to me. I can only assume that somewhere in the StyleX plugin there’s a node metadata check that’s causing the nodes to be ignored.

.babelrc.js

module.exports = {
  presets: ["@babel/preset-react"],
  plugins: ["./inject-test.js", "@stylexjs/babel-plugin"],
};

The source of my inject-test.js plugin

const babel = require("@babel/core");
const t = require("@babel/types");

module.exports = function () {
  return {
    visitor: {
      Program: {
        exit(path) {
          // Construct the `styleX.create` call
          const styleXCreateCall = t.variableDeclaration("const", [
            t.variableDeclarator(
              t.identifier("generated"),
              t.callExpression(
                t.memberExpression(
                  t.identifier("styleX"),
                  t.identifier("create"),
                ),
                [
                  t.objectExpression([
                    t.objectProperty(
                      t.identifier("base"),
                      t.objectExpression([
                        t.objectProperty(
                          t.identifier("color"),
                          t.stringLiteral("green"),
                        ),
                      ]),
                    ),
                  ]),
                ],
              ),
            ),
          ]);

          // Append the `styleX.create` call at the end of the file
          path.pushContainer("body", styleXCreateCall);
        },
      },
      JSXElement(path) {
        if (path.node.openingElement.name.name === "div") {
          // Construct the `styleX.props` spread attribute
          const styleXPropsSpread = t.jsxSpreadAttribute(
            t.callExpression(
              t.memberExpression(t.identifier("styleX"), t.identifier("props")),
              [
                t.memberExpression(
                  t.identifier("generated"),
                  t.identifier("base"),
                ),
              ],
            ),
          );

          // Add the spread attribute to the `<div>`
          path.node.openingElement.attributes.push(styleXPropsSpread);
        }
      },
    },
  };
};

[joshuabaker]

Silly error in my plugin call ordering.

Specifically that I was adding the create in exit whereas the StyleX plugin does that on enter.