Decouple XModule styles from LMS/Studio styles (attempt 3) (#32237)

This basically changes how the xmodule static files are
generated and consumed in order to separate the Xblock
styles from general style files. Includes:

* build: decople XModule style assets by using a custom webpack loader
* build: move scss imports to its specific file
* build: fix: add system dirs to theme lookup paths.  (fixes attempt 1)
* build: fix: use bootstrap variables instead of lms variables (fixes attempt 2)

This is an amendment to #32188,
which itself was an amendment to #32018.

Addressing the issue https://github.com/openedx/edx-platform/issues/31624
This commit is contained in:
Andrey Cañon
2023-05-18 08:00:44 -05:00
committed by GitHub
parent d7053a6783
commit 516eff0633
18 changed files with 172 additions and 14 deletions

View File

@@ -91,7 +91,7 @@ XBLOCK_CLASSES = [
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')
return _write_styles('.xmodule_display', output_root, XBLOCK_CLASSES, 'get_preview_view_css', 'Preview')
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')
return _write_styles('.xmodule_edit', output_root, XBLOCK_CLASSES, 'get_studio_view_css', 'Studio')
def write_descriptor_js(output_root):
@@ -120,7 +120,7 @@ def _ensure_dir(directory):
raise
def _write_styles(selector, output_root, classes, css_attribute):
def _write_styles(selector, output_root, classes, css_attribute, suffix):
"""
Write the css fragments from all XModules in `classes`
into `output_root` as individual files, hashed by the contents to remove
@@ -147,17 +147,18 @@ def _write_styles(selector, output_root, classes, css_attribute):
for class_ in classes:
css_imports[class_].add(fragment_name)
module_styles_lines = []
for class_, fragment_names in sorted(css_imports.items()):
module_styles_lines = []
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['_module-styles.scss'] = '\n'.join(module_styles_lines)
contents[f"{class_}{suffix}.{file_hash}.scss"] = '\n'.join(module_styles_lines)
_write_files(output_root, contents)
@@ -305,9 +306,9 @@ def main():
root = path(args['<output_root>'])
descriptor_files = write_descriptor_js(root / 'descriptors/js')
write_descriptor_styles(root / 'descriptors/css')
write_descriptor_styles(root / 'descriptors/scss')
module_files = write_module_js(root / 'modules/js')
write_module_styles(root / 'modules/css')
write_module_styles(root / 'modules/scss')
write_webpack(root / 'webpack.xmodule.config.js', module_files, descriptor_files)