Simulator CSS Watcher

[jsfan3]

I'm making the final adjustments to theme.css in light and dark modes. However, if I leave the simulator open, the updates aren't applied. I have to close it and reopen it. For example, I had:

@media (prefers-color-scheme: dark) {
    Label,
    SpanLabel,
    SectionText,
    CheckBox,
    RadioButton {
        color: #eef2f7;
    }
}

I changed it to:

@media (prefers-color-scheme: dark) {
    Label,
    SpanLabel,
    SectionText,
    CheckBox,
    RadioButton {
        background: transparent;
        color: #eef2f7;
    }
}

But until I closed and reopened the simulator, I didn't see the change.

Do I need to do something specific to see the effect of CSS changes in real time, or does it just work sometimes and not others?

[shai-almog]

There seems to be a regression in the CSS watcher related to the bug in the localization tool. We're working on better test coverage for this and a fix: #4929

[jsfan3]

Since you're working on this aspect of the simulator, I'd like to ask you to also check the recently added light/dark mode feature. It works in principle, but the font sizes are completely wrong and sometimes it activates zoom mode for no reason. I then have to close and reopen the simulator.

Also, neither the CSS nor the localizations always reload even after closing and reopening the simulator; I first have to run a “clean” or manually remove the “target” folder to force it to recompile everything.

A little while ago, I had to delete “target” because the CSS compilation was giving me an error, but there were no syntax errors. After deleting “target,” everything started working again.

I know, I’ve listed more than one bug here without test cases. For now, I can’t do any better, because these are sporadic issues that can’t be clearly replicated in a deterministic way.

Maybe you should set up some fairly complex tests involving CSS and multilingual localization that are modified and recompiled dozens and dozens of times before you realize that something has broken at some point.

[jsfan3]

Also, please check that cn1-derive is working correctly in the dark section of the CSS. I had issues with it, so I removed it.

[shai-almog]

We have pretty complex test cases but they can't catch everything, it's a work in progress. cn1-derive is problematic in general, there are several issues I'm aware of in dark mode that are harder to tune. We'll try to reproduce these issues and see if we can come up with something.