[NEXT JS] Error Only static values are allowed inside of a stylex.create()

[GarretTomlin]

I'm encountering an issue when trying to use the stylex.create() function with styles imported from a JSON file, which I'm treating as a mock API to eventually store styles in a database. The JSON file contains CSS rules for different class names, and I'm trying to pass these styles to stylex.create(). However, I'm getting an error "Error: Only static values are allowed inside of a stylex.create() call."

Steps to Reproduce:

1. Import styles from a JSON file.
2. Parse the JSON data.
3. Pass the parsed styles to stylex.create().

Expected Behavior:
I expect to be able to pass the styles imported from the JSON file to stylex.create() without encountering any errors.

sample code:

{
    "container": {
      "color": "black",
      "fontFamily": "Helvetica",
      "width": "full",
      "margin": 0
    },
    "container2": {
      "marginRight": "auto",
      "marginLeft": "auto",
      "paddingLeft": "1rem",
      "paddingRight": "1rem",
      "maxWidth": "100%"
    },
    "containerflex": {
      "display": "flex",
      "alignItems": "center",
      "justifyContent": "space-between",
      "paddingTop": "1rem",
      "paddingBottom": "1rem"
    },
    "logo": {
      "display": "inline-flex",
      "alignItems": "center"
    },
    "span": {
      "marginLeft": "0.5rem",
      "fontSize": "1.25rem",
      "fontWeight": "bold",
      "color": "black",
      "textTransform": "uppercase"
    },
    "flex": {
      "display": "flex",
      "alignItems": "center",
      "justifyContent": "space-between",
      "paddingTop": "1rem",
      "paddingBottom": "1rem"
    },
    "signIn": {
      "color": "#2d3748",
      "fontSize": "0.875rem",
      "fontWeight": "600",
      "marginRight": "1rem",
      "textDecoration": "none",
      "transition": "color 0.3s ease"
    },
    "signUp": {
      "color": "#2d3748",
      "fontSize": "0.875rem",
      "fontWeight": "600",
      "border": "1px solid",
      "padding": "0.5rem 1rem",
      "borderRadius": "0.375rem",
      "textDecoration": "none",
      "transition": "color 0.3s ease, border-color 0.3s ease"
    }
  }

import stylex from '@stylexjs/stylex';
import {
    container,
    container2,
    flex,
    logo,
    span,
    signIn,
    signUp
  } from './nav.json';
  
  export const navBarStyles = stylex.create({
    container,
    container2,
    flex,
    logo,
    span,
    signIn,
    signUp
  });

[nmn]

1. Import styles from a JSON file.
2. Parse the JSON data.
3. Pass the parsed styles to stylex.create().

This is not supported. All styles passed into stylex.create must be defined as static constants within the same file. Importing constants from other files such as JSON files is not supported.

The only exception to this is variables created used stylex.defineVars. The only reason that is supported is that we rely on CSS variables at runtime and we don't actually import any values during compile time.

This constraint is documented under the "Constraints" sections of the "Defining Styles" page of the documentation.

Specifically, note the second and last thing that is mentioned as "not allowed":

The following are not allowed:

1. Function calls (except StyleX functions)
2. Values imported from other modules (except for CSS Variables created using StyleX from a .stylex.js file.)