CLI Example app?

[BMCwebdev]

Hey there. I'm wondering if my expectations are correct when it comes to the CLI Example directory in the apps directory. Really want to start giving the CLI a spin.

• I was hoping I could run npm install in here, and then perhaps have a working example of the CLI in action.
• However it seems there is no build here (by that I mean there is no Vite or Next app build).
• There does seem to be a build in the packages directory.
• Running npm install is error-ing out for me with a lot of different errors in each package. Many include sh command not found errors.
• npm run build is error-ing out too.

Happy to give more feedback, but I feel like right now you're probably aware of something and me pasting in a bunch of terminal errors wouldn't be helpful. If I'm mistaken and I can provide any info, please let me know, happy to do so.

[Jta26]

The current CLI example doesn't integrate with an existing framework like next because npm has some weird issues with how it builds in our monorepo setup.

@nmn put together an intentionally unmerged PR with a next example, not sure if it's finished though

#618

If you share what errors you're facing in setting it up I can look into it.

[BMCwebdev]

Joel! I can't tell you how many times I started my mornings by checking out your pull requests for this CLI. Really appreciate all the work you have done and can't wait to get this implemented into our build.

because npm has some weird issues with how it builds in our monorepo setup.

yeah, I think that is partially what I am seeing. npm install or npm build with this monorepo setup (seems similar to mine) tries to run install and build for every package in the monorepo.

I'll try out that PR you linked.
In the meantime, here is the terminal output when trying to run npm install in stylex/apps/cli-example
Nope, I think I just needed to npm install at the root. Shoulda know better!

[BMCwebdev]

It works 🎉
It seems the setup doesn't include hot reloading, so I have the kill the dev server and start up again to see changes, but it works!

Going to give it a try in my app, we'll see how it goes. Thank you again!

[Jta26]

Nice! What I've been doing when using it in a side project (although it's less than ideal) is having one terminal with the CLI in watch mode, and then running next dev in another one. The CLI will compile to the src folder which get picked up by next.

[nmn]

@nmn put together an intentionally unmerged PR with a next example, not sure if it's finished though

NPM and Next.js is giving me trouble which is why it isn't merged for now. I've also put up a separate repo with a Next example:

https://github.com/nmn/next-15-with-stylex-cli

In my experience that works in both dev and prod very well.

The main issues I'm running into are:

