Only static values are allowed inside of a stylex.create() call.

[adrian-novacescu]

Hi,

I am trying to create a design-system for our product using stylex. I defined tokens and used them in storybook and everythingn works ok. However, I tried to create an object with multiple tokens:

import { borderRadiiTokens } from './borderRadii/border.radii.stylex';
import { colorTokens } from './colors/colors.light.stylex';
import { fontFamilyTokens } from './fonts/fontFamily/fontFamily.stylex';
import { fontSizeTokens } from './fonts/fontSize/fontSize.stylex';
import { fontWeightTokens } from './fonts/fontWeight/fontWeight.stylex';
import { lineHeightTokens } from './fonts/lineHeight/lineHeight.stylex';
import { shadowTokens as shadowBrandLightTokens } from './shadows/shadows.brand.light.stylex';
import { shadowTokens as shadowNeutralLightTokens } from './shadows/shadows.neutral.light.stylex';
import {
  verticalSpacingTokens,
  horizontalSpacingTokens,
} from './spacing/spacing.stylex';

export const tokens = {
  borderRadius: borderRadiiTokens,
  color: colorTokens,
  font: {
    family: fontFamilyTokens,
    weight: fontWeightTokens,
    size: fontSizeTokens,
    lineHeight: lineHeightTokens,
  },
  shadow: {
    neutral: shadowNeutralLightTokens,
    brand: shadowBrandLightTokens,
  },
  spacing: {
    horizontal: horizontalSpacingTokens,
    vertical: verticalSpacingTokens,
  },
};

but I can't use the new object created since I get the error Only static values are allowed inside of a stylex.create() call..

Is there anything I can do to organize the tokens into a single object?

Thanks a lot,
Adi

[nmn]

Is there anything I can do to organize the tokens into a single object?

No this is not possible. This rule is explicitly documented.
https://stylexjs.com/docs/learn/theming/using-variables/#rules-when-using-variables

You can move all the tokens to the same file as separate named exports. That's the closest you can get to what you're trying to achieve.

[adrian-novacescu]

Thanks for the quick reply. I read the docs but I missed the tip (although is highlighted there). I moved all my tokens into the same file as suggested but I still have a problem with aliases. I have same alias defined in webpack config and in stylex babel plugin but I still get the error "Only static values are allowed inside of a stylex.create() call.

My babel config is:

const styleXPlugin = require('@stylexjs/babel-plugin');
const path = require('path');

module.exports = function (api) {
  api.cache(true);

  const presets = [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'entry',
        corejs: '3.22',
      },
    ],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ];
  const plugins = ['preval'];
  const env = {
    development: {
      plugins: [
        'react-hot-loader/babel',
        [
          styleXPlugin,
          {
            dev: true,
            // Set this to true for snapshot testing
            // default: false
            test: false,
            // Required for CSS variable support
            unstable_moduleResolution: {
              // type: 'commonJS' | 'haste'
              // default: 'commonJS'
              type: 'commonJS',
              // The absolute path to the root directory of your project
              rootDir: __dirname,
            },
            aliases: {
              'design-system': path.resolve(__dirname, 'src/design-system/'),
            },
          },
        ],
      ],
    },
  };

  return {
    presets,
    plugins,
    env,
  };
};

I had stylex plugin in Plugins array as well but I've got the same results. I know the alias works since it is heavily used in all parts of the project.

Thanks a lot for your help,
Adi

[adrian-novacescu]

Never mind. It works ok with last version of webpack.

Thanks for support and for the library. It's great :)