Layer dependencies break utility css solutions (like tailwindcss)

[ZeroAurora]

Related: #233 ant-design/x#1588 ant-design/x#559 ant-design/ant-design#56015

Currently, if a layer has dependencies, cssinjs will prepend a @layers deps..., layer.name at the front of header, effectively setting all of these layers the lowest priority.

cssinjs/src/hooks/useStyleRegister.tsx

Lines 485 to 493 in e964b75

	// ================= Inject Layer Style =================
	// Inject layer style
	effectLayerKeys.forEach((effectKey) => {
	updateCSS(
	normalizeStyle(effectStyle[effectKey], autoPrefix || false),
	`_layer-${effectKey}`,
	{ ...mergedCSSConfig, prepend: true },
	);
	});

When importing a css in code with bundlers like vite, the css is always placed after the very first @layers statement, therefore having higher priorities.

This has caused multiple issues when used together with utility css solutions like tailwindcss. See the related issues above, which illustrate lots of problems caused by this issue.

For example, it breaks the intended behavior of Ant Design, when used together with Ant Design X. Minimal reproducible project here. To put it simple: If you are developing with antd + antd/x + tailwindcss, it just breaks.

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!