turbo: [Turbopack] Parsing css source code failed

Actually, this is a bug of leftlet. It’s not a valid syntax

Getting the same error with the turbopack and as mentioned by @Katsuyuki-Karasawa does not occur with normal next dev

Leaflet 1.9.4 Next 14.0.4

Also getting this with the leaflet package as a dependency of react-leaflet.

 ⨯ ModuleBuildError: error - node_modules/leaflet/dist/leaflet.css:538:15  Parsing css source code failed

  536 |
  537 |         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
> 538 |         filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
      |                       ^
  539 |         }
  540 |
  541 | .leaflet-oldie .leaflet-control-zoom,
Expected Declaration value

This seems to be a IE (or Edge?) specific style definition, which might not be part of the CSS standard. Can this error be fixed without adjusting the leaflet library source? Otherwise I will open an issue on their repository.

Edit: This is with NextJS 14.0.2 using npx next dev --turbo

Hey, got the same problem with Next 14.1.3 and tailwind 3.4.1 :

Parsing css source code failed
    1272 | }
    1273 | .\[a-zA-Z0-9\:\\\\-\\\\\._\$\] {
 >  1274 |   a-z-a--z0-9: \\-\\. $;
         |                     ^
    1275 | }
    1276 | .before\:absolute::before {
    1277 |   content: var(--tw-content);

 Expected Declaration value

I wanted to import a css file from a package to my app, in a turborepo monorepo

I am seeing this on Next.js 14.1.3 with tailwind 3.4.1

⨯ ./styles/global.css:1314:10
Parsing css source code failed
  1312 | }
  1313 | .cursor-\[\^\\s\] {
> 1314 |   cursor: ^\s;
       |           ^
  1315 | }
  1316 | .cursor-grab {
  1317 |   cursor: grab;

Expected Declaration value

going to close this for now as this discussion is no longer related to the original reported issue

the syntax was removed from leaflet itself more than a year ago https://github.com/Leaflet/Leaflet/commit/2daebbb4390b8e52c0b8c7bfc2074fe577f8bf73

if you’re encountering any other problems, feel free to open a new issue in the next.js repo

Having the same issue regarding react-leaflet. Opened an issue at react-leaflet: https://github.com/PaulLeCam/react-leaflet/issues/1122

Any update on this issue?

node_modules_next_3f8f89._.js?ts=1702321002203:18337 Uncaught Error: ./app/globals.css:977:22
Parsing css source code failed
  975 | }
  976 | .max-w-\[container\.sm\] {
> 977 |   max-width: container.sm;
      |                       ^
  978 | }
  979 | .max-w-lg {
  980 |   max-width: 32rem;

Expected Declaration value


    at <unknown> (Error: ./app/globals.css:977:22)
    at Object.getCompilationErrors (file://C:\Users\4ranc\Documents\github\aipictors\node_modules\next\dist\server\lib\router-utils\setup-dev-bundler.js:980:37)
    at DevBundlerService.getCompilationError (file://C:\Users\4ranc\Documents\github\aipictors\node_modules\next\dist\server\lib\dev-bundler-service.js:36:55)
    at DevServer.getCompilationError (file://C:\Users\4ranc\Documents\github\aipictors\node_modules\next\dist\server\dev\next-dev-server.js:582:42)
    at DevServer.findPageComponents (file://C:\Users\4ranc\Documents\github\aipictors\node_modules\next\dist\server\dev\next-dev-server.js:541:43)
    at async DevServer.renderErrorToResponseImpl (file://C:\Users\4ranc\Documents\github\aipictors\node_modules\next\dist\server\base-server.js:2050:26)

The above-mentioned error is occurring with Next.js 14.0.5-canary.6 (turbo) + shadcn/ui. It does not occur with the regular next dev.

https://github.com/aipictors/aipictors/issues/77#issuecomment-1850602476

Also getting this with the leaflet package as a dependency of react-leaflet.

 ⨯ ModuleBuildError: error - node_modules/leaflet/dist/leaflet.css:538:15  Parsing css source code failed

  536 |
  537 |         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
> 538 |         filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
      |                       ^
  539 |         }
  540 |
  541 | .leaflet-oldie .leaflet-control-zoom,
Expected Declaration value

This seems to be a IE (or Edge?) specific style definition, which might not be part of the CSS standard. Can this error be fixed without adjusting the leaflet library source? Otherwise I will open an issue on their repository.

Edit: This is with NextJS 14.0.2 using npx next dev --turbo

Same with NextJS 14.0.3

I’m also getting a similar error

Is this resolved in recent versions of Next.js?

Should be fixed by https://github.com/swc-project/swc/pull/6260