Description

Closes #4698

Problem:

When either the $theme-global-content-styles or $theme-global-paragraph-styles settings are set to true, styles from normalize.css take precedence over some USWDS global typography styles . Because normalize.css is reset CSS, it should not take precedence over any USWDS styles.

This issue is demonstrated with vertical margin issues between text elements (outlined in #4698)

Solution:

This precedence issue is happening because normalize CSS is not compiling at the top of the file:

Because normalize does not reside at the top of the compiled file, it can take precedence over any compiled USWDS styles that come before it.

Moving the @forward references for normalize above uswds-core will reorder the compiled CSS, and bring normalize to the top of the file.

Testing:

1. Create test USWDS project
2. Set $theme-global-content-styles to true
3. Compile CSS
4. Create and open a file with this sample html:

   <h1>Headline</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et aliquet ligula. Donec nec varius turpis. Pellentesque vehicula egestas maximus. </p>
   <p>Nunc a quam vel felis sollicitudin euismod. Vivamus dolor ex, lobortis non elit vel, tempor viverra augue. Nulla facilisi. Ut scelerisque ante at nunc pretium, vitae pellentesque massa auctor. Morbi non accumsan nunc, et bibendum nisi. Ut dapibus euismod laoreet. Nunc eu tortor euismod dui porta pulvinar.</p>
   <button class="usa-button">Button</button>

5. Confirm that normalize appears at the top of uswds.css
6. Perform visual checks on the html file to confirm that USWDS global styles are taking precedence. Some sample styles to check:
   • Headlines should have margin-top: 0 and margin-bottom: 0
   • <button> should have margin-top: 1em

Additional information

Before you hit Submit, make sure you’ve done whichever of these applies to you:

• Follow the 18F Front End Coding Style Guide and Accessibility Guide.
• Run npm test and make sure the tests for the files you have changed have passed.
• Run your code through HTML_CodeSniffer and make sure it’s error free.
• Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.