[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.

[rogerleung0411]

I encountered the same error. Strangely, in my monorepo, two apps have almost the same configuration, but only one of the apps will throw such an error. Luckily enough setting tools.lightningcssLoader to false works.

[rogerleung0411]

hi @colinaaa, i notice that rsbuild work perfectly without this plugin even not explicitly set tools.lightningcssLoader to false. what's the difference between these use cases?

my repro demo is here:
https://github.com/rogerleung0411/rsbuild-plugin-tailwindcss-issue/blob/d8b8d484939ff16bc671d5c5faf08a405c403e10/rsbuild.config.ts#L8-L15

[colinaaa]

@rogerleung0411 The same reason as I mentioned before:

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.

BTW, you could check the Loader Analysis of Rsdoctor for yourself:

[colinaaa]

When using directly with Rsbuild, the @layer and @apply are transformed by PostCSS directly: