diff --git a/cms/envs/common.py b/cms/envs/common.py index a01c42517420..4b7282059499 100644 --- a/cms/envs/common.py +++ b/cms/envs/common.py @@ -1439,8 +1439,7 @@ WEBPACK_LOADER = { 'DEFAULT': { 'BUNDLE_DIR_NAME': 'bundles/', - 'STATS_FILE': os.path.join(STATIC_ROOT, 'webpack-stats.json'), - 'LOADER_CLASS': 'xmodule.util.xmodule_django.XModuleWebpackLoader', + 'STATS_FILE': os.path.join(STATIC_ROOT, 'webpack-stats.json') }, 'WORKERS': { 'BUNDLE_DIR_NAME': 'bundles/', diff --git a/cms/static/sass/_build-v1.scss b/cms/static/sass/_build-v1.scss index fefd095e21a7..2a32c688e5a1 100644 --- a/cms/static/sass/_build-v1.scss +++ b/cms/static/sass/_build-v1.scss @@ -84,6 +84,8 @@ // +Xmodule // ==================== +@import 'xmodule/modules/css/module-styles.scss'; +@import 'xmodule/descriptors/css/module-styles.scss'; @import 'xmodule/headings'; @import 'elements/xmodules'; // styling for Studio-specific contexts @import 'developer'; // used for any developer-created scss that needs further polish/refactoring diff --git a/lms/envs/common.py b/lms/envs/common.py index 4d1e2f9d1ec2..e3e486108f60 100644 --- a/lms/envs/common.py +++ b/lms/envs/common.py @@ -2696,8 +2696,7 @@ def _make_locale_paths(settings): # pylint: disable=missing-function-docstring WEBPACK_LOADER = { 'DEFAULT': { 'BUNDLE_DIR_NAME': 'bundles/', - 'STATS_FILE': os.path.join(STATIC_ROOT, 'webpack-stats.json'), - 'LOADER_CLASS': 'xmodule.util.xmodule_django.XModuleWebpackLoader', + 'STATS_FILE': os.path.join(STATIC_ROOT, 'webpack-stats.json') }, 'WORKERS': { 'BUNDLE_DIR_NAME': 'bundles/', diff --git a/lms/static/sass/_build-course.scss b/lms/static/sass/_build-course.scss index 732eb2caf888..103e299b2e93 100644 --- a/lms/static/sass/_build-course.scss +++ b/lms/static/sass/_build-course.scss @@ -26,6 +26,7 @@ @import 'course/base/mixins'; @import 'course/base/base'; @import 'course/base/extends'; +@import 'xmodule/modules/css/module-styles.scss'; @import 'course/courseware/courseware'; @import 'course/courseware/sidebar'; @import 'course/courseware/amplifier'; @@ -56,6 +57,7 @@ @import "course/gradebook"; @import "course/instructor/instructor_2"; @import "course/instructor/email"; +@import "xmodule/descriptors/css/module-styles.scss"; // course - ccx_coach @import "course/ccx_coach/dashboard"; diff --git a/pavelib/assets.py b/pavelib/assets.py index 35dcb8499cd3..003c76487585 100644 --- a/pavelib/assets.py +++ b/pavelib/assets.py @@ -170,8 +170,6 @@ def get_theme_sass_dirs(system, theme_dir): css_dir = theme_dir / system / "static" / "css" certs_sass_dir = theme_dir / system / "static" / "certificates" / "sass" certs_css_dir = theme_dir / system / "static" / "certificates" / "css" - xmodule_sass_folder = "modules" if system == 'lms' else "descriptors" - xmodule_sass_dir = path("common") / "static" / "xmodule" / xmodule_sass_folder / "scss" dependencies = SASS_LOOKUP_DEPENDENCIES.get(system, []) if sass_dir.isdir(): @@ -199,15 +197,6 @@ def get_theme_sass_dirs(system, theme_dir): ], }) - dirs.append({ - "sass_source_dir": xmodule_sass_dir, - "css_destination_dir": path("common") / "static" / "css" / "xmodule", - "lookup_paths": dependencies + [ - sass_dir / "partials", - sass_dir, - ], - }) - # now compile theme sass files for certificate if system == 'lms': dirs.append({ @@ -234,8 +223,6 @@ def get_system_sass_dirs(system): dirs = [] sass_dir = path(system) / "static" / "sass" css_dir = path(system) / "static" / "css" - xmodule_sass_folder = "modules" if system == 'lms' else "descriptors" - xmodule_sass_dir = path("common") / "static" / "xmodule" / xmodule_sass_folder / "scss" dependencies = SASS_LOOKUP_DEPENDENCIES.get(system, []) dirs.append({ @@ -247,15 +234,6 @@ def get_system_sass_dirs(system): ], }) - dirs.append({ - "sass_source_dir": xmodule_sass_dir, - "css_destination_dir": path("common") / "static" / "css" / "xmodule", - "lookup_paths": dependencies + [ - sass_dir / "partials", - sass_dir, - ], - }) - if system == 'lms': dirs.append({ "sass_source_dir": path(system) / "static" / "certificates" / "sass", diff --git a/xmodule/css/annotatable/display.scss b/xmodule/css/annotatable/display.scss index 1880df04eb75..f35a16035639 100644 --- a/xmodule/css/annotatable/display.scss +++ b/xmodule/css/annotatable/display.scss @@ -4,10 +4,6 @@ * that the LMS did, so the quick fix was to localize the LMS variables not shared by the CMS. * -Abarrett and Vshnayder */ -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'lms/theme/variables-v1'; - $annotatable--border-color: $gray-l3; $annotatable--body-font-size: em(14); diff --git a/xmodule/css/capa/display.scss b/xmodule/css/capa/display.scss index 268be77cb1a2..b8536a40d159 100644 --- a/xmodule/css/capa/display.scss +++ b/xmodule/css/capa/display.scss @@ -18,10 +18,7 @@ // * +Problem - Choice Text Group // * +Problem - Image Input Overrides // * +Problem - Annotation Problem Overrides -@import 'vendor/bi-app/bi-app-ltr'; @import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'lms/theme/variables-v1'; // +Variables - Capa // ==================== diff --git a/xmodule/css/editor/edit.scss b/xmodule/css/editor/edit.scss index 046ab39a068e..cd740c41171c 100644 --- a/xmodule/css/editor/edit.scss +++ b/xmodule/css/editor/edit.scss @@ -1,9 +1,3 @@ -@import 'vendor/bi-app/bi-app-ltr'; -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'cms/theme/variables-v1'; -@import 'mixins'; - // This is shared CSS between the xmodule problem editor and the xmodule HTML editor. .editor { position: relative; diff --git a/xmodule/css/html/display.scss b/xmodule/css/html/display.scss index eff4b1b00b5d..d9e123e6d5e0 100644 --- a/xmodule/css/html/display.scss +++ b/xmodule/css/html/display.scss @@ -1,7 +1,4 @@ -@import 'vendor/bi-app/bi-app-ltr'; @import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'lms/theme/variables-v1'; // HTML component display: * { diff --git a/xmodule/css/lti/lti.scss b/xmodule/css/lti/lti.scss index 4bd2c41317f5..88540aee09e9 100644 --- a/xmodule/css/lti/lti.scss +++ b/xmodule/css/lti/lti.scss @@ -1,9 +1,3 @@ -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'lms/theme/variables-v1'; -@import 'base/mixins'; - h2.problem-header { display: inline-block; } diff --git a/xmodule/css/poll/display.scss b/xmodule/css/poll/display.scss index 7c07f89376b2..cf46fcf3bf4d 100644 --- a/xmodule/css/poll/display.scss +++ b/xmodule/css/poll/display.scss @@ -1,8 +1,3 @@ -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'lms/theme/variables-v1'; - div.poll_question { @media print { display: block; diff --git a/xmodule/css/sequence/display.scss b/xmodule/css/sequence/display.scss index 3ddda8b37d09..55a24eadad85 100644 --- a/xmodule/css/sequence/display.scss +++ b/xmodule/css/sequence/display.scss @@ -1,10 +1,3 @@ -@import 'vendor/bi-app/bi-app-ltr'; -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'bootstrap/scss/mixins/breakpoints'; -@import 'lms/theme/variables-v1'; - $seq-nav-border-color: $border-color !default; $seq-nav-hover-color: rgb(245, 245, 245) !default; $seq-nav-link-color: $link-color !default; diff --git a/xmodule/css/tabs/tabs.scss b/xmodule/css/tabs/tabs.scss index 425e4d137045..e8b025442de4 100644 --- a/xmodule/css/tabs/tabs.scss +++ b/xmodule/css/tabs/tabs.scss @@ -1,9 +1,4 @@ // styles duped from _unit.scss - Edit Header (Component Name, Mode-Editor, Mode-Settings) -@import 'vendor/bi-app/bi-app-ltr'; -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'cms/theme/variables-v1'; -@import 'mixins'; .tabs-wrapper { diff --git a/xmodule/css/video/accessible_menu.scss b/xmodule/css/video/accessible_menu.scss index f7153fa98429..c9b56604c994 100644 --- a/xmodule/css/video/accessible_menu.scss +++ b/xmodule/css/video/accessible_menu.scss @@ -1,5 +1,3 @@ -@import 'base/mixins'; - $a11y--gray: rgb(127, 127, 127); $a11y--blue: rgb(0, 159, 230); $a11y--gray-d1: shade($gray, 20%); diff --git a/xmodule/css/video/display.scss b/xmodule/css/video/display.scss index 467c5960751e..80292f1f230c 100644 --- a/xmodule/css/video/display.scss +++ b/xmodule/css/video/display.scss @@ -8,12 +8,7 @@ // -------- // Defaults: what displays if the icon font doesn't load. // -------- -@import 'vendor/bi-app/bi-app-ltr'; @import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'bootstrap/scss/mixins/breakpoints'; -@import 'lms/theme/variables-v1'; // the html target is necessary for xblocks and xmodules, but works across the board diff --git a/xmodule/css/word_cloud/display.scss b/xmodule/css/word_cloud/display.scss index 0b8940ab9abe..154dde27c331 100644 --- a/xmodule/css/word_cloud/display.scss +++ b/xmodule/css/word_cloud/display.scss @@ -1,8 +1,3 @@ -@import 'bourbon/bourbon'; -@import 'lms/theme/variables'; -@import 'bootstrap/scss/variables'; -@import 'lms/theme/variables-v1'; - .input-cloud { margin: ($baseline/4); } diff --git a/xmodule/static_content.py b/xmodule/static_content.py index 2447347da90f..de705320de51 100755 --- a/xmodule/static_content.py +++ b/xmodule/static_content.py @@ -91,7 +91,7 @@ class VideoBlock(HTMLSnippet): # lint-amnesty, pylint: disable=abstract-method def write_module_styles(output_root): """Write all registered XModule css, sass, and scss files to output root.""" - return _write_styles('.xmodule_display', output_root, XBLOCK_CLASSES, 'get_preview_view_css', 'Preview') + return _write_styles('.xmodule_display', output_root, XBLOCK_CLASSES, 'get_preview_view_css') def write_module_js(output_root): @@ -101,7 +101,7 @@ def write_module_js(output_root): def write_descriptor_styles(output_root): """Write all registered XModuleDescriptor css, sass, and scss files to output root.""" - return _write_styles('.xmodule_edit', output_root, XBLOCK_CLASSES, 'get_studio_view_css', 'Studio') + return _write_styles('.xmodule_edit', output_root, XBLOCK_CLASSES, 'get_studio_view_css') def write_descriptor_js(output_root): @@ -120,7 +120,7 @@ def _ensure_dir(directory): raise -def _write_styles(selector, output_root, classes, css_attribute, suffix): +def _write_styles(selector, output_root, classes, css_attribute): """ Write the css fragments from all XModules in `classes` into `output_root` as individual files, hashed by the contents to remove @@ -147,18 +147,17 @@ def _write_styles(selector, output_root, classes, css_attribute, suffix): for class_ in classes: css_imports[class_].add(fragment_name) - for class_, fragment_names in sorted(css_imports.items()): - module_styles_lines = [] + 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( class_=class_, selector=selector )) module_styles_lines.extend(f' @import "{name}";' for name in fragment_names) module_styles_lines.append('}') - file_hash = hashlib.md5("".join(fragment_names).encode('ascii')).hexdigest() - contents[f"{class_}{suffix}.{file_hash}.scss"] = '\n'.join(module_styles_lines) + contents['_module-styles.scss'] = '\n'.join(module_styles_lines) _write_files(output_root, contents) @@ -306,9 +305,9 @@ def main(): root = path(args['']) descriptor_files = write_descriptor_js(root / 'descriptors/js') - write_descriptor_styles(root / 'descriptors/scss') + write_descriptor_styles(root / 'descriptors/css') module_files = write_module_js(root / 'modules/js') - write_module_styles(root / 'modules/scss') + write_module_styles(root / 'modules/css') write_webpack(root / 'webpack.xmodule.config.js', module_files, descriptor_files) diff --git a/xmodule/util/xmodule_django.py b/xmodule/util/xmodule_django.py index 248e10bf981a..e09ea3a6e981 100644 --- a/xmodule/util/xmodule_django.py +++ b/xmodule/util/xmodule_django.py @@ -5,89 +5,9 @@ """ -from os import listdir - import webpack_loader # NOTE: we are importing this method so that any module that imports us has access to get_current_request from crum import get_current_request -from django.conf import settings -from webpack_loader.loader import WebpackLoader - - -class XModuleWebpackLoader(WebpackLoader): - """ - Custom webpack loader that consumes the output generated by webpack-bundle-tracker - and the files from XModule style generation stage. Briefly, this allows to use the - generated js bundles and compiled assets for XModule-style during Xblocks rendering. - """ - - def load_assets(self): - """ - This function will append XModule css files to the standard load_assets results. - - The standard WebpackLoader load_assets method returns a dictionary like the following: - - { - 'status': 'done', - 'chunks': { - 'AnnotatableBlockPreview': [ - { - 'name': 'AnnotatableBlockPreview.js', - 'path': '/openedx/edx-platform/common/static/bundles/AnnotatableBlockPreview.js' - }, - { - 'name': 'AnnotatableBlockPreview.js.map', - 'path': '/openedx/edx-platform/common/static/bundles/AnnotatableBlockPreview.js.map' - } - ], - ... - } - } - - Chunks key contains the data for every file in /openedx/edx-platform/common/static/bundles/, that - is a folder created during the compilation theme, this method will append the listed files in - common/static/css/xmodule to the correspondent key, the result will be the following: - - { - 'status': 'done', - 'chunks': { - 'AnnotatableBlockPreview': [ - { - 'name': 'AnnotatableBlockPreview.js', - 'path': '/openedx/edx-platform/common/static/bundles/AnnotatableBlockPreview.js' - }, - { - 'name': 'AnnotatableBlockPreview.js.map', - 'path': '/openedx/edx-platform/common/static/bundles/AnnotatableBlockPreview.js.map' - }, - { - 'name': 'AnnotatableBlockPreview.85745121.css', - 'path': 'common/static/css/xmodule/AnnotatableBlockPreview.85745121.css', - 'publicPath': '/static/css/xmodule/AnnotatableBlockPreview.85745121.css' - } - ], - ... - } - } - - Returns: - dict: Assets dictionary as described above. - """ - assets = super().load_assets() - - css_path = "common/static/css/xmodule" - css_files = listdir(css_path) - - for css_file in css_files: - name = css_file.split(".")[0] - css_chunk = { - "name": css_file, - "path": f"{css_path}/{css_file}", - "publicPath": f"{settings.STATIC_URL}css/xmodule/{css_file}", - } - assets["chunks"][name].append(css_chunk) - - return assets def get_current_request_hostname():