Bug - having troubles building with parcel bundler #9624
Description
Describe the problem
Trying to use PF5 with parcel. Getting the following after importing @patternfly/react-core
🚨 Build failed.
@parcel/transformer-css: Unexpected token Ident("false")
/path/to/project/node_modules/@patternfly/react-styles/css/components/Banner/banner.css:118:14
117 | :where(.pf-v5-theme-dark) .pf-v5-c-banner {
> 118 | color: var(false);
> | ^
119 | }
120 | :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-blue, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-red, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-green, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-gold {
How do you reproduce the problem?
I don't have a minimal reproduction of the issue at the moment.
Expected behavior
To be able to import patternfly and use the components in a basic sense.
Is this issue blocking you?
Not blocking anything, but preventing me from integrating PF in an existing project (it's currently using material-ui)
What is your environment?
- OS: MacOS
- Browser: any
- Version: latest PF5 as of 9/14/23
Any other information?
I also tried just importing @patternfly/patternfly and noticed that when using this import from within a tsx file import "@patternfly/patternfly/patternfly.css"; it causes a similar build failure
🚨 Build failed.
@parcel/transformer-css: Unexpected token Ident("false")
/path/to/project/node_modules/@patternfly/patternfly/patternfly.css:6871:14
6870 | :where(.pf-v5-theme-dark) .pf-v5-c-banner {
> 6871 | color: var(false);
> | ^
6872 | }
6873 | :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-blue, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-red, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-green, :where(.pf-v5-theme-dark) .pf-v5-c-banner.pf-m-gold {
Switching that import to import "@patternfly/patternfly/patternfly-base.css"; allowed the build to succeed, but it doesn't style the raw pf component markup.
Maybe I'm missing something config-wise for parcel (I'm new to using that) - if there's any special config/setup we need to do when using pf with parcel, it would be cool to have an example or doc somewhere. Maybe something to include in the seed repo as a wiki or something? Thanks in advance for any insights!