No css style file generated

[husseinzchi]

I tried the extension and I am not getting any error during the build process. However, there is no style css file get generated.

[nedjulius]

hey @husseinzchi , can you provide your example build script setup?

there are some issues that I am currently trying to figure out. in specific, babel compiler silently fails when defineVars is used, and emits no transformations.

[husseinzchi]

@nedjulius

Sure, below is the script. Please note that I removed some details like entrypoints, outdir, etc.

import path from 'node:path';
import createStylexPlugin from 'bun-plugin-stylex';

const [stylexPlugin, generateCSS] = createStylexPlugin({
  dev: false,
  unstable_moduleResolution: { type: 'haste' },
  stylexImports: ['@stylexjs/stylex'],
});

let entrypoints = []

if (Bun.argv[2] == "build"){
  build()
}
else if (Bun.argv[2] == "debug"){
  build() 
}

async function build() {
  await Bun.build({
    entrypoints: entrypoints,
    outdir: '',
    plugins: [stylexPlugin],
    target: 'browser',
    format: "esm",
    sourcemap: "none",
    splitting: false,
    minify: false,
  })
}

const generatedCSS = await generateCSS();
if (generatedCSS) {
  await Bun.write(path.resolve(__dirname, ''), generatedCSS);
}

[nedjulius]

thanks. I will look into it over the next few days. do you happen to use stylex.defineVars method?

[husseinzchi]

I think the organic approach should be without use of Babel. Because Bun itself is a compiler. Please, see the below sample of the extension that I tried to develop

`
import { plugin } from 'bun';
import { buildSync } from '@stylexjs/stylex';

const stylexPlugin = {
name: 'stylex-bun-plugin',
setup(build) {
build.onResolve({ filter: /.css$/ }, async (args) => {
// Mark the import as external to skip processing by other plugins
return { path: args.path, external: true };
});

build.onLoad({ filter: /\.(js|ts)x?$/ }, async (args) => {
  const source = await Bun.file(args.path).text();

  // Check if the file contains StyleX styles
  if (source.includes('stylex.create')) {
    const result = buildSync({
      entrypoints: [args.path],
      // Configure other StyleX options as needed
    });

    if (result.success) {
      // Replace StyleX styles with compiled CSS class names
      let code = source;
      for (const output of result.outputs) {
        code = code.replace(
          /stylex\.create\(([^)]+)\)/g,
          (match, styles) => {
            return JSON.stringify(output.exports);
          }
        );
      }

      return {
        contents: code,
        loader: 'jsx', // or 'tsx' for TypeScript files
      };
    } else {
      // Handle StyleX compilation errors
      console.error('StyleX compilation failed:', result.logs);
      throw new Error('StyleX compilation failed');
    }
  }

  // Let Bun's built-in loader handle the file
  return {
    contents: source,
    loader: 'jsx', // or 'tsx' for TypeScript files
  };
});

},
};

export default plugin(stylexPlugin);
`

[husseinzchi]

defineVars

No, didn't use that

[nedjulius]

you can try changing the unstable_moduleResolution to { type: 'commonJS', rootDir: process.cwd() } in the meantime. also make sure that the line await Bun.write(path.resolve(__dirname, ''), generatedCSS); contains correct output file.

regarding your suggestion about standalone implementation without Babel -- I don't think it's viable because of a few reasons:

1. StyleX itself is a Babel plugin and relies on Babel AST to make necessary code transformations
2. AFAIK Bun does not currently expose AST, so tools like Babel are still necessary to perform robust code transformations (see issue Support AST transforms oven-sh/bun#2729); similar approach is used with other StyleX plugins that target esbuild or Vite

[husseinzchi]

@nedjulius thank you for the detailed response and clarification about the AST. My understanding of web development is very limited and high level lol

I will keep you posted about trying commonJS instead of haste

https://www.linkedin.com/in/husseinzchi/
This is my linkedin profile. Feel free to connect. We might have an open position for react+styleX in the upcoming months if thats of interest to you

[nedjulius]

@husseinzchi okay, so I've found a temporary solution to one of the main compatibility issues between Bun runtime and StyleX compiler. I published the updated version of this plugin as 1.0.1 -- you can try to update it in your project and see if your problems persist.

I also created an example app that demonstrates usage of Bun with StyleX

[husseinzchi]

@nedjulius awesome, thank you so much. I will test it out and will keep you updated