DATAP-1580 - fix sass use/include deprecation warnings (#554)

* - Updated CRACO config to allow sass-loader library to use modern APIs (not legacy)
- Updated CRACO config to allow sass-loader library to automatically load node_modules and src paths so that Sass files are found on those paths by default, and absolute paths are not needed  when importing Sass files
- Updated CRACO config to use relative paths when referencing files in the components and css folders throughout the app
- Made fixes to referenced  Sass imports in several stylesheets based on Sass config updates
- Defined true entry point stylesheet in base.scss, which holds all design system configuration and is referenced in all other stylesheets
- Began updating all component stylesheets to refer to base.scss, as well as removal of unnecessary references to design system files

* For each component stylesheet:
- Removed unnecessary references to design system folders
- Added base.scss as a reference (even if not used - good to have entrypoint stylesheets in other stylesheets)
- Fixed additional deprecation warnings related to file

* Successful prod build

* Changed @import statements to @use

* Changed @import to @use in PillPanel.scss

---------

Co-authored-by: cdhenley219 <[email protected]>

Author: cdmh219

craco.config.js

@@ -17,7 +17,10 @@ const { ProvidePlugin } = require('webpack');
 
 module.exports = {
   webpack: {
-    alias: {},
+    alias: {
+      components: path.resolve(__dirname, 'src/components'),
+      css: path.resolve(__dirname, 'src/css')
+    },
     configure: (webpackConfig, { env, paths }) => {
       const strReplaceLoader = {
         // test: /constants\/index\.js$/,
@@ -82,4 +85,14 @@ module.exports = {
       },
     },
   ],
+  style: {
+    sass: {
+      loaderOptions: {
+        api: 'modern',
+        sassOptions: {
+          loadPaths: ['node_modules', 'src']
+        }
+      }
+    }
+  }
 };

dist/ccdb5.css

@@ -1,6 +1,5 @@
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/utilities' as *;
-@import '../../css/base';
+@use 'css/base' as *;
 
 .action-bar {
   border: 1px solid var(--gray-40);

dist/ccdb5.css.map

@@ -1,7 +1,5 @@
-@use 'node_modules/@cfpb/cfpb-design-system/src/abstracts' as *;
-@use 'node_modules/@cfpb/cfpb-design-system/src/base' as *;
-@use 'node_modules/@cfpb/cfpb-design-system/dist/index.css' as *;
-@import '../../../css/base';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use 'css/base' as *;
 
 .row-chart-section {
   margin-top: $grid-gutter-width;

dist/ccdb5.js

@@ -1,6 +1,5 @@
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/utilities' as *;
-@import '../../css/base';
+@use 'css/base' as *;
 
 .card-container {
   max-width: 100%;

dist/ccdb5.js.map

@@ -1,6 +1,6 @@
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/utilities' as *;
-@import '../../../css/base';
+@use 'css/base' as *;
 
 .export-modal {
   .body {

src/components/ActionBar/ActionBar.scss

@@ -1,7 +1,5 @@
-@use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/utilities' as *;
-@import '../../css/base';
+@use 'css/base' as *;
 
 .modal-overlay {
   position: fixed;

src/components/Charts/RowChart/RowChart.scss

@@ -1,8 +1,6 @@
 @use 'sass:math';
-@use 'node_modules/@cfpb/cfpb-design-system/src/abstracts' as *;
-@use 'node_modules/@cfpb/cfpb-design-system/src/base' as *;
-@use 'node_modules/@cfpb/cfpb-design-system/dist/index.css' as *;
-@import '../../../css/base';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use 'css/base' as *;
 
 .aggregation {
   ul {

src/components/ComplaintDetail/ComplaintDetail.scss

@@ -1,4 +1,4 @@
-@import '../../../../css/base';
+@use 'css/base' as *;
 
 li.aggregation-branch {
   &.parent {

src/components/Dialogs/DataExport/DataExport.scss

@@ -1,4 +1,4 @@
-@import '../../../css/base';
+@use 'css/base' as *;
 
 .o-expandable {
   margin-bottom: 0;

src/components/Dialogs/RootModal.scss

@@ -1,4 +1,4 @@
-@import '../../css/base';
+@use 'css/base' as *;
 
 .date-filter {
   h4 {

src/components/Filters/Aggregation/Aggregation.scss

@@ -1,17 +1,15 @@
-@use 'node_modules/@cfpb/cfpb-design-system/src/abstracts' as *;
-@use 'node_modules/@cfpb/cfpb-design-system/src/base' as *;
-@use 'node_modules/@cfpb/cfpb-design-system/dist/index.css' as *;
-@import '../../css/base';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use 'css/base' as *;
 
 .filter-panel {
   padding: $gutter-normal;
+  border-top: 1px solid var(--gray-40);
+  border-right: 1px solid var(--gray-40);
+  background: var(--gray-5);
 
   @media screen and (min-width: $layout-breakpoint-desktop-min) {
     padding: $grid-gutter-width;
   }
-  border-top: 1px solid var(--gray-40);
-  border-right: 1px solid var(--gray-40);
-  background: var(--gray-5);
 
   @media screen and (max-width: $layout-breakpoint-phone-max) {
     border-right: none;

src/components/Filters/Aggregation/AggregationBranch/AggregationBranch.scss

@@ -1,4 +1,4 @@
-@import '../../css/base';
+@use 'css/base' as *;
 
 .filter-panel-toggle {
   @media screen and (min-width: $layout-breakpoint-superwide-min) {

src/components/Filters/CollapsibleFilter/CollapsibleFilter.scss

@@ -1,7 +1,5 @@
-@use 'node_modules/@cfpb/cfpb-design-system/src/abstracts' as *;
-@use 'node_modules/@cfpb/cfpb-design-system/src/base' as *;
-@use 'node_modules/@cfpb/cfpb-design-system/dist/index.css' as *;
-@import '../../../css/base';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use 'css/base' as *;
 
 // Reset interfering Captial Framework style
 .card-container .card .card-left {

src/components/Filters/DateFilter.scss

@@ -1,7 +1,5 @@
-@use 'node_modules/@cfpb/cfpb-design-system/src/abstracts' as *;
-@use 'node_modules/@cfpb/cfpb-design-system/src/base' as *;
-@use 'node_modules/@cfpb/cfpb-design-system/dist/index.css' as *;
-@import '../../../css/base';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use 'css/base' as *;
 
 .list-panel {
   // The "No results were found for your search" heading.

src/components/Filters/FilterPanel.scss

@@ -1,8 +1,5 @@
-@use 'sass:math';
-@use 'node_modules/@cfpb/cfpb-design-system/src/abstracts' as *;
-@use 'node_modules/@cfpb/cfpb-design-system/src/base' as *;
-@use 'node_modules/@cfpb/cfpb-design-system/dist/index.css' as *;
-@import '../../css/base';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use 'css/base' as *;
 
 .light-box {
   position: fixed;

src/components/Filters/FilterPanelToggle.scss

@@ -5,10 +5,8 @@
  *
  * License: www.highcharts.com/license
  */
-@use 'node_modules/@cfpb/cfpb-design-system/src/abstracts' as *;
-@use 'node_modules/@cfpb/cfpb-design-system/src/base' as *;
-@use 'node_modules/@cfpb/cfpb-design-system/dist/index.css' as *;
-@import '../../../css/base';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use 'css/base' as *;
 
 .highcharts-container {
   position: relative;

src/components/List/ComplaintCard/ComplaintCard.scss

@@ -1,9 +1,7 @@
 @use 'sass:math';
-@use 'node_modules/@cfpb/cfpb-design-system/src/abstracts' as *;
-@use 'node_modules/@cfpb/cfpb-design-system/src/base' as *;
-@use 'node_modules/@cfpb/cfpb-design-system/dist/index.css' as *;
-@import '../../css/base';
-@import '../select';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use 'css/base' as *;
+@use '../select' as *;
 
 .refine-bar {
   section {

src/components/List/ListPanel/ListPanel.scss

@@ -1,4 +1,4 @@
-@import '../../css/base';
+@use 'css/base' as *;
 
 .separator {
   border-left: solid 1px var(--gray-40);

src/components/Loading/Loading.scss

@@ -1,4 +1,4 @@
-@import '../../../css/base';
+@use 'css/base' as *;
 
 .complex-example {
   button { margin: $gutter-narrow 0; }

src/components/Map/TileChartMap/TileChartMap.scss

@@ -1,7 +1,6 @@
 @use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/utilities' as *;
-@import '../../../css/base';
+@use 'css/base' as *;
 
 .content__hero {
   padding-bottom: math.div(30px, $base-font-size-px) + rem;

src/components/RefineBar/RefineBar.scss

@@ -1,6 +1,5 @@
 @use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/utilities' as *;
 
 .pill {
   padding: math.div($grid-gutter-width, 3) 30px math.div($grid-gutter-width, 3) math.div($grid-gutter-width, 3);

src/components/RefineBar/Separator.scss

@@ -1,5 +1,5 @@
 @use 'sass:math';
-@import '../../css/base';
+@use 'css/base' as *;
 
 .pill-panel {
   padding-right: $gutter-narrow;

src/components/Search/AdvancedTips/ComplexExample.scss

@@ -1,8 +1,6 @@
 @use 'sass:math';
-@use 'node_modules/@cfpb/cfpb-design-system/src/abstracts' as *;
-@use 'node_modules/@cfpb/cfpb-design-system/src/base' as *;
-@use 'node_modules/@cfpb/cfpb-design-system/dist/index.css' as *;
-@import '../../css/base';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use 'css/base' as *;
 
 .search-bar {
   @media screen and (max-width: $layout-breakpoint-phone-max) {

src/components/Search/Hero/Hero.scss

@@ -1,11 +1,10 @@
-@use 'node_modules/@cfpb/cfpb-design-system/src/abstracts' as *;
-@use 'node_modules/@cfpb/cfpb-design-system/src/base' as *;
-@use 'node_modules/@cfpb/cfpb-design-system/dist/index.css' as *;
-@import '../../css/base';
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use 'css/base' as *;
 
 .search-panel {
   padding: $grid-gutter-width;
   border-right: 1px solid var(--gray-40);
+  background-color: var(--gray-5);
 
   @media screen and (min-width: $layout-breakpoint-desktop-min) {
     padding: $grid-gutter-width;
@@ -15,7 +14,6 @@
     padding: $gutter-narrow;
     min-height: 150px;
   }
-  background-color: var(--gray-5);
 }
 
 .date-subscript {

src/components/Search/Pill.scss

@@ -1,7 +1,6 @@
 @use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/utilities' as *;
-@import '../css/base';
+@use 'css/base';
 
 .tabbed-navigation {
   margin-top: 30px;

src/components/Search/PillPanel.scss

@@ -1,7 +1,7 @@
 @use '../../../node_modules/intro.js/introjs.css' as *;
 
 // Intro.js styles
-@import '../../css/base';
+@use 'css/base' as *;
 
 .introjs-tooltip.wide {
   max-width: 80vw !important;

src/components/Search/SearchBar.scss

@@ -1,4 +1,5 @@
-@import '../TabbedNavigation';
+@use 'css/base' as *;
+@use '../TabbedNavigation';
 
 .focus-header {
   .clear-focus {

src/components/Search/SearchPanel.scss

@@ -1,4 +1,4 @@
-@import '../TabbedNavigation';
+@use '../TabbedNavigation';
 
 .tabbed-navigation {
   &.lens {

src/components/TabbedNavigation.scss

@@ -1,4 +1,4 @@
-@import '../TabbedNavigation';
+@use '../TabbedNavigation';
 
 .trend-depth-toggle {
   background: var(--gray-10);

src/components/Tour/Tour.scss

@@ -1,4 +1,4 @@
-@import '../../../css/base';
+@use 'css/base' as *;
 
 .trends-panel {
   .refine-bar {

src/components/Trends/FocusHeader.scss

@@ -1,6 +1,5 @@
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/utilities' as *;
-@import '../../css/base';
+@use 'css/base' as *;
 
 .typeahead {
   input {

src/components/Trends/LensTabs.scss

@@ -1,6 +1,5 @@
 @use 'sass:math';
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/utilities' as *;
 
 // select
 $select-border: var(--gray-40);

src/components/Trends/TrendDepthToggle.scss

@@ -1,14 +1,10 @@
 // Import Design System Components.
-@use '@cfpb/cfpb-design-system/src/index' as *;
 @use '@cfpb/cfpb-design-system/src/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/base' as *;
-@use '@cfpb/cfpb-design-system/src/utilities' as *;
 
 // no atomic components
-@import 'base';
-@import '../components/Print/print';
-@include define-custom-props;
-@include licensed-font;
+@use 'base' as *;
+@use 'components/Print/print' as *;
+
 
 // Icon font path
 $cf-icon-path: '../css/fonts';
@@ -203,4 +199,4 @@ $cf-fonts-path: '/static/fonts';
 
 ::-ms-clear {
   display: none;
-}
+}

src/components/Trends/TrendsPanel/TrendsPanel.scss

@@ -1,8 +1,9 @@
 @use 'sass:math';
-@use '@cfpb/cfpb-design-system/src/abstracts/index' as *;
-@use '@cfpb/cfpb-design-system/src/base/index' as *;
-@use '@cfpb/cfpb-design-system/src/index' as *;
-@use '@cfpb/cfpb-design-system/src/utilities' as *;
+@use '@cfpb/cfpb-design-system/src/abstracts' as *;
+@use '@cfpb/cfpb-design-system/src/base' as *;
+@use '@cfpb/cfpb-design-system/dist/index.css' as *;
+@include define-custom-props;
+@include licensed-font;
 
 
 /* ==========================================================================