Skip to content

Load utility classes after components#212

Merged
aduth merged 4 commits intomainfrom
aduth-utiltiies-after-components
Apr 28, 2021
Merged

Load utility classes after components#212
aduth merged 4 commits intomainfrom
aduth-utiltiies-after-components

Conversation

@aduth
Copy link
Contributor

@aduth aduth commented Apr 6, 2021

Why: To match USWDS intended load order of stylesheets, to allow utility classes to take precedence over component styles, and to facilitate a potential future use of USWDS 2.11.0 package subsetting.

USWDS loads utility stylesheets after components, allowing for those utility classes to apply usually as expected as an override to the component style selectors of equal specificity, as an alternative to resorting to $utilities-use-important.

Previously, we imported all USWDS styles prior to loading our own component overrides. Thus, the component overrides could take precedence over the utility classes. For example, it was not possible to use margin utility classes with the unstyled button (observed in 18F/identity-idp#4869).

Note that depending on the selector used for a component's styles, a utility class may still "lose" to a component's own styles. If this proves to be problematic (or is argued to be problematic now), it may be worth reevaluating to consider using the $utilities-use-important theme setting value, which applies !important to all utility classes.

Copy link
Contributor

@zachmargolis zachmargolis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@aduth aduth force-pushed the aduth-utiltiies-after-components branch from 4aa8918 to 4c62728 Compare April 28, 2021 15:32
aduth added 2 commits April 28, 2021 11:35
**Why**: To match USWDS intended load order of stylesheets, to allow utility classes to take precedent over component styles, and to facilitate a potential future use of USWDS 2.11.0 package subsetting.
**Why**: Avoid changing file structure for built output, while retaining the ability to point to dependency source in development in a way that's compatible with the copied dependency in the build distributable. Also, nicer paths.
@aduth aduth force-pushed the aduth-utiltiies-after-components branch from 4c62728 to 8de7e24 Compare April 28, 2021 15:35
aduth added 2 commits April 28, 2021 12:06
**Why**: Guarantee USWDS always takes precedent over symlink
@aduth aduth merged commit 4226b82 into main Apr 28, 2021
@aduth aduth deleted the aduth-utiltiies-after-components branch April 28, 2021 17:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants