Skip to content

Conversation

cdmh219
Copy link
Collaborator

@cdmh219 cdmh219 commented Oct 25, 2024

Several Sass deprecation warnings were showing up in the console upon running yarn start, and needed to be removed. In addition, several non-related tweaks were made to recent Design System / Sass Upgrade.
Screenshot 2024-10-28 at 9 19 42 AM

Additions

Removals

Changes

  • 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

Testing

  • Run yarn start, and check console. It should match below screenshot.
  • Running yarn lint and yarn run build to ensure that it works as previously expected, and has no errors.

Screenshots

Screenshot 2024-10-25 at 5 22 15 PM

Notes

Todos

Checklist

  • Changes are limited to a single goal (no scope creep)
  • Code can be automatically merged (no conflicts)
  • Code follows the standards laid out in the front end playbook
  • Passes all existing automated tests
  • New functions include new tests
  • New functions are documented (with a description, list of inputs, and expected output)
  • Placeholder code is flagged
  • Visually tested in supported browsers and devices
  • Project documentation has been updated (including the "Unreleased" section of the CHANGELOG)

…s (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
@cdmh219 cdmh219 requested a review from flacoman91 October 25, 2024 19:16
- 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
@cdmh219 cdmh219 marked this pull request as ready for review October 25, 2024 21:25
@flacoman91 flacoman91 changed the title DATAP-1580 DATAP-1580 - fix sass use/include deprecation warnings Oct 29, 2024
Copy link
Contributor

@flacoman91 flacoman91 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯 Awesome!

@@ -1,7 +1,7 @@
@use '../../../node_modules/intro.js/introjs.css' as *;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we need the relative path here for the intro.js css ?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably not, but I kept it mainly because I didn't know much about the intro.js library.

@cdmh219 cdmh219 added this pull request to the merge queue Oct 29, 2024
Merged via the queue into main with commit 4e9f629 Oct 29, 2024
2 checks passed
@cdmh219 cdmh219 deleted the DATAP-1580-Reorder-CSS-Imports-to-Fix-Sass-Deprecation-Warnings branch October 29, 2024 17:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants