[VisuallyHidden] Element imports CSS into JS, can this be handled in anothe way.

❔ Question

When working with <VisuallyHidden/> the currently vended copy relies on importing CSS into JS:

import "./main.css";

My project doesn’t use CSS Modules and I’d like not to add additional complexity to my build tools. Is there an alternative to this techniques that could be used and support a broader number of project contexts?

The CSS is pretty small, might even fit into a Tweet ._u-react-spectrum-screenReaderOnly_3e916{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}._u-react-spectrum-screenReaderOnly_3e916._is-focusable_3e916:active,._u-react-spectrum-screenReaderOnly_3e916._is-focusable_3e916:focus{clip:auto;-webkit-clip-path:none;clip-path:none;height:auto;margin:inherit;overflow:visible;position:static;width:auto;white-space:inherit}, hopefully there are alternative approaches to including it.

🔦 Context

Attempting to use aria hooks in a low/no build environment.

🧢 Your Company/Team

Adobe Spectrum

[devongovett]

Eh yeah, but we should solve this. Others might want to use React Aria in environments that don’t support CSS imports too.

[horacioh]

maybe this is related to this error. I made a codesandbox where is not possible to use visually-hidden or any package that uses it (like overlays) because of it: https://codesandbox.io/s/nextjs-react-aria-css-error-r33kz

any help I can do on testing or feedback let me know!