Export styleX variables does not work properly

[Luko248]

When working with styleX, I keep running into the same problem. As long as I import the files where the stylex variables are defined directly into the .ts file with the component, everything works fine.

colors.stylex.ts

export const colorBtn = defineVars({
  btnPrimaryBgActive: "var(--colorBtnPrimaryBgActive)",
  btnPrimaryBgBase: "var(--colorBtnPrimaryBgBase)",
  btnPrimaryBgHover: "var(--colorBtnPrimaryBgHover)",
  btnPrimaryTextBase: "var(--colorBtnPrimaryTextBase)",
  btnPrimaryTextHover: "var(--colorBtnPrimaryTextHover)",
  btnPrimaryTextActive: "var(--colorBtnPrimaryTextActive)",
  btnSecondaryBgBase: "var(--colorBtnSecondaryBgBase)",
  btnSecondaryBgHover: "var(--colorBtnSecondaryBgHover)",
  btnSecondaryBgActive: "var(--colorBtnSecondaryBgActive)",
  btnSecondaryTextBase: "var(--colorBtnSecondaryTextBase)",
  btnSecondaryTextHover: "var(--colorBtnSecondaryTextHover)",
  btnSecondaryTextActive: "var(--colorBtnSecondaryTextActive)",
  btnSecondaryBorderBase: "var(--colorBtnSecondaryBorderBase)"
});

myComponentStyle.tsx

import {
  colorColor,
  colorBtn
} from "../../stylex/tokens/colors.stylex";
import {
  measuresSpacing,
  measuresBorderWidth,
  measuresBorderRadius
} from "../../stylex/tokens/measures.stylex";

const BUTTON_STYLE = stylex.create({
  default: {
    cursor: "pointer",
    borderWidth: measuresBorderWidth.borderWidthBtn,
    borderStyle: "solid",
    borderRadius: measuresBorderRadius.borderRadiusBtn,
  },
  disabled: {
    color: colorColor.colorDisabledText,
    backgroundColor: colorColor.colorDisabledBg,
    borderColor: colorColor.colorDisabledBorder,
    cursor: "not-allowed",
  },
  primary: {
    color: {
      default: colorBtn.btnPrimaryTextBase,
      ":hover": colorBtn.btnPrimaryTextHover,
    },
    backgroundColor: {
      default: colorBtn.btnPrimaryBgBase,
      ":hover": colorBtn.btnPrimaryBgHover,
    },
    borderColor: {
      default: colorBtn.btnPrimaryBgBase,
      ":hover": colorBtn.btnPrimaryBgHover,
    },
  },
  secondary: {
    color: {
      default: colorBtn.btnSecondaryTextBase,
      ":hover": colorBtn.btnSecondaryTextHover,
    },
    backgroundColor: {
      default: colorBtn.btnSecondaryBgBase,
      ":hover": colorBtn.btnSecondaryBgHover,
    },
    borderColor: {
      default: colorBtn.btnSecondaryBorderBase,
      ":hover": colorBtn.btnSecondaryBgHover,
    },
  },
  small: {
    paddingInline: measuresSpacing.spacingBtnSmallPaddingInline,
    paddingBlock: measuresSpacing.spacingBtnSmallPaddingBlock,
    fontSize: "12px",
    lineHeight: "1",
  },
  medium: {
    paddingInline: measuresSpacing.spacingBtnMediumPaddingInline,
    paddingBlock: measuresSpacing.spacingBtnMediumPaddingBlock,
    fontSize: "16px",
    lineHeight: "1.25",
  },
  large: {
    paddingInline: {
      default: measuresSpacing.spacingBtnLargePaddingInline,
      "@media (width <= 1024px)": measuresSpacing.spacingBtnMediumPaddingInline,
    },
    paddingBlock: {
      default: measuresSpacing.spacingBtnLargePaddingBlock,
      "@media (width <= 1024px)": measuresSpacing.spacingBtnMediumPaddingBlock,
    },
    fontSize: "18px",
    lineHeight: "1.5",
  }
});

export default BUTTON_STYLE;

myComponent.tsx

import * as stylex from "@stylexjs/stylex";
import { StylexTestComponentProps } from "./StylexTestComponent.types";
import BUTTON_STYLE from "./StylexTestComponent.styles";

export const StylexTestComponent: React.FC<StylexTestComponentProps> = ({
  variant = "primary",
  size = "medium",
  disabled,
  children,
  style
}) => {
  return (
    <button {...stylex.props(
      BUTTON_STYLE.default,
      BUTTON_STYLE[variant],
      BUTTON_STYLE[size],
      disabled && BUTTON_STYLE.disabled,
      style)}
      disabled={disabled}
      aria-disabled={disabled}>
      {children}
    </button>
  );
};

But what if I want to wrap all the variables in an index file that I want to import, as we are used to, I always get the same message: Only static values are allowed inside of a stylex.create() call.

index.ts

export * from "./colors.stylex";
export * from "./fonts.stylex";
export * from "./gradients.stylex";
export * from "./measures.stylex";
export * from "./shadows.stylex";

If I name the index like index.stylex.ts, it works fine but the custom css properties that styleX generates does't contain any values.

I need to distribute styleX variables that contain design tokens from Figma in the form of an NPM package, but the actual logic of how styleX works doesn't allow me to do that, or it's not documented. Is this possible? Alternatively, how do I achieve this? @nmn The idea of using it is:

import { whatever } from @my/stylex/variables

/* My custom styleX css definitions in the current application. */

[nmn]

This is intentional design decision of how the compiler works and this rule has been documented:

• https://stylexjs.com/docs/learn/theming/defining-variables/#rules-when-defining-variables
• https://stylexjs.com/docs/learn/theming/using-variables/#rules-when-using-variables

Namely:

• defineVars can only be used in files with the .stylex.ts (or .stylex.js) extension
• It should always be a named export
• The must be imported DIRECTLY from the files they've been defined within

This design is important to make the compilation of individual files cacheable. The design makes it possible to compile each file without ever reading another file.

See the @stylexjs/open-props package as an example of how to define variables to be usable within a package:

• The export must have the .stylex name so that the compiler can detect that a file with variables is being imported from
• Define all your variables in one file if you want them to be usable by importing from a single file.