Add package entrypoints for granular stylesheet loading

[aduth]

Why: To limit or control the loading of styles.

Use-cases:

1. Avoid specificity conflicts between utility classes and a consuming project's custom components
2. Load only required mixins and functions to support CSS code splitting

This also mirrors USWDS packages, with two main differences:

• Simplifies naming of uswds-components and uswds-utilities to just components and utilities
• Extracts utilities-required from utilities to allow non-rendering import of utility mixins.

See:

• https://designsystem.digital.gov/components/packages/
• https://github.com/uswds/uswds/blob/develop/src/stylesheets/uswds.scss

Next steps:

Per the above use-cases, this is useful for identity-idp and the following diff would help toward resolving existing specificity conflicts and simplify code splitting usage:

diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index 8576adb31..9a5ab78d6 100644
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -1,6 +1,9 @@
 @import 'variables/colors';
 @import 'variables/app';
 @import 'vendor';
-@import 'identity-style-guide/dist/assets/scss/styles';
+@import 'identity-style-guide/dist/assets/scss/packages/required';
+@import 'identity-style-guide/dist/assets/scss/packages/global';
+@import 'identity-style-guide/dist/assets/scss/packages/components';
 @import 'components/all';
 @import 'print';
+@import 'identity-style-guide/dist/assets/scss/packages/utilities';
diff --git a/config/webpack/environment.js b/config/webpack/environment.js
index c55bb013f..65fd2682b 100644
--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@@ -25,19 +25,8 @@ const sassLoader = environment.loaders.get('sass');
 sassLoader.use.find(({ loader }) => loader === 'sass-loader').options.additionalData = `
 $font-path: '~identity-style-guide/dist/assets/fonts';
 $image-path: '~identity-style-guide/dist/assets/img';
-@import '~identity-style-guide/dist/assets/scss/functions/asset-path';
-@import '~identity-style-guide/dist/assets/scss/functions/focus';
-@import '~identity-style-guide/dist/assets/scss/uswds-theme/custom-styles';
-@import '~identity-style-guide/dist/assets/scss/uswds-theme/general';
-@import '~identity-style-guide/dist/assets/scss/uswds-theme/typography';
-@import '~identity-style-guide/dist/assets/scss/uswds-theme/spacing';
-@import '~identity-style-guide/dist/assets/scss/uswds-theme/color';
-@import '~identity-style-guide/dist/assets/scss/uswds-theme/utilities';
-@import '~identity-style-guide/dist/assets/scss/uswds-theme/components';
-@import '~identity-style-guide/dist/assets/scss/uswds/packages/required';
-@import '~identity-style-guide/dist/assets/scss/uswds/utilities/palettes/all';
-@import '~identity-style-guide/dist/assets/scss/uswds/utilities/rules/all';
-@import '~identity-style-guide/dist/assets/scss/uswds/utilities/rules/package';`;
+@import '~identity-style-guide/dist/assets/scss/packages/required';
+@import '~identity-style-guide/dist/assets/scss/packages/utilities-required';`;
 
 sassLoader.use.find(({ loader }) => loader === 'css-loader').options.sourceMap = false;

Example conflicts:

• https://github.com/18F/identity-idp/blob/0a81dd7/app/assets/stylesheets/components/_btn.scss#L38
• https://github.com/18F/identity-idp/blob/0a81dd7/app/views/idv/shared/_error.html.erb#L40
  • Should use margin-top-5 but currently conflicts with custom component's own margins

[zachmargolis]

LGTM

[aduth]

Test failure is visual regression for expected content changes to Usage page.