You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
[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 />));
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
TODO:
[ ] cockpit-po-plugin
[ ] fail on warnings eslint (Open eslint issue eslint/eslint#16804)
[ ] string replace loader does not work
[ ] css from Patternfly is not being extracted [1]
[1] evanw/esbuild#2905
KKoukiou
changed the title
Imported CSS files in JS are not extracted to the index.css bundled file
[react app] Imported CSS files in JS are not extracted to the index.css bundled file
Feb 9, 2023
KKoukiou
added a commit
to KKoukiou/cockpit-podman
that referenced
this issue
Feb 9, 2023
TODO:
[ ] cockpit-po-plugin
[ ] fail on warnings eslint [0]
[ ] string replace loader does not work
[ ] css from Patternfly is not being extracted [1]
[0] eslint/eslint#16804
[1] evanw/esbuild#2905
Hi @evanw and thanks for the project!
I am currently trying to port cockpit project from
webpack
toesbuild
and I have hit some issue with imported css files not getting extracted in the bundledindex.css
.Here is a minimal reproducer:
Install npm dependencies for the reproducer:
Create a test.jsx file as:
And finally bundle it:
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
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.
And in turn, button.js imported the CSS file that we want to get extracted like this:
Any hints if this is not a bug are greatly appreciated.
The text was updated successfully, but these errors were encountered: