Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: move general imports to specific scss files #32121

Merged
merged 1 commit into from
Apr 27, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions lms/static/sass/course/courseware/_sidebar.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import 'bourbon/bourbon';

.course-index {
@include transition(all 0.2s $ease-in-out-quad 0s);
@include border-right(1px solid $border-color-2);
Expand Down
1 change: 1 addition & 0 deletions xmodule/css/capa/display.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
// * +Problem - Choice Text Group
// * +Problem - Image Input Overrides
// * +Problem - Annotation Problem Overrides
@import 'bourbon/bourbon';

// +Variables - Capa
// ====================
Expand Down
2 changes: 2 additions & 0 deletions xmodule/css/html/display.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@import 'bourbon/bourbon';

// HTML component display:
* {
line-height: 1.4em;
Expand Down
4 changes: 0 additions & 4 deletions xmodule/css/tabs/tabs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -130,10 +130,6 @@
padding: 0;
border: none;
}

.blue-button {
@include blue-button;
}
Comment on lines -133 to -136
Copy link
Member

Choose a reason for hiding this comment

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

Sorry, I am having trouble understanding what you mean here:

That was happening because the import order had changed and an specific button mixin was not overridden by bourbon, the file that generates that difference is this one, that use the blue-button mixin, and that mixin use inside the button mixin in this line, when the bourbon import is made in the file openedx-assets xmodule that override the button mixin with this however when I applied this changes that uses this mixin

As I understand it, you are removing this block because it generates extra CSS in the video editor (which is the only thing that uses tabs.scss), but that CSS has no visual impact on the video editor, right?

Copy link
Contributor Author

@andrey-canon andrey-canon Apr 26, 2023

Choose a reason for hiding this comment

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

yes, that is the conclusion, that has no visual impact, the comment is probably a bad explanation of why the blue-button style change when I change the import place, but at the end it doesn't matter since that class doesn't exist in the current video editor

Copy link
Member

Choose a reason for hiding this comment

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

Sounds good to me 👍🏻

}


1 change: 1 addition & 0 deletions xmodule/css/video/display.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
// --------
// Defaults: what displays if the icon font doesn't load.
// --------
@import 'bourbon/bourbon';

// the html target is necessary for xblocks and xmodules, but works across the board

Expand Down
6 changes: 2 additions & 4 deletions xmodule/static_content.py
Original file line number Diff line number Diff line change
Expand Up @@ -147,10 +147,8 @@ def _write_styles(selector, output_root, classes, css_attribute):
for class_ in classes:
css_imports[class_].add(fragment_name)

module_styles_lines = [
"@import 'bourbon/bourbon';",
"@import 'lms/theme/variables';",
Copy link
Member

Choose a reason for hiding this comment

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

Is it true that none of the XModules use lms/theme/variables?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

no, that's false, probably one of them uses lms/theme/variables, however in this context it's hard to know which one, because the file _module-styles.scss is imported in a bigger file (_build-course.scss or _build-v1.scss) that already import that.

if you check this list after decoupling you will find that more of one import is necessary

Copy link
Member

Choose a reason for hiding this comment

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

Got it. Do you want to merge this PR first? If so, when you rebase the decoupling PR, do you think you will put @import 'lms/theme/variables'; back for some files?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yes, I'd like to merge this one first, in that way I can add just the required imports in the specific files in this PR

]
module_styles_lines = []

for class_, fragment_names in sorted(css_imports.items()):
fragment_names = sorted(fragment_names)
module_styles_lines.append("""{selector}.xmodule_{class_} {{""".format(
Expand Down