Plugin doesn't work with the stable version of the Remix Vite plugin

[BMCwebdev]

Having a little trouble getting this working correctly. I have two places where I am using the plugin. I have a component library published as a package on GitHub and I have an app that consumes that library.

In the component library, StyleX is installed as a peerDependencies, as I expect the users of the component library to have it installed in their apps (this is for inter-company use, I'm not trying to make a public component library).

In the vite.config I have tried using stylex as a regular plugin (styleX()) and I've also tried to set it up that it would only run when I am not running the build. ...(command !== 'build' ? [styleX()] : []), As I understand it, I don't want StyleX to run and compile all the styles for the build that becomes the published component library on GitHub. I believe I want them to stay as is in the files. Only when the the consumer of the component library runs their build, that's when StyleX should compile.

Having said that. there are still times I do want StyleX to run in the component library. When I am using npm run dev for building and testing via in the built-in Vite app for example.

In the component library, in the vite.config, StyleX is also set as an external in the build > rollupOptions.

build: {
    rollupOptions: {
      external: ['react', 'react-dom', 'react-aria-components', '@stylexjs/stylex'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
          'react-aria-components': 'ReactAriaComponents',
          '@stylexjs/stylex': 'Stylex',
        },
      },
    },

That is all how the component library is set up. Now, In the consuming Vite app StyleX is installed and set up normally. When I run npm run build, I get the error "[plugin:vite-plugin-stylex] Could not find root.css file. Did you import styles in the root of your Remix app?" However the styles are being generated and bundled into the build > client > assets > css file. Not sure why I am getting the error.

I have experimented with changing the name of the css file and it's location with the same results.

When I run npm run dev in the consuming Vite app, I get the error that "[vite] Internal server error: 'stylex.create' should never be called at runtime. It should be compiled away by '@stylexjs/babel-plugin'"

I think I am missing or not understanding some basic principal in setting up StyleX and this plugin. Any help would be greatly appreciated.

[BMCwebdev]

Follow up:

The component library is ES bundled. I've attached a copy to this (I added .txt to the end of the name so that github would allow me to attach the file).

In the component library, both npm run build and npm run dev work. But in the app that consumes the component library npm run devdoes not, while npm run build does appear to work (at least I don't get errors and the static css file is generated).

I've tried adding optimizeDeps and a rollup build option to the vite.config in case it was due to Vite not compiling dependencies during npm run dev

vite.config.ts

/// <reference types="vite/client" />

import { vitePlugin as remix } from '@remix-run/dev';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import { stylexPlugin } from "vite-plugin-stylex-dev";

export default defineConfig({
  plugins: [stylexPlugin(), remix(), tsconfigPaths()],
  optimizeDeps: {
    include: ["@componentLib/componentLib-ui"],
  },
  build: {
    rollupOptions: {
      plugins: [stylexPlugin()],
    },
  },
});

componentLib-ui.es.js.txt

[HorusGoul]

Did you try it by following this? https://github.com/HorusGoul/vite-plugin-stylex#working-with-external-stylex-files

It's possible that the plugin doesn't work with the stable release of Remix, I built Remix support using the early previews. I might need to look deeper into this but I'm very busy these days.

If you can provide a repo that reproduces the issue and maybe a loom, that would be great.

Thanks!

[BMCwebdev]

I did try that, yes. Perhaps it is the new stable vitePlugin.

[BMCwebdev]

I got it working by adding this to the vite config

  ssr: {
    noExternal: ['@acme/library-ui'],
  },

I am not using any other config option (no build rollup option, no optimizeDeps options). It is importing the css twice when I look in the browser inspector, but I'll deal with that for now, just happy to get it working. Build is still working too, at least the CSS is compiled and no errors.

[BMCwebdev]

Hmmm, not sure ssr noExternal actually fixed anything.

[HorusGoul]

Shipped a new release of the plugin with a few fixes for Remix and an API for configuring external libraries that include StyleX styles.

When you have the time, please update to 0.6.0, and remove the noExternal stuff. You can configure the plugin like this:

styleX({
  libraries: ['@acme/library-ui'],
})

This should fix the problem (as long as your library is configured in a similar way to @stylexjs/open-props).

"[plugin:vite-plugin-stylex] Could not find root.css file. Did you import styles in the root of your Remix app?"

This should be fixed as well

It is importing the css twice when I look in the browser inspector, but I'll deal with that for now

This is a problem of the Remix plugin that only happens on dev: https://github.com/remix-run/remix/issues/8830

[BMCwebdev]

You did it man! Thank you so much! Working beautifully.

[HorusGoul]

@BMCwebdev love to hear this! closing the issue, thanks for the report 🎉

[predaytor]

Is LightningCSS supported in Remix (Vite)?