[react app] Imported CSS files in JS are not extracted to the index.css bundled file

[KKoukiou]

Hi @evanw and thanks for the project!
I am currently trying to port cockpit project from webpack to esbuild and I have hit some issue with imported css files not getting extracted in the bundled index.css.

Here is a minimal reproducer:

Install npm dependencies for the reproducer:

[koukiou@sequioa test-ebuild-patternfly]$ npm install --save-dev @patternfly/react-core react react-dom esbuild

[kkoukiou@sequioa test-ebuild-patternfly]$ cat package.json 
{
  "devDependencies": {
    "@patternfly/react-core": "^4.276.6",
    "esbuild": "^0.17.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

Create a test.jsx file as:

[kkoukiou@sequioa test-ebuild-patternfly]$ cat test.jsx 
import * as React from 'react'
import * as Server from 'react-dom/server'
import  { Button } from '@patternfly/react-core';

let Greet = () => <Button>Test</Button>;

console.log(Server.renderToString(<Greet />));

And finally bundle it:

[kkoukiou@sequioa test-ebuild-patternfly]$ ./node_modules/.bin/esbuild test.jsx --bundle --outdir=dist --external:../../assets/images/*

  dist/test.js  563.8kb

⚡ Done in 191ms

The issue is that the bundled JS file contains imported CSS that the React component i use is importing in turn. But this does not take effect of course. The expected behavior would be for the CSS files to get extracted in a seperate dist/test.css file

[kkoukiou@sequioa test-ebuild-patternfly]$ cat dist/test.js | grep -A3 'button.css'
  // node_modules/@patternfly/react-styles/css/components/Button/button.css
  var require_ = __commonJS({
    "node_modules/@patternfly/react-styles/css/components/Button/button.css"(exports, module) {
      module.exports = {};
    }
  });

A bit more detailed look: the Button react component that we import in our test.jsx, has inside another JS file import for the stylesheets.

[kkoukiou@sequioa test-ebuild-patternfly]cat node_modules/@patternfly/react-core/components/Button/Button.js | grep react-styles
import styles from '@patternfly/react-styles/css/components/Button/button';

And in turn, button.js imported the CSS file that we want to get extracted like this:

[kkoukiou@sequioa test-ebuild-patternfly]$ cat node_modules/@patternfly/react-styles/css/components/Button/button.js | head -3
"use strict";
exports.__esModule = true;
require('./button.css');

Any hints if this is not a bug are greatly appreciated.