[Turbopack] Parsing css source code failed

[wenerme]

What version of Turbopack are you using?

latest

What package manager are you using / does the bug impact?

pnpm

What operating system are you using?

Mac

Describe the Bug

error -
  [parse]
    src/styles/dist.css
      src/styles/dist.css:2484:45  Parsing css source code failed
        2480     align-items: center;
        2481     justify-content: space-between;
        2482     gap: 1rem;
        2483     --tw-bg-opacity: 1;
        2484 >   background-color: hsl(var(--b2, var(--b1)) / var(--tw-bg-opacity));
        2485     padding: 1rem;
        2486     border-radius: var(--rounded-box, 1rem);
        2487   }

Some other error that was ok to work with

  [rendering]
    [root of the dev server]/
      Error during SSR Rendering
      timed out waiting for the Node.js process to connect

  [resolve]
    /wode/packages/utils/lib/crypto
      Error resolving URI imports: not implemented yet
      unable to resolve uri "node:" "crypto"

Expected Behavior

css working

To Reproduce

for project https://github.com/wenerme/wode under demo dir

Then

pnpm tailwindcss -i src/styles/globals.css -o src/styles/dist.css --watch

src/pages/_app.tsx change import '../styles/globals.css'; to import '../styles/dist.css';

Reproduction Repo

https://github.com/wenerme/wode

[jridgewell]

/cc @kdy1

[kdy1]

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

[padmaia]

Is this resolved in recent versions of Next.js?

[lemilonkh]

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

[maaaathis]

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

[L4Ph]

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

[RajVarsani]

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

[kdy1]

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

[m-salman-afzal]

Same here. Trying to use code for antd as:

.ant-dropdown-menu-item-selected {
  span {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  span::after {
    content: url('../assets/icons/common/check.svg');
    margin-inline-start: 0.285rem;
  }
}

and its giving:

Parsing css source code failed
  59 |
  60 | .ant-dropdown-menu-item-selected {
> 61 |   span {
     |        ^
  62 |     display: flex;
  63 |     justify-content: space-between;
  64 |     align-items: center;

Expected ":"

[pietertolsma]

Any update on this issue?

[rwieruch]

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

[SpinBoxx]

pls fix 😭

[ForsakenHarmony]

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

[rinvii]

I'm also getting a similar error

[dylanirion]

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

[walid-mos]

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

[kdy1]

@walid-mos Please file a new issue with a minimal reproducion

[edmondwinston]

For what it's worth, it's fine on my side on latest Next.js (14.2.3) and Tailwind v3.4.0.

[connorblack]

FWIW, I just decided to try out the @nextui-org/react (@nextui) component lib in a new project. Getting this w/ dev turbo:

./src/styles/globals.css:421:30
Parsing css source code failed
  419 |     --background: ({ opacityVariable, opacityValue }) => {
  420 |           if (!isNaN(+opacityValue)) {
> 421 |             return `hsl(var(${nextuiColorVariable}) / ${opacityValue})`;
      |                              ^
  422 |           }
  423 |           if (opacityVariable) {
  424 |             return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, var(${opacityVariable})))`;

Unexpected token Delim('$') at [project]/src/styles/globals.css:420:29

• "tailwindcss": "^3.4.3"
• "next": "14.3.0-canary.28"
• "@nextui-org/react": "^2.3.6"

[connorblack]

@kdy1 is there a related issue open?

[Elmosh]

FWIW, I just decided to try out the @nextui-org/react (@nextui) component lib in a new project. Getting this w/ dev turbo:

./src/styles/globals.css:421:30
Parsing css source code failed
  419 |     --background: ({ opacityVariable, opacityValue }) => {
  420 |           if (!isNaN(+opacityValue)) {
> 421 |             return `hsl(var(${nextuiColorVariable}) / ${opacityValue})`;
      |                              ^
  422 |           }
  423 |           if (opacityVariable) {
  424 |             return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, var(${opacityVariable})))`;

Unexpected token Delim('$') at [project]/src/styles/globals.css:420:29

• "tailwindcss": "^3.4.3"
• "next": "14.3.0-canary.28"
• "@nextui-org/react": "^2.3.6"

Same exact error for all new nextjs releases after 14.1.4, @connorblack did you found a work around?

[Elmosh]

It turned out my issue was caused by a custom tailwind plugin:

function addVariablesForColors({ addBase, theme }) {
  let allColors = flattenColorPalette(theme("colors"));
  let newVars = Object.fromEntries(
    Object.entries(allColors).map(([key, val]) => [`--${key}`, val]),
  );

  addBase({
    ":root": newVars,
  });
}

Once removed then all worked out fine with turbo & latest Next & nextui

[connorblack]

@Elmosh that code looks familiar...