Upgrading to 6.12.1 broke build

cogor commented 3 months ago

Environment

Operating System: Darwin
Node Version: v20.16.0
Nuxt Version: 3.12.4
CLI Version: 3.12.0
Nitro Version: 2.9.7
Package Manager: pnpm@9.0.6
Builder: -
User Config: devtools, components, css, modules, routeRules, vite, runtimeConfig, app, site, ogImage, shadcn, veeValidate, compatibilityDate
Runtime Modules: @nuxtjs/tailwindcss@6.12.1, @pinia/nuxt@0.5.2, @vueuse/nuxt@10.11.0, unplugin-icons/nuxt, @nuxt/image@1.7.0, @nuxtjs/partytown@1.5.0, @nuxtjs/seo@2.0.0-rc.16, shadcn-nuxt@0.10.4, @vee-validate/nuxt@4.13.2
Build Modules: -

Reproduction

No response

Describe the bug

After upgrade to 6.12.1 I can't build app

Additional context

Satori(used in og image and nuxt/seo) can't get tailwind config and variables, I store variables in ~/assets/css/tailwind.css

Logs

ERROR  [nuxt] [request error] [unhandled] [500] Unexpected token type: function                                                                                          6:11:12 PM
  in CSS rule borderRadius: calc(undefined + 4px).
  at qr (./node_modules/.pnpm/satori@0.10.14/node_modules/satori/dist/index.js:3:62302)
  at Pn (./node_modules/.pnpm/satori@0.10.14/node_modules/satori/dist/index.js:5:1502)
  at async qt (./node_modules/.pnpm/satori@0.10.14/node_modules/satori/dist/index.js:5:52529)
  at async qt (./node_modules/.pnpm/satori@0.10.14/node_modules/satori/dist/index.js:5:53228)
  at async qt (./node_modules/.pnpm/satori@0.10.14/node_modules/satori/dist/index.js:5:53228)
  at async qt (./node_modules/.pnpm/satori@0.10.14/node_modules/satori/dist/index.js:5:53228)
  at async wl (./node_modules/.pnpm/satori@0.10.14/node_modules/satori/dist/index.js:6:28477)
  at async createPng (./.nuxt/prerender/chunks/_/renderer.mjs:399:15)
  at async Object.handler (./.nuxt/prerender/chunks/routes/__og-image__/image/image.mjs:277:13)
  at async Object.handler (./node_modules/.pnpm/h3@1.12.0/node_modules/h3/dist/index.mjs:1975:19)

hacknug commented 3 months ago

This doesn't seem to be an issue of this module. Your problem seems to come from satori as clearly stated in the logs and your comments.

Satori doesn't support all of Tailwind's options but if you need to use arbitrary values to round a border, you'll need to remove the calc() function from the class name (eg. rounded-[6rem+4px]).

Please note, your class would probably be invalid because you're trying to add undefined + 4px. Try adding your template to satori's playground if you're having issues with other classes. It should log the errors as warnings on the console: https://og-playground.vercel.app/

ineshbose commented 3 months ago

Many thanks for the insight @ hacknug ❤️

and thanks for opening an issue @cogor - I think some corrections in the Tailwind installation in ^6.12 exposed an underlying code that may have been problematic with proper use, so in this case it seems to be breaking satori. I think you'll need to share a reproduction of the usage where this may be being caused, so please feel free to investigate in the playground linked and continue discussion in this thread (will reopen if this really is an issue in this module).

nuxt-modules / tailwindcss