Skip to content

Refactor progress table style constants into SCSS module - #48113

Merged
maddiedierker merged 3 commits into
revert-48103-revert-48021-revert-48020-revert-47093-webpack-5-upgradefrom
refactor-progress-table-styles
Sep 16, 2022
Merged

Refactor progress table style constants into SCSS module#48113
maddiedierker merged 3 commits into
revert-48103-revert-48021-revert-48020-revert-47093-webpack-5-upgradefrom
refactor-progress-table-styles

Conversation

@maddiedierker

@maddiedierker maddiedierker commented Sep 15, 2022

Copy link
Copy Markdown
Contributor

This branch will be merged into the Webpack upgrade #48105.

Prior to this fix, SCSS modules were broken with the upgrade to Webpack 5. Our Webpack configuration for modules was no longer working as expected because we had an SCSS file that was trying to behave as both global SCSS and as a module in different contexts; see #48103 for more details.

I've refactored that file into two separate files -- some global SCSS and constants stored in a module file. I initially tried to refactor everything into a module file, but there are some classes that can't be modularized because they are owned by external libraries (I've left a comment in the appropriate place to explain more).

@maddiedierker
maddiedierker changed the base branch from staging to revert-48103-revert-48021-revert-48020-revert-47093-webpack-5-upgrade September 16, 2022 16:15
$content-view-width: $content-width - $student-list-width;

:export {
MAX_BODY_HEIGHT: math.div($max-height, 1px);

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

these variables need to be in a module file so that we can access them in JS

@@ -39,12 +31,12 @@ $content-view-width: $content-width - $student-list-width;
}
.primary-row {

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

this file can't be a module file because some classes (like primary-row) are implemented by external libraries. in this case, we have a library that renders the progress table and applies its own classes

@maddiedierker
maddiedierker requested a review from a team September 16, 2022 16:29

@megcrenshaw megcrenshaw left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Nice investigative work!

@maddiedierker
maddiedierker merged commit 54611f1 into revert-48103-revert-48021-revert-48020-revert-47093-webpack-5-upgrade Sep 16, 2022
@maddiedierker
maddiedierker deleted the refactor-progress-table-styles branch September 16, 2022 17:05
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