transform stylex.create() and stylex.props clientside

[philholden]

I am currently using Emotion and considering moving to StyleX the biggest blocker is getting StyleX working in our user editable playgrounds. Just need the ability to ability create and apply classes but do not need the ability to define variables. The theme variables can be available precompiled on on the playground scope but I want users of the playground to be able to override simple styles like margin on components.

The editor has a transformCode prop allowing the code entered to be transformed so ideally I'd like to use that to transform the code with a subset of stylex. Looking to be able to do simple things like this:

However the babel transform code has lots of node ecosystem stuff in it which stops it running in the browser. The playground does not allow importing or exporting so does needs very reduced stylex functionality.

[nmn]

You should be able to use @stylexjs/dev-runtime. It's a fully runtime version of StyleX that works without compilation. It computes and injects styles at runtime.

Generally this is only suggested for development, but it might work for your use-case as well.

• Getting started with dev-runtime
• API Docs

[philholden]

Thanks when I call inject in my index.ts

import inject from '@stylexjs/dev-runtime';

inject({
  classNamePrefix: 'x',
  dev: true,
  test: false,
});

I get Uncaught TypeError (0, import_dev_runtime.default) is not a function. This happens on calling inject. Calling inject.default({ classNamePrefix: 'x', dev: true, test: false, }) did not error. But I still got an error saying stylex.create should never be called at runtime. It should be compiled away by '@stylexjs/babel-plugin'

Here is an example in codesandbox:

https://codesandbox.io/p/sandbox/567392

// index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import inject from "@stylexjs/dev-runtime";
inject({
  classNamePrefix: "x",
  dev: true,
  test: false,
});

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

// App.js
import "./styles.css";
import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  foo: { color: "red" },
});

export default function App() {
  return (
    <div className="App">
      <h1 {...stylex.props(styles.foo)}>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

[nmn]

Codesandbox was super buggy for me but I tried StackBlitz and was able to reproduce the issue. At least with Vite, the dev-runtime ends up pulling in a separate second copy of StyleX and patches that unrelated copy of StyleX which creates this problem.

I'll update the dev-runtime package so it's possible to import and use all of stylex directly from that package instead of just monkey patching @stylexjs/stylex which is what we do today.

[philholden]

Thanks so much that would be so helpful.