1. Using StyleX within package dependencies
2. Not all StyleX configuration options are correctly exposed. (I'm working on this right now)

[Jta26]

Yeah, you'll have to install watchman. It's something outside of node, and you can follow the instruction in the link it provides.

The last 2 days I've been testing the watch mode because of your post, and you actually helped me identify some major devx issues that I'm going to fix, so I appreciate this thread. Right now it will exit watch mode if your code has type errors that cause the babel transform to fail, which we should gracefully handle. Also there's a bug where it will delete non-JS files for some reason.

[BMCwebdev]

Hmm, installing watchman on my computer might be tricky (work computer / security protocols).

I think I'll just try to modify it to use something like Concurrently or nodemon to watch for changes and then run "stylex --config ./.stylex.json5.

[BMCwebdev]

Hey, really happy it's been helpful. I'll keep updating as I make progress.

[BMCwebdev]

I decided to install concurrently and chokidar for now. Changed the dev script to

"dev": "concurrently \"chokidar 'source/**/*' -c 'stylex --config ./.stylex.json5'\" \"next dev\""

So far so good.

[BMCwebdev]

Well, I think I'm at a block point to test my component library because I'll need the modules_EXPERIMENTAL to be working. I'll keep my eyes open.

[BMCwebdev]

I noticed in your latest PR @Jta26

Because we copy (and the subsequently delete) the modules_experimental to the input directory, this inadvertently triggers changes in watchman.

So it appears that modules_experimental should be functioning? It was commented out in the next-15-with-stylex-cli repo, so I figured it was not working.

Going to give it another try.

[nmn]

it was commented out in the next-15-with-stylex-cli repo, so I figured it was not working.

It's buggy. Doesn't work reliably yet.

[BMCwebdev]

Well, if I run stylex --config ./.stylex.json5 I get some good feedback. It is transforming my tokens (set up just like open-props)

I can see the stylex_compiled_modules directory now in the output src directory. The tokens have been converted to css vars.

But if I try to run next dev after that, I get errors. I am not sure why it is hitting the defineVars error, unless it is trying to compile the tokens again in the original node_modules folder?

node_modules/@stylexjs/stylex/lib/es/stylex.mjs (174:1) @ errorForFn
 ⨯ Error: 'stylex.defineVars' should never be called at runtime. It should be compiled away by '@stylexjs/babel-plugin'
    at __webpack_require__ (/Users/brian.mccarthy/Development/next-15-with-stylex-cli/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/brian.mccarthy/Development/next-15-with-stylex-cli/.next/server/webpack-runtime.js:33:42)
    at eval (./src/app/page.js:11:86)
    at (ssr)/./src/app/page.js (/Users/brian.mccarthy/Development/next-15-with-stylex-cli/.next/server/app/page.js:140:1)
    at Object.__webpack_require__ [as require] (/Users/brian.mccarthy/Development/next-15-with-stylex-cli/.next/server/webpack-runtime.js:33:42)
digest: "2547279488"
  172 | styleq.factory = createStyleq;
  173 |
> 174 | const errorForFn = name => new Error(`'stylex.${name}' should never be called at runtime. It should be compiled away by '@stylexjs/babel-plugin'`);
      | ^
  175 | const errorForType = key => errorForFn(`types.${key}`);
  176 | function props() {
  177 |   const options = this;

[nmn]

I'm not seeing this on my end. Will need to see your code.

[Jta26]

I was doing some testing with the CLI and was able to find some cases in which the CLI doesn't update the imports to the copied modules. I'm not sure why yet, but I'm going to figure it out. I imagine this error message is caused by the imports not being updated and it still pointing to the uncompiled version

[BMCwebdev]

Hey @nmn been on vacation (needed!).

• So I used the next-15-with-stylex-cli repo you have: https://github.com/nmn/next-15-with-stylex-cli
• Installed stylexjs open-props package
• un-comment out from the .stylex.json5 file

  modules_EXPERIMENTAL: [
    ['@stylexjs/open-props', { ignore: ['src', '__tests__'] }],
  ],

• in page.tsx I use
  import { colors as OPcolors } from '@stylexjs/open-props/lib/colors.stylex';
  and

const styles = stylex.create({
  page: {
    backgroundColor: OPcolors.blue0,

Try to run the dev build and I get the error

⨯ node_modules/@stylexjs/stylex/lib/es/stylex.mjs (174:1) @ errorForFn
 ⨯ Error: 'stylex.defineVars' should never be called at runtime. It should be compiled away by '@stylexjs/babel-plugin'
    at __webpack_require__ (/Users/brian.mccarthy/Development/acmeStylexNext/next-15-with-stylex-cli/.next/server/webpack-runtime.js:33:42)
    at eval (./src/app/page.js:11:96)
    at (rsc)/./src/app/page.js (/Users/brian.mccarthy/Development/acmeStylexNext/next-15-with-stylex-cli/.next/server/app/page.js:173:1)
    at Function.__webpack_require__ (/Users/brian.mccarthy/Development/acmeStylexNext/next-15-with-stylex-cli/.next/server/webpack-runtime.js:33:42)
    at async Promise.all (index 0)
digest: "3560269046"
  172 | styleq.factory = createStyleq;
  173 |
> 174 | const errorForFn = name => new Error(`'stylex.${name}' should never be called at runtime. It should be compiled away by '@stylexjs/babel-plugin'`);
      | ^
  175 | const errorForType = key => errorForFn(`types.${key}`);
  176 | function props() {
  177 |   const options = this;

[BMCwebdev]

I know you already mentioned modules_experimental isn't quite ready yet, but just thought I would add the feedback of what I am seeing when trying to use it in case there is some value to it.

[BMCwebdev]

Noticed something today. Quick catch up, I am using StyleX in a component library / design system. When we the library in an app (NextJS) there is some very sad DX. Often the styles don't show up in npm run dev mode. If you save the tsx file you are working on, it kicks off a re-compile and usually that will get the styles to show up. I believe I read in a comment of yours that this is due to some timing between StyleX compiling and the Next dev server compiling.

What I noticed today is it seems that this issue of styles not compiling in time for the dev server happens when the styles are using the tokens (set up like your OpenProps demo).

Seems that using a token library is causing issue with both the babel plug-in method and the CLI (node_modules) method.

EDIT I take that back :-) Next with babel still has issues even without tokens. Oh well, thought I had something there for a moment.

If there is anything I can do I'd be happy to help. I have a lot of motivation to get the CLI working in Next with a node_modules token library :-)

[besSejrani]

i get also the same error

[nmn]

Please share your code as well please.

[nmn]

@Jta26 has made some improvements to CLI since these issues were reported. Will test and cut a new release soon.