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

[conarwelsh]

Describe the issue

When using even the exact code from the sample in the documentation:

const styles = stylex.create({
  // Function arguments must be simple identifiers
  // -- No destructuring or default values
  bar: (height) => ({
    height,
    // The function body must be an object literal
    // -- { return {} } is not allowed
  }),
});

I am constantly receiving the error Only static values are allowed inside of a stylex.create() call.

I am using the webpack loader in case that matters

Expected behavior

Should be able to using dynamic styles

Steps to reproduce

• using latest (0.5.1)
• using storybook with the webpack loader
• just paste in the sample code from the docs into a component

const styles = stylex.create({
  // Function arguments must be simple identifiers
  // -- No destructuring or default values
  bar: (height) => ({
    height,
    // The function body must be an object literal
    // -- { return {} } is not allowed
  }),
});

• you do not even need to try to use the styles, it fails immediately

Test case

this is my webpack config, very minimal

webpackFinal: async (config, { configType }) => {
    config.module = config.module || {}
    config.module.rules = config.module.rules || []

    config.plugins = config.plugins || []
    config.plugins.push(
      new StylexPlugin({
        // get webpack mode and set value for dev
        dev: config.mode === "development",
        // Required for CSS variable support
        appendTo: "head",
        unstable_moduleResolution: {
          // The module system to be used.
          // Use this value when using `ESModules`.
          type: "commonJS",
          // The absolute path to the root directory of your project.
          rootDir: __dirname,
        },
      }),
    )

    return config
  },

Additional comments

No response

[nmn]

I just verified that dynamic styles are working as expected. Perhaps there are some other non-static values being used within your usage of stylex.create?

https://stackblitz.com/edit/stylex-next-h9bqgw?file=app%2Fcomponents%2FDynamicHeight.tsx

'use client';

import * as stylex from '@stylexjs/stylex';
import { useState } from 'react';

export default function RedCard() {
  const [height, setHeight] = useState(20);

  return (
    <>
      <input
        type="range"
        min="20"
        max="300"
        value={height}
        onChange={(e) => {
          setHeight(parseFloat(e.currentTarget.value));
        }}
      />
      <div {...stylex.props(styles.base, styles.bar(height))} />
    </>
  );
}

const styles = stylex.create({
  btn: {
    padding: 16,
  },
  base: {
    backgroundColor: 'blue',
  },
  bar: (height) => ({
    height,
  }),
});

https://github.com/facebook/stylex/assets/3582514/0512f558-aeb1-48db-899a-52cf7719b097

[conarwelsh]

literally copy/pasted your code:

and still receiving the same error:

"@stylexjs/webpack-plugin": "^0.5.1", "@stylexjs/stylex": "^0.5.1",

webpackFinal: async (config, { configType }) => {
    config.module = config.module || {}
    config.module.rules = config.module.rules || []

    config.plugins = config.plugins || []
    config.plugins.push(
      new StylexPlugin({
        // get webpack mode and set value for dev
        dev: config.mode === "development",
        // Required for CSS variable support
        appendTo: "head",
        unstable_moduleResolution: {
          // The module system to be used.
          // Use this value when using `ESModules`.
          type: "commonJS",
          // The absolute path to the root directory of your project.
          rootDir: __dirname,
        },
      }),
    )

    return config
  },

[conarwelsh]

also your stackblitz is using v0.4.1

[nmn]

@conarwelsh I just updated the deps in my example and it all still works. Looking at your config, the appendTo: "head", looks wrong. The appendTo property appends to an existing CSS file. Could you share a minimum project example to figure out what's broken in your setup?

NOTE: The webpack plugin has known issues that I've spent a lot of time working on!

[conarwelsh]

I removed that config param and the same result happened.

but as I was building a sample repo I discovered it worked, and the only difference between the two setups was this plugin @storybook/addon-webpack5-compiler-swc which I hadn't even noticed as it went in from storybooks initial scaffold. I removed it at the problem went away.

Thank you for your time