Build Error: Parsing css source code failed

[balaji-sivasakthi]

Link to the code that reproduces this issue

https://github.com/balaji-sivasakthi/turbo-css-parser-issue

To Reproduce

1. Clone the repo.
2. Install dependencies using npm install.
3. Start the development server with npm run dev.

Running without Turbo works fine, but with Turbo, the session is not working properly. It seems there is a problem with the CSS parser.

Current vs. Expected behavior

Current

When running the application with Turbo, the session is not functioning correctly due to issues with the CSS parser.

Expected behavior

The application should function correctly with Turbo, without any issues related to the CSS parser.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:19:05 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T8112
  Available memory (MB): 8192
  Available CPU cores: 8
Binaries:
  Node: 18.19.1
  npm: 10.8.0
  Yarn: 1.22.21
  pnpm: 8.15.8
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: 14.2.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Font (next/font), Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

Build Error
Failed to compile

Next.js (14.2.3) (turbo)
./node_modules/@formio/js/dist/formio.full.min.css:5:97528
Parsing css source code failed
3 | * Copyright 2019-2024 The Bootstrap Authors
4 | * Licensed under MIT (https://github.com/twbs/icons/blob/main/LICENSE)

5 | /@font-face{font-display:block;font-family:bootstrap-icons;src:url(fonts/bootstrap-icons.woff2?dd67030699838ea613ee6dbda90effa6) format("woff2"),url(fonts/bootstrap-icons.woff?dd67030699838ea613ee6dbda90effa6) format("woff")}.bi::before,[class=" bi-"]::before,[class^=bi-]::before{display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:400!important;font-variant:normal;text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.bi-123::before{content:"\f67f"}.bi-alarm-fill::before{content:"\f101"}.bi-alarm::before{content:"\f102"}.bi-align-bottom::before{content:"\f103"}.bi-align-center::before{content:"\f104"}.bi-align-end::before{content:"\f105"}.bi-align-middle::before{content:"\f106"}.bi-align-start::before{content:"\f107"}.bi-align-top::before{content:"\f108"}.bi-alt::before{content:"\f109"}.bi-app-indicator::before{content:"\f10a"}.bi-app::before{content:"\f10b"}.bi-archive-fill::before{content:"\f10c"}.bi-archive::before{content:"\f10d"}.bi-arrow-90deg-down::before{content:"\f10e"}.bi-arrow-90deg-left::before{content:"\f10f"}.bi-arrow-90deg-right::before{content:"\f110"}.bi-arrow-90deg-up::before{content:"\f111"}.bi-arrow-bar-down::before{content:"\f112"}.bi-arrow-bar-left::before{content:"\f113"}.bi-arrow-bar-right::before{content:"\f114"}.bi-arrow-bar-up::before{content:"\f115"}.bi-arrow-clockwise::before{content:"\f116"}.bi-arrow-counterclockwise::before{content:"\f117"}.bi-arrow-down-circle-fill::before{content:"\f118"}.bi-arrow-down-circle::before{content:"\f119"}.bi-arrow-down-left-circle-fill::before{content:"\f11a"}.bi-arrow-down-left-circle::before{content:"\f11b"}.bi-arrow-
No response

[timneutkens]

Was able to verify that the root cause is this package CSS file you're using: https://unpkg.com/@formio/js@5.0.0-rc.48/dist/formio.full.min.css

When that is put into the Lightning CSS playground it highlights an error on this declaration:

.formio-dialog.formio-dialog-theme-default .formio-dialog-buttons {
  *zoom: 1;
}

Specifically * is invalid here so it fails to compile. I did some digging as to why someone might add that * in front of a property, turns out it's related to IE7. Seems that library can safely remove that CSS rule as it's invalid CSS 🤔

Specific code is here: https://github.com/formio/formio.js/blame/e1f926e090cf6d36e7cd05e58fb231a939b3ab30/src/sass/formio.form.scss#L703-L705

[balaji-sivasakthi]

@timneutkens how it is being parsed in normal mode? Only happened in turbo mode

[timneutkens]

With webpack we use postcss currently, which is much slower.

[timneutkens]

I've opened a PR to remove the invalid CSS from the library that you're using: formio/formio.js#5635.

[timneutkens]

They landed the change! I'm going to close this issue as it's not a bug in Turbopack 🙏 Thanks for the report though!

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.