CSS.escape compatibility issues with Vite + Rolldown - seeking alternatives

[hranum]

Hey everyone! 👋

I'm running into an issue with the css.escape dependency introcued in 1.6.1 when using Vite with the new Rolldown bundler. Getting this error in the console when running the app after bundling.

Uncaught TypeError: Cannot read properties of undefined (reading 'CSS')

css.escape was introduced to replace encodeURIComponent in 1.6.1 1482

The problem seems to be that Rolldown handles global object resolution differently than traditional Rollup, causing the UMD wrapper in css.escape to receive undefined as the root parameter instead of the expected global object.

Tried different rollup options to no avail so I've temporarly patched css.escape

diff --git a/css.escape.js b/css.escape.js
index 397cf88d318d7201bd282c5427253c418708ced8..90ef0eef7c4cf2344f95b400352ebf6b51e6fdaa 100644
--- a/css.escape.js
+++ b/css.escape.js
@@ -11,7 +11,7 @@
 		// For browser globals (not exposing the function separately).
 		factory(root);
 	}
-}(typeof global != 'undefined' ? global : this, function(root) {
+}(globalThis, function(root) {
 
 	if (root.CSS && root.CSS.escape) {
 		return root.CSS.escape;

Just wondering if this is something for bits-ui to keep in mind when rolldown eventually becomes standard, and if there could be alternatives to css.escape instead of shimming globalThis etc.

What's your thoughts?

[huntabyte]

I was under the impression that rolldown vite is going to be a "drop in replacement", so perhaps this is something that will be addressed before it goes live?

[hranum]

I was too. Maybe someone else stumble upon this and can use the patch if they experience the same issue. From a gazillion dependencies this interestingly the only one that breaks.

[fehnomenal]

I am getting this error:

With the path above applied, the error goes away and everything works.

Upstream this issue exists: mathiasbynens/CSS.escape#12

[huntabyte]

Will be resolved for Bits UI shortly #1608