Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Production styles don't match development #482

Open
gsehrlich opened this issue Jun 8, 2022 · 7 comments
Open

Production styles don't match development #482

gsehrlich opened this issue Jun 8, 2022 · 7 comments
Labels

Comments

@gsehrlich
Copy link
Collaborator

gsehrlich commented Jun 8, 2022

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
Copy link
Collaborator

theecrit commented Jun 8, 2022

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
Copy link
Collaborator

theecrit commented Jun 9, 2022

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
Copy link
Collaborator

theecrit commented Jun 9, 2022

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
Copy link
Collaborator Author

gsehrlich commented Jun 9, 2022

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
Copy link
Collaborator

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

@gsehrlich
Copy link
Collaborator Author

gsehrlich commented Dec 14, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants