Move towards @use in each module.scss file. Document that @import wi…

…ll be deprecated.
Enterprise-CMCS · Dec 26, 2023 · 2b21df2 · 2b21df2
1 parent b774420
commit 2b21df2
Show file tree

Hide file tree

Showing 50 changed files with 388 additions and 374 deletions.
diff --git a/docs/technical-design/howto-style-css-scss.md b/docs/technical-design/howto-style-css-scss.md
@@ -16,7 +16,7 @@ We currently have ~three types of containers in the application. See our `custom
 
 Make sure heading levels (`h2`, `h3` etc) are properly used for text content. There are clear [guidelines](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) around heading levels to follow. For example, page titles should always have some kind of heading, use only one h1 per page, headings should be nested by level, etc. If the heading is not styled the way you expect by default, CSS can be used to override things like font weight, size, etc. If you are noticing something with heading that need to be overridden across the app, this likely calls for global styles.
 
-Note also that there is a specific color to be used for links (`$mcr-foundation-link`) and hint text (`$mcr-foundation-hint`).
+Note also that there is a specific color to be used for links (`$$mcr-foundation-link`) and hint text (`$mcr-foundation-hint`).
 
 ## Patterns and technologies related to styles in MC-Review
 
@@ -38,7 +38,16 @@ Example of scoped styles:
 - Shared styles live close to the workflow they apply to. For example, directories in  `/pages` folder may share a `*.module.scss` stylesheet if needed for templates in that area of the application. CSS selectors should be used to further scope down styles.
 - Re-useable atomic components (see `/components` folder) have self contained styles. There is a named `*.module.scss` file for each component.
 
+## How to import
+- Prefer namespaced scss imports with [`@use`](https://sass-lang.com/documentation/at-rules/use/) over [`@import`](https://sass-lang.com/documentation/at-rules/import/) for scss to reduce loading styles multiple times. Sass team is deprecating [`@import`](https://github.com/sass/sass/blob/main/accepted/module-system.md#timeline).
 
+In `*.module.scss` files this looks like (at top of file):
+```
+@use '../../styles/custom.scss' as custom;
+@use '../../styles/uswdsImports.scss' as uswds;
+```
+
+and then referring to varibles and mixins inline with the [namespace](https://sass-lang.com/documentation/at-rules/use/#choosing-a-namespace) - such as `custom.$mcr-foundation-white` or  `@include uswds.uswds-at-media(tablet)`
 #### When to use global overrides
 
 Global styles live in a single file (`overrides.scss`). This should be used sparingly.

diff --git a/services/app-web/src/components/ActionButton/ActionButton.module.scss b/services/app-web/src/components/ActionButton/ActionButton.module.scss
@@ -1,5 +1,5 @@
-@use '../../styles/uswdsImports.scss';
-@use '../../styles/custom.scss' as *;
+@use '../../styles/custom.scss' as custom;
+@use '../../styles/uswdsImports.scss' as uswds;
 
 // preferred way to show a button that is disabled. avoid cursor: none
 .disabledCursor {
@@ -16,11 +16,11 @@
 }
 
 .successButton {
-    background: $mcr-success-base;
+    background: custom.$mcr-success-base;
     &:hover {
-        background-color: $mcr-success-hover !important;
+        background-color: custom.$mcr-success-hover !important;
     }
     &:active {
-       background-color: $mcr-success-hover !important;
+       background-color: custom.$mcr-success-hover !important;
     }
 }
diff --git a/services/app-web/src/components/Banner/Banner.module.scss b/services/app-web/src/components/Banner/Banner.module.scss
@@ -1,5 +1,5 @@
-@import '../../styles/uswdsImports.scss';
-@import '../../styles/custom.scss';
+@use '../../styles/custom.scss' as custom;
+@use '../../styles/uswdsImports.scss' as uswds;
 
 .bannerBodyText {
   p {

diff --git a/services/app-web/src/components/Breadcrumbs/Breadcrumbs.module.scss b/services/app-web/src/components/Breadcrumbs/Breadcrumbs.module.scss
@@ -1,4 +1,5 @@
-@import '../../styles/uswdsImports.scss';
+@use '../../styles/custom.scss' as custom;
+@use '../../styles/uswdsImports.scss' as uswds;
 
 .crumbContainer {
     margin-top: 1em;
@@ -8,7 +9,7 @@
     [class^='usa-breadcrumb'] {
         li:last-child a {
             text-decoration: none;
-            color: $theme-color-base-ink;
+            color: custom.$mcr-foundation-ink
         }
     }
 }
diff --git a/services/app-web/src/components/ChangeHistory/ChangeHistory.module.scss b/services/app-web/src/components/ChangeHistory/ChangeHistory.module.scss
@@ -1,18 +1,18 @@
-@import '../../styles/uswdsImports.scss';
-@import '../../styles/custom.scss';
+@use '../../styles/custom.scss' as custom;
+@use '../../styles/uswdsImports.scss' as uswds;
 
 .summarySection {
-    background: $mcr-foundation-white;
-    line-height: units(3);
-    @include u-radius('md');
+    background: custom.$mcr-foundation-white;
+    line-height: uswds.units(3);
+    @include uswds.u-radius('md');
 
     h2 {
         margin: 0;
-        @include u-text('normal');
+        @include uswds.u-text('normal');
     }
     &:first-of-type {
         h2 {
-            @include u-text('bold');
+            @include uswds.u-text('bold');
             font-size: size('body', 'lg');
         }
     }

diff --git a/services/app-web/src/components/Colors/Colors.module.scss b/services/app-web/src/components/Colors/Colors.module.scss
@@ -1,51 +1,51 @@
-@use '../../styles/custom.scss' as *;
+@use '../../styles/custom.scss' as custom;
 
 :export {
   mcr: {
     primary: {
-        lightest: $mcr-primary-lightest;
-        lighter: $mcr-primary-lighter;
-        light: $mcr-primary-light;
-        base: $mcr-primary-base;
-        dark: $mcr-primary-dark;
-        darkest: $mcr-primary-darkest;
+        lightest: custom.$mcr-primary-lightest;
+        lighter: custom.$mcr-primary-lighter;
+        light: custom.$mcr-primary-light;
+        base: custom.$mcr-primary-base;
+        dark: custom.$mcr-primary-dark;
+        darkest: custom.$mcr-primary-darkest;
         }
     cmsblue: {
-      lightest: $mcr-cmsblue-lightest;
-      base: $mcr-cmsblue-base;
-      dark: $mcr-cmsblue-dark;
-      darkest: $mcr-cmsblue-darkest;
+      lightest: custom.$mcr-cmsblue-lightest;
+      base: custom.$mcr-cmsblue-base;
+      dark: custom.$mcr-cmsblue-dark;
+      darkest: custom.$mcr-cmsblue-darkest;
     }
     cyan: {
-      light: $mcr-cyan-light;
-      base:  $mcr-cyan-base;
-      dark: $mcr-cyan-dark;
+      light: custom.$mcr-cyan-light;
+      base:  custom.$mcr-cyan-base;
+      dark: custom.$mcr-cyan-dark;
         }
     gold: {
-      base:  $mcr-gold-base;
-       dark: $mcr-gold-dark;
-      darker: $mcr-gold-darker;
+      base:  custom.$mcr-gold-base;
+       dark: custom.$mcr-gold-dark;
+      darker: custom.$mcr-gold-darker;
     }
     gray: {
-      dark: $mcr-gray-dark;
-      base : $mcr-gray-base;
-      lighter: $mcr-gray-lighter;
-      lightest: $mcr-gray-lightest;
+      dark: custom.$mcr-gray-dark;
+      base : custom.$mcr-gray-base;
+      lighter: custom.$mcr-gray-lighter;
+      lightest: custom.$mcr-gray-lightest;
     }
      foundation: {
-     white: $mcr-foundation-white;
-      hint: $mcr-foundation-hint;
-      link: $mcr-foundation-link;
-      ink : $mcr-foundation-ink;
+     white: custom.$mcr-foundation-white;
+      hint: custom.$mcr-foundation-hint;
+      link: custom.$mcr-foundation-link;
+      ink : custom.$mcr-foundation-ink;
     }
     success: {
-        base: $mcr-success-base;
-        hover: $mcr-success-hover;
-        dark: $mcr-success-dark;
+        base: custom.$mcr-success-base;
+        hover: custom.$mcr-success-hover;
+        dark: custom.$mcr-success-dark;
     }
     error: {
-      light: $mcr-error-light;
-      base: $mcr-error-base;
+      light: custom.$mcr-error-light;
+      base: custom.$mcr-error-base;
 
     }
   }

diff --git a/services/app-web/src/components/DataDetail/DataDetail.module.scss b/services/app-web/src/components/DataDetail/DataDetail.module.scss
@@ -1,10 +1,10 @@
-@import '../../styles/uswdsImports.scss';
-@import '../../styles/custom.scss';
+@use '../../styles/custom.scss' as custom;
+@use '../../styles/uswdsImports.scss' as uswds;
 
 .dataDetail {
-    margin-bottom: units(4);
+    margin-bottom: uswds.units(4);
 
-    @include at-media(tablet) {
+    @include uswds.at-media(tablet) {
         margin-bottom: 0;
     }
 
@@ -21,7 +21,7 @@
 }
 
 .missingInfo {
-    color: #b50909;
+    color: custom.$mcr-error-base;
     font-weight: 700;
     display: flex;
 }
diff --git a/...eb/src/components/DocumentWarning/InlineDocumentWarning/InlineDocumentWarning.module.scss b/...eb/src/components/DocumentWarning/InlineDocumentWarning/InlineDocumentWarning.module.scss
@@ -1,8 +1,8 @@
-@import '../../../styles/uswdsImports.scss';
-@import '../../../styles/custom.scss';
+@use '../../../styles/custom.scss' as custom;
+@use '../../../styles/uswdsImports.scss' as uswds;
 
 .missingInfo {
-  color: $mcr-gold-darker;
+  color: custom.$mcr-gold-darker;
   font-weight: 700;
   display: flex;
 }
diff --git a/services/app-web/src/components/DoubleColumnGrid/DoubleColumnGrid.module.scss b/services/app-web/src/components/DoubleColumnGrid/DoubleColumnGrid.module.scss
@@ -1,7 +1,8 @@
-@import '../../styles/uswdsImports.scss';
-@import '../../styles/custom.scss';
+@use '../../styles/custom.scss' as custom;
+@use '../../styles/uswdsImports.scss' as uswds;
+
 .row {
-    @include at-media(tablet) {
-        margin-bottom: units(2);
+    @include uswds.at-media(tablet) {
+        margin-bottom: uswds.units(2);
     }
 }
diff --git a/services/app-web/src/components/DownloadButton/DownloadButton.module.scss b/services/app-web/src/components/DownloadButton/DownloadButton.module.scss
@@ -1,5 +1,5 @@
-@import '../../styles/uswdsImports.scss';
-@import '../../styles/custom.scss';
+@use '../../styles/custom.scss' as custom;
+@use '../../styles/uswdsImports.scss' as uswds;
 
 .disabledCursor {
   cursor: not-allowed;

diff --git a/services/app-web/src/components/ErrorAlert/ErrorAlert.module.scss b/services/app-web/src/components/ErrorAlert/ErrorAlert.module.scss
@@ -1,5 +1,5 @@
-@import '../../styles/uswdsImports.scss';
-@import '../../styles/custom.scss';
+@use '../../styles/custom.scss' as custom;
+@use '../../styles/uswdsImports.scss' as uswds;
 
 .messageBodyText{
   p {

diff --git a/services/app-web/src/components/ExpandableText/ExpandableText.module.scss b/services/app-web/src/components/ExpandableText/ExpandableText.module.scss
@@ -1,5 +1,5 @@
-@import '../../styles/uswdsImports.scss';
-@import '../../styles/custom.scss';
+@use '../../styles/custom.scss' as custom;
+@use '../../styles/uswdsImports.scss' as uswds;
 
 .expandableBlock {
     line-height: initial;

diff --git a/services/app-web/src/components/FileUpload/FileUpload.module.scss b/services/app-web/src/components/FileUpload/FileUpload.module.scss
@@ -1,5 +1,5 @@
-@import '../../styles/uswdsImports.scss';
-@import '../../styles/custom.scss';
+@use '../../styles/custom.scss' as custom;
+@use '../../styles/uswdsImports.scss' as uswds;
 
 .warningRow {
     & td {
@@ -8,7 +8,7 @@
 }
 
 .fileInputError {
-    background-color: $mcr-error-light;
+    background-color: custom.$mcr-error-light;
 }
 
 .loadingImage {
@@ -28,21 +28,21 @@
 .fileInputHint {
     display: flex;
     flex-direction: column;
-    color: $mcr-foundation-hint;
+    color: custom.$mcr-foundation-hint;
     margin-bottom: 0.5rem;
 }
 
 .requiredOptionalText {
     display: block;
-    color: $mcr-foundation-hint;
+    color: custom.$mcr-foundation-hint;
 }
 
 .fileSummary {
     font-weight: normal;
-    @include u-font('sans', 'sm');
-    @include u-padding(1);
-    @include u-margin-y(1px);
-    background: $mcr-primary-light;
+    @include uswds.u-font('sans', 'sm');
+    @include uswds.u-padding(1);
+    @include uswds.u-margin-y(1px);
+    background: custom.$mcr-primary-light;
 }
 
 .fileItemsList {

diff --git a/services/app-web/src/components/FilterAccordion/FilterAccordion.module.scss b/services/app-web/src/components/FilterAccordion/FilterAccordion.module.scss
@@ -1,5 +1,5 @@
-@import '../../styles/uswdsImports.scss';
-@import '../../styles/custom.scss';
+@use '../../styles/custom.scss' as custom;
+@use '../../styles/uswdsImports.scss' as uswds;
 
 .filterTitle {
     font-weight: bold;
@@ -14,7 +14,7 @@
 
 .filterAccordion {
     [class*='usa-accordion__content'] {
-        background: $mcr-gray-lightest;
+        background: custom.$mcr-gray-lightest;
         overflow: visible;
     }
 }
diff --git a/services/app-web/src/components/FilterAccordion/FilterDateRange/FilterDateRange.module.scss b/services/app-web/src/components/FilterAccordion/FilterDateRange/FilterDateRange.module.scss
@@ -1,5 +1,5 @@
-@import '../../../styles/uswdsImports.scss';
-@import '../../../styles/custom.scss';
+@use '../../../styles/custom.scss' as custom;
+@use '../../../styles/uswdsImports.scss' as uswds;
 
 .dateRangePicker {
   [class='usa-label'] {

diff --git a/services/app-web/src/components/Footer/Footer.module.scss b/services/app-web/src/components/Footer/Footer.module.scss
@@ -1,11 +1,11 @@
-@import '../../styles/uswdsImports.scss';
-@import '../../styles/custom.scss';
+@use '../../styles/custom.scss' as custom;
+@use '../../styles/uswdsImports.scss' as uswds;
 
 .logosRow {
-    background-color: $mcr-cmsblue-lightest;
+    background-color: custom.$mcr-cmsblue-lightest;
     & img,
     svg {
-        padding-right: units(4);
+        padding-right: uswds.units(4);
         flex-shrink: 0;
         height: 50px;
         width: auto;
@@ -21,27 +21,27 @@
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    padding: units(2);
+    padding: uswds.units(2);
     justify-content: flex-end;
     > span {
         max-width: 300px;
     }
 }
 
 .contactRow {
-    background-color: $mcr-cmsblue-base;
-    color: $mcr-foundation-white;
-    padding: units(3) 0;
+    background-color: custom.$mcr-cmsblue-base;
+    color: custom.$mcr-foundation-white;
+    padding: uswds.units(3) 0;
     > span {
-        margin: units(1);
+        margin: uswds.units(1);
     }
     a {
-        color: $mcr-foundation-white;
+        color: custom.$mcr-foundation-white;
 
         &:hover,
         &:active,
         &:visited {
-            color: $mcr-foundation-white;
+            color: custom.$mcr-foundation-white;
         }
     }
 }
diff --git a/services/app-web/src/components/Form/ErrorSummary/ErrorSummary.module.scss b/services/app-web/src/components/Form/ErrorSummary/ErrorSummary.module.scss
@@ -1,6 +1,5 @@
-@import '../../../styles/uswdsImports.scss';
-@import '../../../styles/custom.scss';
-
+@use '../../../styles/custom.scss' as custom;
+@use '../../../styles/uswdsImports.scss' as uswds;
 .message {
     a {
         border: 0;
@@ -10,7 +9,7 @@
         font-weight: normal;
         text-align: left;
         &, &:visited {
-            color: $mcr-foundation-ink;
+            color: custom.$mcr-foundation-ink;
         }
     }
 }