Production styles don't match development

[gsehrlich]

Describe the bug
In general, styles in the production version of the app on woaq.org don't match styles in the development version viewable as described in the README. Currently the most noticeable difference is font size, but it has created issues previously including #443.

See #453 for the solution to that issue. In that case, for some reason, the production app was creating extra <style> tags redundantly containing the default styles, which took priority over the CSS files with custom styles. The stopgap solution was to increase the specificity of the selectors in the CSS files so that they took priority.

Expected behavior
Building and serving the production app produces identical styles to the development version of the app.

If that cannot accomplished in general, fixing the font size is a good first step.

Affected Components (For Developers)
create-react-app uses webpack to build the production version of the app. Are there webpack settings causing e.g. the redundant <style> tags seen in #453?

[theecrit]

I feel like there may be an existing issue for this somewhere in the post-MVP project board. I'll take a look later this week if you aren't able to get to it/find it.

[theecrit]

Okay, looks like it was #296, which was closed a ways back.

I recall futzing with font size at one point to bump up text (since we'll have senior-age readers as part of our primary WOEIP Volunteer audience, readability is important). I was having trouble figuring out inheritance between Create React App and Semantic UI.

React file structure gives us app.js, which currently sets a font size, and then index.js (which references the only style in app.js — which seems redundant). Then each component gets its own css file (which I've always found problematic without documented rules for when to use the local component directory for styling exceptions).

Ideally, we'd be creating an umbrella WOAQ-specific Semantic theme to define global variables like color, fonts, header styles etc. I believe we do this by using a site.variables file:

This is the best location to store changes that will be used on a single site. A site theme can be thought of as similar to a child theme in Wordpress.

Semantic also allows you to apply themes to individual components using a theme.config but I'm not sure what the advantage is of that.

Finally, Semantic uses "definition files" to define the appearance and behavior of Semantic's individual UI elements. I'm still trying to figure out how this bit works but probably would be useful for us to know and apply if we stick with Semantic.

[theecrit]

I'm not sure any of that directly addresses the specific mismatch between the environments, though. That was mainly to help me document everything to keep it straight in my head, lol.

[gsehrlich]

No that's super helpful, thanks. It gives us more options for styling that might be consistent between the production and development versions, in case we can't figure out how to make them use the CSS files identically.

Edited OP to describe what I know about the problem so far.

[theecrit]

Cool, I'll try to read up on webpack and overall inheritance rules for React App in the interim.

[gsehrlich]

A tidbit from the official docs: https://create-react-app.dev/docs/adding-a-stylesheet/

A few relevant answers from the Internet:
https://stackoverflow.com/questions/73731487/css-module-classes-work-on-development-but-are-overridden-on-production
facebook/create-react-app#6368
https://stackoverflow.com/questions/62473898/material-ui-rendering-bugs-in-production-build/62646041#62646041
https://stackoverflow.com/questions/69449576/material-ui-why-different-css-is-shown-on-prod-environment-then-development-en
https://stackoverflow.com/questions/64179674/webpack-works-perfectly-for-development-but-production-builds-do-not-have-any-s
https://stackoverflow.com/questions/55992457/react-production-mess-up-between-css-files-for-desktop-and-mobiles

Many of these answers refer to Material UI, which makes me think our problem concerns Semantic UI. I can't find any answers specific to Semantic UI, which may be because it's less popular.

[gsehrlich]

Here's a simple starting place for problem solving. Examine the root <html> tag's styles in development and production. In development, semantic.min.css overrides index.css, giving font-size: 14px. In production, index.css overrides semantic.min.css, giving font-size: 1.1em, which probably works out to 17.6px based on a 16px default.

The problem in this case is that for some reason stylesheets are being applied in a different order in development vs. production. Seems as if the styles being duplicated in <style> tags is a different problem.