From d7bde15f94100ee6e45008421e15a86ff4a092d1 Mon Sep 17 00:00:00 2001 From: Ans Date: Wed, 27 Nov 2024 15:12:24 -0500 Subject: [PATCH] Migrate deprecated sass imports to sass use statements --- .../css/cfpb-chart-builder.scss | 12 ++++----- .../cfpb-chart-builder/css/chart-bar.scss | 1 + .../cfpb-chart-builder/css/chart-line.scss | 1 + .../cfpb-chart-builder/css/chart-tilemap.scss | 1 + .../apps/form-explainer/css/main.scss | 2 +- .../css/college-costs/charts.scss | 1 + .../css/college-costs/financial-item.scss | 1 + .../css/college-costs/state-based.scss | 1 + .../apps/paying-for-college/css/main.scss | 26 +++++++++---------- .../teachers-digital-platform/css/main.scss | 14 +++++----- .../unprocessed/css/enhancements/layout.scss | 6 ++--- cfgov/unprocessed/css/on-demand/chart.scss | 2 +- cfgov/unprocessed/css/organisms/footer.scss | 2 +- 13 files changed, 38 insertions(+), 32 deletions(-) diff --git a/cfgov/unprocessed/apps/cfpb-chart-builder/css/cfpb-chart-builder.scss b/cfgov/unprocessed/apps/cfpb-chart-builder/css/cfpb-chart-builder.scss index aead57bd24c..0306cab2583 100644 --- a/cfgov/unprocessed/apps/cfpb-chart-builder/css/cfpb-chart-builder.scss +++ b/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: diff --git a/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-bar.scss b/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-bar.scss index 7f876ae63ab..a63ccc7ffae 100644 --- a/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-bar.scss +++ b/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. diff --git a/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-line.scss b/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-line.scss index 9ae39629a81..070c99775e4 100644 --- a/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-line.scss +++ b/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-line.scss @@ -1,4 +1,5 @@ @use './vars.scss' as *; +@use './mixins.scss' as *; /********* * LEGEND diff --git a/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-tilemap.scss b/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-tilemap.scss index 78762885122..f02a39b6a01 100644 --- a/cfgov/unprocessed/apps/cfpb-chart-builder/css/chart-tilemap.scss +++ b/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. */ diff --git a/cfgov/unprocessed/apps/form-explainer/css/main.scss b/cfgov/unprocessed/apps/form-explainer/css/main.scss index 10ef1c1fd05..a5bdb76ae7c 100644 --- a/cfgov/unprocessed/apps/form-explainer/css/main.scss +++ b/cfgov/unprocessed/apps/form-explainer/css/main.scss @@ -1 +1 @@ -@import './form-explainer'; +@use './form-explainer' as *; diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/charts.scss b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/charts.scss index f5b12e5924a..0cce9f9c215 100644 --- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/charts.scss +++ b/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 { diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.scss b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.scss index dbb96e39ff5..5d7c0c539e4 100644 --- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/financial-item.scss +++ b/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; diff --git a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/state-based.scss b/cfgov/unprocessed/apps/paying-for-college/css/college-costs/state-based.scss index 752c3453445..7dba4247017 100644 --- a/cfgov/unprocessed/apps/paying-for-college/css/college-costs/state-based.scss +++ b/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, diff --git a/cfgov/unprocessed/apps/paying-for-college/css/main.scss b/cfgov/unprocessed/apps/paying-for-college/css/main.scss index bf1d6ea3730..bd8bf8ebd5a 100644 --- a/cfgov/unprocessed/apps/paying-for-college/css/main.scss +++ b/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 *; diff --git a/cfgov/unprocessed/apps/teachers-digital-platform/css/main.scss b/cfgov/unprocessed/apps/teachers-digital-platform/css/main.scss index 5a5b84f0143..b35497eb966 100644 --- a/cfgov/unprocessed/apps/teachers-digital-platform/css/main.scss +++ b/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 *; diff --git a/cfgov/unprocessed/css/enhancements/layout.scss b/cfgov/unprocessed/css/enhancements/layout.scss index 863ca27f11d..bd46465a7dd 100644 --- a/cfgov/unprocessed/css/enhancements/layout.scss +++ b/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. diff --git a/cfgov/unprocessed/css/on-demand/chart.scss b/cfgov/unprocessed/css/on-demand/chart.scss index 49baae40818..44a67234554 100644 --- a/cfgov/unprocessed/css/on-demand/chart.scss +++ b/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 { diff --git a/cfgov/unprocessed/css/organisms/footer.scss b/cfgov/unprocessed/css/organisms/footer.scss index 611f7fbe9a8..d409a6b0aec 100644 --- a/cfgov/unprocessed/css/organisms/footer.scss +++ b/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;