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:
@@ -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)
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user