Consequences of absent main.css with 'yarn start' (Sage 9)

So, I know this thread (Sage 9 main.css 404 on devUrl) has been locked for whatever reason, but I have two new complaints to add to the list of inconveniences related to the absence of main.css while having yarn start running.

One of the contributors to that thread pointed out another shortcoming: Using the TinyMCE’s editor in the backend, if your session isn’t a BrowserSync session, doesn’t work great because the browser can’t find main.css to style it the way you’d expect it to be styled. In my case, it’s unable to show the CSS whether I access the backend via localhost:3000 or devurl.dev. The only way I can see the TinyMCE styles is if I had just run yarn build without yarn start running.

That seems like a pretty serious dev workflow shortcoming, considering how sweet it is that Sage provides TinyMCE styling out of the box; you’d think it’s something you’d want the developer to be able to test easily while having yarn start running in the background.

And here’s another problem I’m coming up against: Right now I’m working on my theme’s UX as it relates to initial page load, which involves hidden content and transitions that reveal content. It’s not playing nicely with the way the CSS is getting injected via JS because of how the page first starts with no CSS, and initial styling of elements is affected as a result, which interferes with my JS revealing code. I’m trying to test this as closely from the point of view of a member of the public as possible, from the initial page load, so I’m deliberately bypassing BrowserSync to run these tests (accessing directly via devurl.dev). But even on devurl.dev the loading of CSS is noticeably delayed and causing problems with the UX; I guess webpack is what injects the CSS?

I need that CSS to be available as an up-to-date, static file to test my theme properly.

The only alternative is for me to halt yarn start and each time I change the code, run yarn build, then reload the page. Even just not having to run yarn build every time would make my life a lot easier.

With Sage 8, I had none of these issues. But in Sage 9, this is really proving to be a nuisance.

Anyone else here feeling similarly? And is there something I can easily do in the build scripts to ensure main.css is preserved and kept up to date while yarn start is running?

2 Likes