Merge pull request #8663 from cfpb/ans_migrate_import

Migrate deprecated sass imports to sass use statements

cfgov/unprocessed/apps/cfpb-chart-builder/css/cfpb-chart-builder.scss

@@ -1,14 +1,14 @@
 // cf-core is included for cf-brand-colors and media queries.
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
 @use './vars' as *;
-@import 'highcharts/css/highcharts.css';
-@import './mixins';
+@use 'highcharts/css/highcharts.css' as *;
+@use './mixins' as *;
 
 // Import chart-type specific styling.
-@import './chart-line';
-@import './chart-bar';
-@import './chart-tilemap';
-@import './chart-geomap';
+@use './chart-line' as *;
+@use './chart-bar' as *;
+@use './chart-tilemap' as *;
+@use './chart-geomap' as *;
 
 /*
 Updating the charts:

cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-bar.scss

@@ -1,4 +1,5 @@
 @use './vars.scss' as *;
+@use './mixins.scss' as *;
 
 .cfpb-chart[data-chart-type='bar'] {
   // Position horizontal rule.

cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-line.scss

@@ -1,4 +1,5 @@
 @use './vars.scss' as *;
+@use './mixins.scss' as *;
 
 /*********
 * LEGEND

cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-tilemap.scss

@@ -1,4 +1,5 @@
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use './mixins.scss' as *;
 
 /* TODO: Investigate whether responsive styles can be remove here and handled
          via class set in JS, like how the other chart types work. */

cfgov/unprocessed/apps/form-explainer/css/main.scss

@@ -1 +1 @@
-@import './form-explainer';
+@use './form-explainer' as *;

cfgov/unprocessed/apps/paying-for-college/css/college-costs/charts.scss

@@ -1,5 +1,6 @@
 @use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use './vars.scss' as *;
 
 .college-costs {
   &__tool-section--school-results {

cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.scss

@@ -1,5 +1,6 @@
 @use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use './vars.scss' as *;
 
 .financial-item {
   margin-top: math.div(30px, $base-font-size-px) + em;

cfgov/unprocessed/apps/paying-for-college/css/college-costs/state-based.scss

@@ -1,4 +1,5 @@
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use './vars.scss' as *;
 
 main.college-costs {
   .undergrad-content,

cfgov/unprocessed/apps/paying-for-college/css/main.scss

@@ -6,20 +6,20 @@
 // Project-specific SCSS rules go after the imports.
 
 // Import the Design System enhancements
-@import 'cf-enhancements';
+@use 'cf-enhancements' as *;
 
 // Import the disclosures.scss file
-@import 'disclosures';
+@use 'disclosures' as *;
 
 // Import the college-costs.scss file
-@import 'college-costs/vars';
-@import 'college-costs/college-costs';
-@import 'college-costs/charts';
-@import 'college-costs/financial-item';
-@import 'college-costs/nav';
-@import 'college-costs/number-callout';
-@import 'college-costs/search';
-@import 'college-costs/state-based';
-@import 'college-costs/stepper';
-@import 'college-costs/tooltip';
-@import 'print';
+@use 'college-costs/vars' as *;
+@use 'college-costs/college-costs' as *;
+@use 'college-costs/charts' as *;
+@use 'college-costs/financial-item' as *;
+@use 'college-costs/nav' as *;
+@use 'college-costs/number-callout' as *;
+@use 'college-costs/search' as *;
+@use 'college-costs/state-based' as *;
+@use 'college-costs/stepper' as *;
+@use 'college-costs/tooltip' as *;
+@use 'print' as *;

cfgov/unprocessed/apps/teachers-digital-platform/css/main.scss

@@ -3,10 +3,10 @@
    ========================================================================== */
 
 // Project specific SCSS goes here or you can break it up into discrete files.
-@import 'atoms/icon';
-@import 'molecules/form-fields';
-@import 'molecules/search-hero';
-@import 'organisms/expandable';
-@import 'organisms/expandable-facets';
-@import 'pages/activity-search';
-@import 'utilities/hide-on';
+@use 'atoms/icon' as *;
+@use 'molecules/form-fields' as *;
+@use 'molecules/search-hero' as *;
+@use 'organisms/expandable' as *;
+@use 'organisms/expandable-facets' as *;
+@use 'pages/activity-search' as *;
+@use 'utilities/hide-on' as *;

cfgov/unprocessed/css/enhancements/layout.scss

@@ -1,8 +1,8 @@
 @use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@import './layout-base';
-@import './layout-2-1';
-@import './layout-1-3';
+@use './layout-base' as *;
+@use './layout-2-1' as *;
+@use './layout-1-3' as *;
 
 .wrapper--match-content {
   // Tablet and above.

cfgov/unprocessed/css/on-demand/chart.scss

@@ -2,7 +2,7 @@
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
 
 // Import external cfpb-chart-builder stylesheet
-@import '../../apps/cfpb-chart-builder/css/cfpb-chart-builder';
+@use '../../apps/cfpb-chart-builder/css/cfpb-chart-builder' as *;
 
 // Footnote text below charts
 .m-chart-footnote {

cfgov/unprocessed/css/organisms/footer.scss

@@ -1,7 +1,7 @@
 @use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/utilities' as *;
-@import '../enhancements/typography';
+@use '../enhancements/typography' as *;
 
 @mixin u-upper-hover-line() {
   position: absolute;