[Bug Report]: css-loader errors occurred while using tailwindcss. about rspack HOT 2 CLOSED

Is it as expected?

Yes

Why

The TailwindCSS does text match regardless of language syntax to find classes and produce css.

So when tw see text bg[url(someting)], it produces .bg-\[url\(something\)\] { background-image: url(something); }.

When tw see see text bg-[url(${something})], it produces .bg-\[url\(\$\{something\}\)\] { background-image: url(${something}); }

Then the rspack see url(xyz) in the css "module", it starting to resolve the module xyz.

Way out?

To stop rspack/rsbuild resolving the module xyz, set output.externals = [/xyz/] to rsbuild.config.ts

Will things work now?

After stopping the resolving, .bg-\[url\(something\)\] { background-image: url(something); } will work but .bg-[url(${something})] { background-image: url(${something}); }` won't as the latter is of invalid css syntax.

You should never write dynamic class names in tw: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

from rspack.

Is it as expected?

Yes

Why

The TailwindCSS does text match regardless of language syntax to find classes and produce css.

So when tw see text bg[url(someting)], it produces .bg-\[url\(something\)\] { background-image: url(something); }.

When tw see see text bg-[url(${something})], it produces .bg-\[url\(\$\{something\}\)\] { background-image: url(${something}); }

Then the rspack see url(xyz) in the css "module", it starting to resolve the module xyz.

Way out?

To stop rspack/rsbuild resolving the module xyz, set output.externals = [/xyz/] to rsbuild.config.ts

Will things work now?

After stopping the resolving, .bg-\[url\(something\)\] { background-image: url(something); } will work but .bg-[url(${something})] { background-image: url(${something}); }` won't as the latter is of invalid css syntax.

You should never write dynamic class names in tw: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

But in the webpack project and vite project there is no such error. Is it because css "module" and tree-shaking are not in the same order in rspack.

from rspack.