[BUG] - Failed to compile with TURBOPACK

[kevinrss01]

NextUI Version

2.6.8

Describe the bug

After upgrading my application to Next.js 15 and enabling Turbopack, I’m encountering a CSS parsing error that prevents the project from compiling. The issue only occurs when Turbopack is active. Without Turbopack, the application builds correctly.

Environment:

• Next.js version: 15.1.2
• Build tool: pnpm
• Platform: MacOS

Build Error
Next.js (15.1.2) (Turbopack)
Failed to compile

./src/styles/globals.css:758:30
Parsing css source code failed
  756 |   --background: ({ opacityVariable, opacityValue }) => {
  757 |     if (!isNaN(+opacityValue)) {
> 758 |       return `hsl(var(${nextuiColorVariable}) / ${opacityValue})`;
      |                            ^
  759 |     }
  760 |     if (opacityVariable) {
  761 |       return `hsl(var(${nextuiColorVariable}) / var(${nextuiOpacityVariable}, var(${opacityVariable})))`;

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

Tailwind Config:

const { nextui } = require('@nextui-org/react')
const svgToDataUri = require('mini-svg-data-uri')
const {
  default: flattenColorPalette,
} = require('tailwindcss/lib/util/flattenColorPalette')

module.exports = {
  screens: {
    sm: '640px',
    md: '768px',
    lg: '1024px',
    xl: '1280px',
    '2xl': '1536px',
  },
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Poppins', 'sans-serif'],
        glegoo: ['var(--font-glegoo)'],
      },
      keyframes: {
        'scrolling-banner': {
          from: { transform: 'translateX(0)' },
          to: { transform: 'translateX(calc(-50% - var(--gap)/2))' },
        },
        'scrolling-banner-vertical': {
          from: { transform: 'translateY(0)' },
          to: { transform: 'translateY(calc(-50% - var(--gap)/2))' },
        },
      },
      animation: {
        'scrolling-banner': 'scrolling-banner var(--duration) linear infinite',
        'scrolling-banner-vertical':
          'scrolling-banner-vertical var(--duration) linear infinite',
      },
    },
  },
  variants: {
    extend: {
      borderWidth: ['after'],
      borderColor: ['after', 'group-hover'],
      width: ['after', 'group-hover'],
    },
  },
  darkMode: 'class',
  plugins: [
    nextui({
      themes: {
        light: {
          colors: {
            default: {
              DEFAULT: '#eceff1',
              hover: '#b0bec5',
            },
            primary: {
              DEFAULT: '#283374',
              hover: '#3A4A94',
            },
            danger: {
              DEFAULT: '#e30d18',
              hover: '#C10B16',
            },
          },
          components: {
            Button: {
              variants: {
                solid: {
                  default: {
                    backgroundColor: 'var(--nextui-colors-default)',
                  },
                  primary: {
                    backgroundColor: 'var(--nextui-colors-primary)',
                  },
                  danger: {
                    backgroundColor: 'var(--nextui-colors-danger)',
                  },
                },
              },
            },
          },
        },
      },
    }),
    function ({ addUtilities }) {
      addUtilities({
        '.after-border': {
          position: 'relative',
        },
        '.after-border::after': {
          content: '""',
          position: 'absolute',
          bottom: '0',
          left: '0',
          width: '0%',
          height: '2px',
          backgroundColor: 'white',
          transition: 'width 0.2s ease-in-out',
        },
        '.group-hover\\:after-border::after': {
          width: '100%',
        },
      })
    },
    addVariablesForColors,
    function ({ matchUtilities, theme }) {
      matchUtilities(
        {
          'bg-dot-thick': (value) => ({
            backgroundImage: `url("${svgToDataUri(
              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="none"><circle fill="${value}" id="pattern-circle" cx="10" cy="10" r="2.5"></circle></svg>`,
            )}")`,
          }),
        },
        {
          values: flattenColorPalette(theme('backgroundColor')),
          type: 'color',
        },
      )
    },
  ],
}

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

  addBase({
    ':root': newVars,
  })
}

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1.	Upgrade the application to Next.js 15.
2.	Enable Turbopack in the Next.js config.
3.	Run pnpm dev.
4.	Observe the parsing error in the terminal.

Expected behavior

The project should compile successfully with Turbopack enabled.

Screenshots or Videos

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-1767 [BUG] - Failed to compile with TURBOPACK

[wingkwong]

please provide a sandbox instead.

[kevinrss01]

@wingkwong https://codesandbox.io/p/github/kevinrss01/bug-next-ui/main?import=true

[theonlyway]

Just ran in to this trying to upgrade my app to Nextjs 15 as well

[wingkwong]

preliminary finding:

• seems the error occurs only when addVariablesForColors is added

[Badetuch]

Same for me, adding 'addVariablesForColors' breaks it.
Can we expect a fix?

[theonlyway]

This might not be a nextui problem then? I’m guessing we are all using some part of Aceternity UI which is what generally requires adding that function to tailwind?

[wingkwong]

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

  addBase({
    ':root': newVars,
  })
}

[Badetuch]

Although that fixed the error for me, it also alters the apperance.
Before fix (without nextui)

After (with nextui)

Turning off nextui results in less 'background lines': (hard to see on the screenshot)

[Badetuch]

@wingkwong u see u closed the issue but could you maybe take a look at this? thanks

[wingkwong]

@Badetuch u may provide a repo / sandbox link. it's hard to debug based on the screenshot.

[Badetuch]

@wingkwong here I hope this works, first time using sandbox.
https://codesandbox.io/p/github/Badetuch/website_v3/draft/runtime-waterfall
Just to summarize my issues:

1. Tailwind css doesn't apply to popover.
2. The fix for the background component you posted above makes less 'lines' appear in the background as you can see in the screenshots above. Like I said, removing 'nextUI' and reverting the fix you provided is the only way I managed to get the background fully working.

[wingkwong]

@Badetuch please make the sandbox public

[Badetuch]

@wingkwong
I've set it to public now but I'm having some trouble accessing it. Does it work for you now?

https://codesandbox.io/p/github/Badetuch/website_v3/feature