Usage in Frontity framework (NextJs like framework for a wordpress frontend)

[emexal-company]

🔦 Context

I'm trying to create a frontend for wordpress. The frontend is based on the framework Frontity, that provides an SSR rendering for React, coupled with some webpack/babel generation. I have integrated React Spectrum, and the result is that the CSS is not rendered. I'm trying to figure out what is missing. I saw that for NextJs, there is a special configuration. Any help would be appreciated.

💻 Code Sample

To reproduce what I'm seeing, you might run the following

git clone -v [email protected]:emexal-company/emexal-website.git
cd emexal-website
git checkout 6bd7bea9a1d98286307b34483ace0795d2222edb
yarn
yarn frontity dev

[snowystinger]

sorry to hear you're having trouble with SSR and our project. couple quick questions.
are you running into this? #1156
otherwise have you followed this? https://react-spectrum.adobe.com/react-spectrum/ssr.html#nextjs

[emexal-company]

Actually, everything is building OK, and I have no error message. So, I don't think it is the same issue as #1156. Also, the Frontity framework is not based on NextJs, so the integration might be different. I think the problem is mainly related to how to integrate external css files inside the project. It is described in this link, but I'm not sure how to apply it to React Spectrum.

[snowystinger]

So, short of trying to write your own plugin to walk all of our packages and bring the CSS up as a Global, I'm not sure how much we can actually do. It seems like it might make more sense to open an issue on Frontity to allow importing CSS.

[emexal-company]

I ended up with adding

import defaultThemeCss from '@react-spectrum/theme-default/dist/main.css';
import darkThemeCss from '@react-spectrum/theme-dark/dist/main.css';
import lightThemeCss from '@react-spectrum/theme-light/dist/main.css';
import buttonCss from "@react-spectrum/button/dist/main.css";
...
<Global styles={css(darkThemeCss)} />
<Global styles={css(lightThemeCss)} />
<Global styles={css(defaultThemeCss)} />
<Global styles={css(buttonCss)} />