How to share variables/values out of stylex supported env ?

[MoOx]

I am currently facing a problem that I didn't expect.

Previously, I was using a simple stylex.js file with some tokens, with something like:

// vars.stylex.ts

const supports_okhsl = "@supports (color: oklch(0% 0 0))";
// .... and some other @ rules

export const colors = css.defineVars({
  main: {
    default: "rgb(0 161 255)",
    [supports_okhsl]: "oklch(0.7 0.2 250)",
  },
  // ... more token
})

That said, in some cases, I would like to rely on some values outside of RSD/stylex environment like the following:

• visuals like generated SVG (svg favicon) with node script
• email generated using react-email

So first thing I tried, I changed the way things are exported to be able to reuse some stuff without defineVars.

// vars.stylex.ts

export const supports_okhsl = "@supports (color: oklch(0% 0 0))";
// .... and some other @ rules

export const colorVars = {
  main: {
    default: "rgb(0 161 255)",
    [supports_okhsl]: "oklch(0.7 0.2 250)",
  },
  // ... more token
})

export const colors = css.defineVars(colorVars)

Problem is that in those envs outside of stylex setup (nextjs) I cannot use stylex babel plugin, so I am getting the style "cannot be used in runtime" issue (which make sense because stylex need that).

So I tried another approach, to be able to share "raw values" that I could import in dumb case, and also in stylex files (css.defineVars). I would have expected this simple solution to work when use 2 separate files:

// rawVars.ts

export const supports_okhsl = "@supports (color: oklch(0% 0 0))";
// .... and some other @ rules

export const colorVars = {
  main: {
    default: "rgb(0 161 255)",
    [supports_okhsl]: "oklch(0.7 0.2 250)",
  },
  // ... more token
})

// vars.stylex.ts

import { supports_okhsl, /*...*/, colorsVars } from "@src/rawVars"

export const colors = css.defineVars(colorVars)

But when I do that, I am getting Only static values are allowed inside of a stylex.create() call..
I tried various setup where I add .stylex extension on rawVars (but then I am gettin another stylex error stylex.create() can only accept a style object.).

So my question will be kinda stupid but what is a good setup so I can reuse some shared values inside and outside of stylex scope ?

Also, for thing like a const darkMode I would have expected the ability to import this from another file. But as soon as something is imported from outside the current stylex file, I received the error: Only static values are allowed inside of a stylex.create() call. .
My 2 cents is that at least documentation should be more explicit about how to fix the problem, the error being unclear.

[necolas]

I would have expected this simple solution to work when use 2 separate files

The problem with importing those objects into the file that calls defineVars is that the compiler doesn't know the contents of the imported files. I think in this case you're describing, where you have some variables you want to share with other environments, it might be simplest to generate the *.stylex.js file with those variables inlined rather than imported. So basically the first thing you tried, but have that file generated and only used for the app using StyleX.

Let me know if that does the trick.

But when I do that, I am getting Only static values are allowed inside of a stylex.create() call.

Sorry that was probably a confusing error since you were actually calling defineVars, but it should be fixed by this commit to StyleX - facebook/stylex@8d2e824. I'll update RSD to use the latest version of StyleX once we publish 0.13.0

My 2 cents is that at least documentation should be more explicit about how to fix the problem, the error being unclear.

Yeah good idea. We'll try to update the docs for both projects to help clarify the constraints of a built-time compiler.

[MoOx]

I guess having the plugin that would check content from other files will be a significant change that could become a pain to maintain, but is that an option ?

Currently I did this script that is taking my files from the folder the script is in (in my case src/tokens) and take all files that doesn't end with .stylex.ts and generate the same files by reexporting export const *Tokens as export const ${baseName} = css.defineVars(${fullName}) which is enough to make me happy for now.

// https://github.com/facebook/react-strict-dom/discussions/303

import * as fs from "fs";
import * as path from "path";
import { fileURLToPath } from "url";
// @ts-expect-error import.meta just works when using node --experimental-strip-types
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

type TokenVariable = {
  baseName: string;
  fullName: string;
};

/**
 * Find all .ts files that don't start with _ and don't end with .stylex.ts
 * and generate corresponding .stylex.ts files by detecting token variables
 */
try {
  // Get all files in the directory
  const allFiles = fs.readdirSync(__dirname);

  // Filter for .ts files that don't start with _ and don't end with .stylex.ts
  const files = allFiles.filter((file) => {
    return (
      file.endsWith(".ts") &&
      !file.startsWith("_") &&
      !file.endsWith(".stylex.ts")
    );
  });

  // Process each file
  for (const file of files) {
    const inputPath = path.join(__dirname, file);
    const outputPath = path.join(__dirname, file.replace(".ts", ".stylex.ts"));

    try {
      // Read the content of the source file
      const content = fs.readFileSync(inputPath, "utf8");

      // Find all *Tokens variables in the file
      const tokensRegex = /export\s+const\s+([a-zA-Z0-9]+)Tokens\s*(:|=)/g;
      let match;
      const tokenVariables: TokenVariable[] = [];

      // Extract all token variable names
      while ((match = tokensRegex.exec(content)) !== null) {
        const baseName = match[1];
        const fullName = `${baseName}Tokens`;
        tokenVariables.push({ baseName, fullName });
      }

      if (tokenVariables.length === 0) {
        console.warn(`No token variables found in ${file}, skipping...`);
        continue;
      }

      // Generate the output content
      let outputContent = `/****************************************************************/
/* GENERATED FILE - DO NOT EDIT
/* EDIT ${inputPath.replace(__dirname + "/", "")}
/* https://github.com/facebook/react-strict-dom/discussions/303
/****************************************************************/

import { css } from "react-strict-dom";

${content}

`;

      // Add the css.defineVars exports for each token
      tokenVariables.forEach(({ baseName, fullName }) => {
        outputContent += `export const ${baseName} = css.defineVars(${fullName});\n`;
      });

      // Write the output file
      fs.writeFileSync(outputPath, outputContent);

      // Get a list of base names for the log message
      const baseNames = tokenVariables.map((v) => v.baseName);
      console.log(
        `Successfully generated ${outputPath} with exports for: ${baseNames.join(
          ", "
        )}`
      );
    } catch (error) {
      console.error(
        `Error generating ${outputPath}:`,
        error instanceof Error ? error.message : String(error)
      );
    }
  }
} catch (error) {
  console.error(
    "Error finding files:",
    error instanceof Error ? error.message : String(error)
  );
  process.exit(1);
}

To make this fully nice to use, I have setup an automation via VS Code plugin Run on Save with the following settings:

{
  "emeraldwalk.runonsave": {
    "commands": [
      {
        "match": "src/tokens/.*",
        "cmd": "npm run stylex:generate"
      }
    ]
  }
}

npm run stylex:generate being "stylex:generate": "node --experimental-strip-types src/tokens/_generate-stylex.ts",

So whenever I edit a file in my src/tokens folder, the script run. I also git ignored src/tokens/*.stylex.ts.

That's cool enough for now, but it would be nice if stylex could be more smart about imported data.

[necolas]

Glad that worked!

Babel plugins work best on single files and don't read the contents of other files. It's important for performance too. This is the same thing the React Compiler plugin does.