spectrum with nobuild esm.sh

[uvilop]

Can you use react-spectrum with nobuild esm.sh/cdn?
Is there a working example somewhere?

I've got it "almost" running, but the styles aren't working because all CSS classes are prefixed with a random prefix.
Can this be disabled?

[snowystinger]

I don't believe we've tried this. Would you be willing to put together a minimal example in a github project? I'm not sure how the prefix would be applied if there was no build? but i'm also not familiar with how these are setup

[uvilop]

Attached you find a minimal example. Put it in a web server and load index.html .
It will render the buttons unstyled because of the css class name prefixes.

<button class="o7Xu8a_spectrum-Button o7Xu8a_spectrum-BaseButton o7Xu8a_i18nFontFamily o7Xu8a_spectrum-FocusRing o7Xu8a_spectrum-FocusRing-ring NekGBa_spectrum-ButtonGroup-Button" type="button" tabindex="0" data-react-aria-pressable="true" id="react-aria9196956617-«r4»" data-variant="accent" data-style="outline"><span role="none" id="react-aria9196956617-«r6»" class="o7Xu8a_spectrum-Button-label">Button</span></button>
minimal.zip

[snowystinger]

apologies, but I'm not going to download and open a zip. Can you put this in a stackblitz or codesandbox or into a github repo or gist where it can be viewed without needing to download anything?

[uvilop]

ok:

stackblitz

[snowystinger]

Thanks, so the issue is that we use css modules, which adds a random hash prefix in our dist, but not our source?
Or where is esm.sh actually getting the code for each component from?

[uvilop]

esm.sh builds js-esm modules directly from the github or npm repository.
import example
component example
the jsdelivr cdn serves static content from the spectrum-css npm distribution; this contains css without prefixes.

in the browser babel compiles the jsx in App.jsx on the fly into a react js datastructure.
probably somewhere in the react-create of the dom the prefixes get added.
and then the prefixed css-classes in dom do not match the static ones in the spectrum-css stylesheets.

[snowystinger]

How can this possibly account for all the build things we may do that are non-standard? I think I'm still not quite understanding this project.

Wait, I think I see the issue. You're using the css from Spectrum CSS? as in https://github.com/adobe/spectrum-css via https://www.npmjs.com/package/@adobe/spectrum-css ?

This will have other issues, we have a fork of spectrum css because we've diverged from their implementation. This happened a long time ago for technical reasons, so there is probably a lot of delta. Can you access the CSS we ship at https://app.unpkg.com/@react-spectrum/[email protected]/files/dist/buttongroup.807718ea.css ?

What happens if we do other things in our build that this project doesn't take into account?

What do other projects that have css modules do? do you have examples?
It looks like all the needed information is in https://esm.sh/@react-spectrum/[email protected]/X-ZHJlYWN0QDE5LjEuMA/es2022/buttongroup.development.mjs I can see the mappings for the css classnames at the top, though not sure how you can access that yourself, you'd have to get creative.

Also, you can reply in this thread instead of creating a new answer each time, makes it easier to track the conversation.

[uvilop]

in fact with this buttongroup.807718ea.css the layout looks correct, thank you!
could you please tell me where i can find documentation on that spectrum-css-fork, the why and how.
"807718ea" is not easy to guess.

some other ui libraries i had a look at, dont use such prefixes. for example mantine and radix use plain and readable css, and including a styles.css file is all that is needed.

why this project: actually i think there are 2 aspects. on one hand a nobuild environment can be an convenient starting point for newcomers and also for experimenting with layouts. on the other hand in my case it is actually about dynamically generating a react-based layout from within a java server, without any nodejs/tsx, thats why there can be no build-stage.

[snowystinger]

You'd need to look up the css for each package, that information is in the dist for each package, so you could script it ahead of time for a particular version of each package.

There unfortunately is no documentation on the spectrum-css-fork, we'd always hoped to get back to the original, but that never materialised due to a variety of reasons.

some other ui libraries i had a look at, dont use such prefixes. for example mantine and radix use plain and readable css, and including a styles.css file is all that is needed.

Sure, but I asked specifically for other projects that use css modules. https://github.com/css-modules/css-modules There are many reasons for using something like this, but not everyone chooses to.

I agree that this tool would be very convenient, but it's going to come with trade offs like every tool. It appears it doesn't handle some build choices that developers make out of the box, so you'll have to account for and find ways to work around them. Or you'll need to revisit your decision to use the tool. Or you'll need to revisit your decision to use React Spectrum. For instance, you could use the unstyled React Aria Components, and provide your own CSS, and distribute your own components on npm where esm.sh can use them. You could even use Spectrum CSS to style the React Aria Components if you wanted.

[uvilop]

yes, there remains a lot to consider and compare.
thanks for your helping answers & suggestions.