From 46511d2683a00cdace18d87e5b2cd9046876f79c Mon Sep 17 00:00:00 2001 From: Kyle McCormick Date: Sat, 20 May 2023 09:50:16 -0400 Subject: [PATCH] build: common/static/css/xmodule -> xmodule/static/css Now that all XModule SCSS is located in xmodule/static/sass, it would make sense to co-locate the CSS there as well. We also add a README to explain the purpose of this new folder. In the future, we will move xmodule/js and xmodule/assets into xmodule/static as well. Part of: https://github.com/openedx/edx-platform/issues/32292 --- pavelib/assets.py | 4 +-- xmodule/static/.gitignore | 1 + xmodule/static/README.rst | 53 ++++++++++++++++++++++++++++++++++ xmodule/util/xmodule_django.py | 4 +-- 4 files changed, 58 insertions(+), 4 deletions(-) create mode 100644 xmodule/static/.gitignore create mode 100644 xmodule/static/README.rst diff --git a/pavelib/assets.py b/pavelib/assets.py index 953faf84dee2..0ff1b9691ad8 100644 --- a/pavelib/assets.py +++ b/pavelib/assets.py @@ -201,7 +201,7 @@ def get_theme_sass_dirs(system, theme_dir): dirs.append({ "sass_source_dir": xmodule_sass_dir, - "css_destination_dir": path("common") / "static" / "css" / "xmodule", + "css_destination_dir": path("xmodule") / "static" / "css", "lookup_paths": [ xmodule_lookup_dir, *dependencies, @@ -252,7 +252,7 @@ def get_system_sass_dirs(system): dirs.append({ "sass_source_dir": xmodule_sass_dir, - "css_destination_dir": path("common") / "static" / "css" / "xmodule", + "css_destination_dir": path("xmodule") / "static" / "css", "lookup_paths": [ xmodule_lookup_dir, *dependencies, diff --git a/xmodule/static/.gitignore b/xmodule/static/.gitignore new file mode 100644 index 000000000000..b83e8995b9a9 --- /dev/null +++ b/xmodule/static/.gitignore @@ -0,0 +1 @@ +/css diff --git a/xmodule/static/README.rst b/xmodule/static/README.rst new file mode 100644 index 000000000000..e88955a479fd --- /dev/null +++ b/xmodule/static/README.rst @@ -0,0 +1,53 @@ +xmodule/static: edx-platform XBlock assets +########################################## + +Current State: SCSS only +************************ + +This folder exists to contain frontend static assets for the XBlocks defined in edx-platform. Its current structure is: + +* ``./sass/lms/``: Top-level SCSS modules for student, author, and public views of XModules. Based on LMS styles. +* ``./sass/cms/``: Top-level SCSS modules for the Studio editor views of XModules. Based on CMS styles. +* ``./sass/include/``: SCSS modules shared between ``./sass/lms/`` and ``./sass/cms/``. +* ``./css/``: Git-ignored target for CSS, compiled from ``./sass/lms/`` and ``./sass/cms/``. + +CSS files for XModules are added to Webpack at runtime using the custom ``XModuleWebpackLoader`` defined in `xmodule_django`_. From Webpack, they are included into individual XModules using ``add_webpack_to_fragment``, defined in that same module. + +Please note that *XModules* in this context refers to a set of old XBlocks in edx-platform which inherit from ``HTMLSnippet`` and use a special legacy asset processing system. Examples include: + +* `ProblemBlock`_ +* `HtmlBlock`_ +* `AnnotatableBlock`_ + +There are a handful of XBlocks in edx-platform that do *not* use this legacy static asset system; for example: + +* `VerticalBlock`_ +* `LibrarySourcedBlock`_ + +Future: Both SCSS and JS +************************ + +This folder is the target of `an active build refactoring project`_. + +* Currently, edx-platform XBlock JS is defined in both ``xmodule/js/`` and ``xmodule/assets/``. + + * For XModules, their JS is copied to ``common/static/xmodule`` by ``xmodule/static_content.py`` (aka ``xmodule_assets``), and then bundled using a generated Webpack config at ``common/static/xmodule/wepack.xmodule.config.js``. + * For the non-XModule blocks, the JS is used as a standard XBlock fragment. + * The JS is also built into a couple different places, seemingly for testing purposes, in ways that are not yet completely understood. This is under investigation. + +* As part of the active refactoring: + + * we will stop the special copying process in ``xmodule_assets``, and instead use the XModule JS directly; + * we will move ``webpack.xmodule.config.js`` here instead of generating it; + * we will consolidate all edx-platform XBlock JS here; + * we will simplify any remaining build XBlock JS build processes & document them here. + +* Further in the future, we may drop the special XModule SCSS and JS bundling entirely, and turn all resources into standard XBlock fragments. + +.. _xmodule_django: https://github.com/kdmccormick/edx-platform/blob/master/xmodule/util/xmodule_django.py +.. _ProblemBlock: https://github.com/kdmccormick/edx-platform/blob/kdmccormick/xmodule-static-css/xmodule/capa_block.py +.. _HtmlBlock: https://github.com/kdmccormick/edx-platform/blob/kdmccormick/xmodule-static-css/xmodule/html_block.py +.. _AnnotatableBlock: https://github.com/kdmccormick/edx-platform/blob/kdmccormick/xmodule-static-css/xmodule/annotatable_block.py +.. _VerticalBlock: https://github.com/kdmccormick/edx-platform/blob/kdmccormick/xmodule-static-css/xmodule/vertical_block.py +.. _LibrarySourcedBlock: https://github.com/kdmccormick/edx-platform/blob/kdmccormick/xmodule-static-css/xmodule/library_sourced_block.py +.. _an active build refactoring project: https://github.com/openedx/edx-platform/issues/31624 diff --git a/xmodule/util/xmodule_django.py b/xmodule/util/xmodule_django.py index 1d9a858ea495..66fc87014d19 100644 --- a/xmodule/util/xmodule_django.py +++ b/xmodule/util/xmodule_django.py @@ -62,7 +62,7 @@ def load_assets(self): }, { 'name': 'AnnotatableBlockPreview.css', - 'path': 'common/static/css/xmodule/AnnotatableBlockPreview.css', + 'path': 'xmodule/static/css/AnnotatableBlockPreview.css', 'publicPath': '/static/css/xmodule/AnnotatableBlockPreview.css' } ], @@ -75,7 +75,7 @@ def load_assets(self): """ assets = super().load_assets() - css_path = "common/static/css/xmodule" + css_path = "xmodule/static/css" css_files = listdir(css_path) for css_file in css_files: