build: commit XModule SCSS entrypoints of generating them (#32290)

`xmodule_assets` generated a series of SCSS "entrypoint"
files, where each entrypoint file imported from the
SCSS "sources" in xmodule/css.

This process was more complicated up until very
recently (see PRs in issue linked below for more
context). Now that the process is simpler, though,
there is no reason to generate the SCSS entrypoints;
we can just commit them to the repository instead!
So, we go from this:

    # GENERATED: SCSS entrypoints files for CMS
    common/static/xmodule/descriptors:
       AboutBlockStudio.scss
       AnnotatableBlockStudio.scss
       ...
    # GENERATED: SCSS entrypoints files for LMS
    common/static/xmodule/modules:
       AboutBlockPreview.scss
       AnnotatableBlockPreview.scss
       ...
    # VERSION CONTROLLED: SCSS source files
    xmodule/css:
      annotatable/...
      capa/...
      ...

to this:

    # VERSION CONTROLLED: All XModule SCSS
    xmodule/static/sass:
      # Source files
      include:
        annotatable/...
        capa/...
        ...
      # CMS entrypoint files
      cms:
        AboutBlockStudio.scss
        AnnotatableBlockStudio.scss
        ...
      # LMS source files
      lms:
        AboutBlockPreview.scss
        AnnotatableBlockPreview.scss
        ...

Also, we are able to remove all SCSS-related logic from the
`xmodule_assets` script and from the `HTMLSnippet` class.
XModule JS assets still need processing, but we will address
those in a separate series of PRs.

Part of: https://github.com/openedx/edx-platform/issues/32292

pavelib/assets.py

@@ -170,9 +170,8 @@ 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"
-    xmodule_lookup_dir = path("xmodule") / "css"
+    xmodule_sass_dir = path("xmodule") / "static" / "sass" / system
+    xmodule_lookup_dir = path("xmodule") / "static" / "sass" / "include"
 
     dependencies = SASS_LOOKUP_DEPENDENCIES.get(system, [])
     if sass_dir.isdir():
@@ -238,9 +237,8 @@ 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"
-    xmodule_lookup_dir = path("xmodule") / "css"
+    xmodule_sass_dir = path("xmodule") / "static" / "sass" / system
+    xmodule_lookup_dir = path("xmodule") / "static" / "sass" / "include"
 
     dependencies = SASS_LOOKUP_DEPENDENCIES.get(system, [])
     dirs.append({

xmodule/annotatable_block.py

@@ -82,11 +82,6 @@ class AnnotatableBlock(
         ],
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js'),
     }
-    preview_view_css = {
-        'scss': [
-            resource_filename(__name__, 'css/annotatable/display.scss'),
-        ],
-    }
 
     studio_view_js = {
         'js': [
@@ -94,11 +89,6 @@ class AnnotatableBlock(
         ],
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js'),
     }
-    studio_view_css = {
-        'scss': [
-            resource_filename(__name__, 'css/codemirror/codemirror.scss'),
-        ],
-    }
     studio_js_module_name = "XMLEditingDescriptor"
     mako_template = "widgets/raw-edit.html"
 

xmodule/capa_block.py

@@ -177,12 +177,6 @@ class ProblemBlock(
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js')
     }
 
-    preview_view_css = {
-        'scss': [
-            resource_filename(__name__, 'css/capa/display.scss'),
-        ],
-    }
-
     studio_view_js = {
         'js': [
             resource_filename(__name__, 'js/src/problem/edit.js'),
@@ -190,13 +184,6 @@ class ProblemBlock(
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js'),
     }
 
-    studio_view_css = {
-        'scss': [
-            resource_filename(__name__, 'css/editor/edit.scss'),
-            resource_filename(__name__, 'css/problem/edit.scss'),
-        ]
-    }
-
     display_name = String(
         display_name=_("Display Name"),
         help=_("The display name for this component."),

xmodule/conditional_block.py

@@ -154,9 +154,6 @@ class ConditionalBlock(
         ],
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js'),
     }
-    preview_view_css = {
-        'scss': [],
-    }
 
     mako_template = 'widgets/metadata-edit.html'
     studio_js_module_name = 'SequenceDescriptor'
@@ -164,9 +161,6 @@ class ConditionalBlock(
         'js': [resource_filename(__name__, 'js/src/sequence/edit.js')],
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js'),
     }
-    studio_view_css = {
-        'scss': [],
-    }
 
     # Map
     # key: <tag attribute in xml>

xmodule/html_block.py

@@ -152,7 +152,6 @@ class HtmlBlockMixin(  # lint-amnesty, pylint: disable=abstract-method
         ],
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js'),
     }
-    preview_view_css = {'scss': [resource_filename(__name__, 'css/html/display.scss')]}
 
     uses_xmodule_styles_setup = True
 
@@ -168,12 +167,6 @@ class HtmlBlockMixin(  # lint-amnesty, pylint: disable=abstract-method
         ],
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js'),
     }
-    studio_view_css = {
-        'scss': [
-            resource_filename(__name__, 'css/editor/edit.scss'),
-            resource_filename(__name__, 'css/html/edit.scss')
-        ]
-    }
 
     # VS[compat] TODO (cpennington): Delete this method once all fall 2012 course
     # are being edited in the cms

xmodule/library_content_block.py

@@ -99,9 +99,6 @@ class LibraryContentBlock(
         'js': [],
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js'),
     }
-    preview_view_css = {
-        'scss': [],
-    }
 
     mako_template = 'widgets/metadata-edit.html'
     studio_js_module_name = "VerticalDescriptor"
@@ -111,9 +108,6 @@ class LibraryContentBlock(
         ],
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js'),
     }
-    studio_view_css = {
-        'scss': [],
-    }
 
     show_in_read_only_mode = True
 

xmodule/lti_block.py

@@ -378,11 +378,6 @@ class LTIBlock(
         ],
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js'),
     }
-    preview_view_css = {
-        'scss': [
-            resource_filename(__name__, 'css/lti/lti.scss')
-        ],
-    }
 
     mako_template = 'widgets/metadata-only-edit.html'
 
@@ -393,9 +388,6 @@ class LTIBlock(
         ],
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js'),
     }
-    studio_view_css = {
-        'scss': [],
-    }
 
     def studio_view(self, _context):
         """

xmodule/poll_block.py

@@ -92,11 +92,6 @@ class PollBlock(
         ],
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js'),
     }
-    preview_view_css = {
-        'scss': [
-            resource_filename(__name__, 'css/poll/display.scss')
-        ],
-    }
 
     # There is no studio_view() for this XBlock but this is needed to make the
     # the static_content command happy.
@@ -105,10 +100,6 @@ class PollBlock(
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js')
     }
 
-    studio_view_css = {
-        'scss': []
-    }
-
     def handle_ajax(self, dispatch, data):  # lint-amnesty, pylint: disable=unused-argument
         """Ajax handler.
 

xmodule/seq_block.py

@@ -278,12 +278,6 @@ class SequenceBlock(
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js')
     }
 
-    preview_view_css = {
-        'scss': [
-            resource_filename(__name__, 'css/sequence/display.scss'),
-        ],
-    }
-
     # There is no studio_view() for this XBlock but this is needed to make the
     # the static_content command happy.
     studio_view_js = {
@@ -291,10 +285,6 @@ class SequenceBlock(
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js')
     }
 
-    studio_view_css = {
-        'scss': []
-    }
-
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
 

xmodule/split_test_block.py

@@ -162,9 +162,6 @@ class SplitTestBlock(  # lint-amnesty, pylint: disable=abstract-method
         'js': [],
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js'),
     }
-    preview_view_css = {
-        'scss': [],
-    }
 
     mako_template = "widgets/metadata-only-edit.html"
     studio_js_module_name = 'SequenceDescriptor'
@@ -172,9 +169,6 @@ class SplitTestBlock(  # lint-amnesty, pylint: disable=abstract-method
         'js': [resource_filename(__name__, 'js/src/sequence/edit.js')],
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js'),
     }
-    studio_view_css = {
-        'scss': [],
-    }
 
     @cached_property
     def child_block(self):

xmodule/static/sass/cms/AboutBlockStudio.scss

@@ -0,0 +1,4 @@
+.xmodule_edit.xmodule_AboutBlock {
+  @import "editor/edit.scss";
+  @import "html/edit.scss";
+}

xmodule/static/sass/cms/AnnotatableBlockStudio.scss

@@ -0,0 +1,3 @@
+.xmodule_edit.xmodule_AnnotatableBlock {
+  @import "codemirror/codemirror.scss";
+}

xmodule/static/sass/cms/CourseInfoBlockStudio.scss

@@ -0,0 +1,4 @@
+.xmodule_edit.xmodule_CourseInfoBlock {
+  @import "editor/edit.scss";
+  @import "html/edit.scss";
+}

xmodule/static/sass/cms/CustomTagBlockStudio.scss

@@ -0,0 +1,3 @@
+.xmodule_edit.xmodule_CustomTagBlock {
+  @import "codemirror/codemirror.scss";
+}

xmodule/static/sass/cms/HtmlBlockStudio.scss

@@ -0,0 +1,4 @@
+.xmodule_edit.xmodule_HtmlBlock {
+  @import "editor/edit.scss";
+  @import "html/edit.scss";
+}

xmodule/static/sass/cms/ProblemBlockStudio.scss

@@ -0,0 +1,4 @@
+.xmodule_edit.xmodule_ProblemBlock {
+  @import "editor/edit.scss";
+  @import "problem/edit.scss";
+}

xmodule/static/sass/cms/StaticTabBlockStudio.scss

@@ -0,0 +1,4 @@
+.xmodule_edit.xmodule_StaticTabBlock {
+  @import "editor/edit.scss";
+  @import "html/edit.scss";
+}

xmodule/static/sass/cms/VideoBlockStudio.scss

@@ -0,0 +1,3 @@
+.xmodule_edit.xmodule_VideoBlock {
+  @import "tabs/tabs.scss";
+}

xmodule/static/sass/lms/AboutBlockPreview.scss

@@ -0,0 +1,3 @@
+.xmodule_display.xmodule_AboutBlock {
+  @import "html/display.scss";
+}

xmodule/static/sass/lms/AnnotatableBlockPreview.scss

@@ -0,0 +1,3 @@
+.xmodule_display.xmodule_AnnotatableBlock {
+  @import "annotatable/display.scss";
+}

xmodule/static/sass/lms/CourseInfoBlockPreview.scss

@@ -0,0 +1,3 @@
+.xmodule_display.xmodule_CourseInfoBlock {
+  @import "html/display.scss";
+}

xmodule/static/sass/lms/HtmlBlockPreview.scss

@@ -0,0 +1,3 @@
+.xmodule_display.xmodule_HtmlBlock {
+  @import "html/display.scss";
+}

xmodule/static/sass/lms/LTIBlockPreview.scss

@@ -0,0 +1,3 @@
+.xmodule_display.xmodule_LTIBlock {
+  @import "lti/lti.scss";
+}

xmodule/static/sass/lms/PollBlockPreview.scss

@@ -0,0 +1,3 @@
+.xmodule_display.xmodule_PollBlock {
+  @import "poll/display.scss";
+}

xmodule/static/sass/lms/ProblemBlockPreview.scss

@@ -0,0 +1,3 @@
+.xmodule_display.xmodule_ProblemBlock {
+  @import "capa/display.scss";
+}

xmodule/static/sass/lms/SequenceBlockPreview.scss

@@ -0,0 +1,3 @@
+.xmodule_display.xmodule_SequenceBlock {
+  @import "sequence/display.scss";
+}

xmodule/static/sass/lms/StaticTabBlockPreview.scss

@@ -0,0 +1,3 @@
+.xmodule_display.xmodule_StaticTabBlock {
+  @import "html/display.scss";
+}

xmodule/static/sass/lms/VideoBlockPreview.scss

@@ -0,0 +1,4 @@
+.xmodule_display.xmodule_VideoBlock {
+  @import "video/display.scss";
+  @import "video/accessible_menu.scss";
+}

xmodule/static/sass/lms/WordCloudBlockPreview.scss

@@ -0,0 +1,3 @@
+.xmodule_display.xmodule_WordCloudBlock {
+  @import "word_cloud/display.scss";
+}

xmodule/static_content.py

@@ -1,7 +1,7 @@
 # /usr/bin/env python
 """
-This module has utility functions for gathering up the static content
-that is defined by XModules and XModuleDescriptors (javascript and css)
+This module has utility functions for gathering up the javascript
+that is defined by XModules and XModuleDescriptors
 """
 
 
@@ -47,12 +47,6 @@ class VideoBlock(HTMLSnippet):  # lint-amnesty, pylint: disable=abstract-method
         ],
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js')
     }
-    preview_view_css = {
-        'scss': [
-            resource_filename(__name__, 'css/video/display.scss'),
-            resource_filename(__name__, 'css/video/accessible_menu.scss'),
-        ],
-    }
 
     studio_view_js = {
         'js': [
@@ -61,12 +55,6 @@ class VideoBlock(HTMLSnippet):  # lint-amnesty, pylint: disable=abstract-method
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js'),
     }
 
-    studio_view_css = {
-        'scss': [
-            resource_filename(__name__, 'css/tabs/tabs.scss'),
-        ]
-    }
-
 
 # List of XBlocks which use this static content setup.
 # Should only be used for XModules being converted to XBlocks.
@@ -89,21 +77,11 @@ 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', 'Preview')
-
-
 def write_module_js(output_root):
     """Write all registered XModule js and coffee files to output root."""
     return _write_js(output_root, XBLOCK_CLASSES, 'get_preview_view_js')
 
 
-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')
-
-
 def write_descriptor_js(output_root):
     """Write all registered XModuleDescriptor js and coffee files to output root."""
     return _write_js(output_root, XBLOCK_CLASSES, 'get_studio_view_js')
@@ -120,33 +98,6 @@ def _ensure_dir(directory):
             raise
 
 
-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
-    """
-    contents = {}
-    xmodule_scss_path = resource_filename(__name__, "") + "/css/"
-
-    for class_ in classes:
-        class_css = getattr(class_, css_attribute)()
-        rel_fragment_paths = []
-        for fragment_path in class_css.get('scss', []):
-            rel_fragment_path = fragment_path.split(xmodule_scss_path)[1]
-            rel_fragment_paths.append(rel_fragment_path)
-
-        module_styles_lines = []
-        module_styles_lines.append("""{selector}.xmodule_{class_.__name__} {{""".format(
-            class_=class_, selector=selector
-        ))
-        module_styles_lines.extend(f'  @import "{path}";' for path in rel_fragment_paths)
-        module_styles_lines.append('}')
-
-        contents[f"{class_.__name__}{suffix}.scss"] = '\n'.join(module_styles_lines)
-
-    _write_files(output_root, contents)
-
-
 def _write_js(output_root, classes, js_attribute):
     """
     Write the javascript fragments from all XModules in `classes`
@@ -294,9 +245,7 @@ def main():
     root = path(args['<output_root>'])
 
     descriptor_files = write_descriptor_js(root / 'descriptors/js')
-    write_descriptor_styles(root / 'descriptors/scss')
     module_files = write_module_js(root / 'modules/js')
-    write_module_styles(root / 'modules/scss')
     write_webpack(root / 'webpack.xmodule.config.js', module_files, descriptor_files)
 
 

xmodule/template_block.py

@@ -69,16 +69,10 @@ class CustomTagBlock(CustomTagTemplateBlock):  # pylint: disable=abstract-method
         'js': [],
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js'),
     }
-    preview_view_css = {
-        'scss': [],
-    }
     studio_view_js = {
         'js': [resource_filename(__name__, 'js/src/raw/edit/xml.js')],
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js'),
     }
-    studio_view_css = {
-        'scss': [resource_filename(__name__, 'css/codemirror/codemirror.scss')],
-    }
 
     def studio_view(self, _context):
         """

xmodule/word_cloud_block.py

@@ -118,11 +118,6 @@ class WordCloudBlock(  # pylint: disable=abstract-method
         ],
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js'),
     }
-    preview_view_css = {
-        'scss': [
-            resource_filename(__name__, 'css/word_cloud/display.scss'),
-        ],
-    }
 
     studio_view_js = {
         'js': [
@@ -130,9 +125,6 @@ class WordCloudBlock(  # pylint: disable=abstract-method
         ],
         'xmodule_js': resource_filename(__name__, 'js/src/xmodule.js'),
     }
-    studio_view_css = {
-        'scss': [],
-    }
     studio_js_module_name = "MetadataOnlyEditingDescriptor"
     mako_template = "widgets/metadata-only-edit.html"
 

xmodule/x_module.py

@@ -215,9 +215,6 @@ class HTMLSnippet:
     preview_view_js = {}
     studio_view_js = {}
 
-    preview_view_css = {}
-    studio_view_css = {}
-
     @classmethod
     def get_preview_view_js(cls):
         return cls.preview_view_js
@@ -234,14 +231,6 @@ class HTMLSnippet:
     def get_studio_view_js_bundle_name(cls):
         return cls.__name__ + 'Studio'
 
-    @classmethod
-    def get_preview_view_css(cls):
-        return cls.preview_view_css
-
-    @classmethod
-    def get_studio_view_css(cls):
-        return cls.studio_view_css
-
     def get_html(self):
         """
         Return the html used to display this snippet