[BUG] Cannot read properties of undefined (reading 'insertAfter')

[BleedingDev]

Hi,
I tried to use this plugin and it fails with following error:

start   Building...
<e> [webpack-dev-middleware] [Error:   × TypeError: Cannot read properties of undefined (reading 'insertAfter')
<e>   │     at Root.after (D:\Side\nmit-coursition\node_modules\.pnpm\r[email protected]_@[email protected][email protected][email protected]_@swc+c_iea46vmxfpnftq2zpelg5joqme\node_modules\rsbuild-plugin-tailwindcss\dist\880.cjs:1633:29)
<e>   │     at partitionRules (D:\Side\nmit-coursition\node_modules\.pnpm\t[email protected][email protected]_@[email protected]_@[email protected]__@[email protected][email protected]_\node_modules\tailwindcss\lib\lib\partitionApplyAtRules.js:49:18)
<e>   │     at D:\Side\nmit-coursition\node_modules\.pnpm\t[email protected][email protected]_@[email protected]_@[email protected]__@[email protected][email protected]_\node_modules\tailwindcss\lib\lib\partitionApplyAtRules.js:56:9
<e>   │     at D:\Side\nmit-coursition\node_modules\.pnpm\t[email protected][email protected]_@[email protected]_@[email protected]__@[email protected][email protected]_\node_modules\tailwindcss\lib\processTailwindFeatures.js:54:46
<e>   │     at async plugins (D:\Side\nmit-coursition\node_modules\.pnpm\t[email protected][email protected]_@[email protected]_@[email protected]__@[email protected][email protected]_\node_modules\tailwindcss\lib\plugin.js:38:17)
<e>   │     at async LazyResult.runAsync (D:\Side\nmit-coursition\node_modules\.pnpm\r[email protected]_@[email protected][email protected][email protected]_@swc+c_iea46vmxfpnftq2zpelg5joqme\node_modules\rsbuild-plugin-tailwindcss\dist\880.cjs:949:25)      
<e>   │     at async D:\Side\nmit-coursition\node_modules\.pnpm\r[email protected]_@[email protected][email protected][email protected]_@swc+c_iea46vmxfpnftq2zpelg5joqme\node_modules\rsbuild-plugin-tailwindcss\dist\index.cjs:268:49
<e>   │     at async Promise.all (index 0)
<e>   │     at async D:\Side\nmit-coursition\node_modules\.pnpm\r[email protected]_@[email protected][email protected][email protected]_@swc+c_iea46vmxfpnftq2zpelg5joqme\node_modules\rsbuild-plugin-tailwindcss\dist\index.cjs:264:21
<e>   │     at async Promise.all (index 0)
<e>   │     at async Object.fn (D:\Side\nmit-coursition\node_modules\.pnpm\r[email protected]_@[email protected][email protected][email protected]_@swc+c_iea46vmxfpnftq2zpelg5joqme\node_modules\rsbuild-plugin-tailwindcss\dist\index.cjs:237:17)
<e>   │ 
<e> ] {
<e>   code: 'GenericFailure'
<e> }

Anything I should do differently? :) I am trying to consume UI Library (Shadcn) and also use styles in the app (I have Nx Monorepo, which I can share).

[colinaaa]

Hi @BleedingDev, it would be great if you could provide the repo that can re-produce this problem

[BleedingDev]

Sure thing, I'll try to do minimal reproduction example, sorry for not adding it immediately.

In the end I got it working, but without the plugin. Here's the app inside Nx Monorepo.
https://github.com/NaucMeIT/web/tree/master/apps/coursition-new-rs

I had to remove this plugin from RsBuild config, so it's not there as of now.

[colinaaa]

Hi @BleedingDev, I would be able to reproduce this with a minimal reproduction.

It seems like the lightningcss-loader of Rspack is transforming

@layer base {
  * {
    @apply rounded-none;
  }
}

into

@layer base {
  @apply rounded-none;
}

which makes Tailwind CSS not working.

You may temporarily disable lightningcss-loader by setting tools.lightningcssLoader to false.

We would make more investigation on this issue(maybe disable tools.lightningcssLoader in rsbuild-plugin-tailwindcss).

Thank you for your reporting.