Background
Goal
All XModule SCSS should be committed to the repository rather than generated as part of the build process. Benefits:
- Simplify the build process, partially unblocking us from removing Python from the build process.
- Make XModule assets more similar to standard XBlock assets.
- Make it so XModule SCSS can be read by a human being; no tooling or special context necessary.
- Make the next step (stop dynamically generating XModule JS) easier & safer by getting SCSS out of the equation.
### PRs
- [ ] https://github.com/openedx/edx-platform/pull/32286
- [ ] https://github.com/openedx/edx-platform/pull/32287
- [ ] https://github.com/openedx/edx-platform/pull/32288
- [ ] https://github.com/openedx/edx-platform/pull/32289
- [ ] https://github.com/openedx/edx-platform/pull/32290
- [ ] https://github.com/openedx/edx-platform/pull/32291
- [ ] https://github.com/openedx/edx-platform/pull/32592
Sum of the changes
The PRs do a better job of describing each atomic change, but as whole, here's what's changing.
Before the first PR...
XModule CSS is:
- defined by various SCSS files under
xmodule/css;
- synthesized together for each XModule under its
studio_view_css and preview_view_css class variables;
- processed by the
xmodules_assets console script (defined in xmodule/static_content.py), which:
- for each XModule,
- copies each file in the XModule's
studio_view_css from
xmodule/css/<blah>/<yada>.scss to
common/static/xmodule/descriptors/css/_001-<md5-hash-of-contents-28f7a87e12f>.scss
- generates an entrypoint SCSS file named like
common/static/xmodule/descriptors/css/AnnotatableBlockStudio.be69909d83985d31e206fad272906958.scss, with contents like:
.xmodule_edit.xmodule_AboutBlock {
@import "9bdcda00f046f78be79aca7791e1d4fb.scss";
@import "a10fc3e0fd6aca63426a89e75fe69c31.scss";
}
- copies each file in the XModule's
preview_view_css from
xmodule/css/<blah>/<yada>.scss to
common/static/xmodule/modules/js/_001-<md5-hash-of-contents-28f7a87e12f>.scss
- generates an entrypoint SCSS file named like
common/static/xmodule/modules/css/AnnotatableBlockPreview.7e95b106aa0a61824f4290da1374960d.scss;
- compiled from each SCSS entrypoint file a CSS file, eg,
common/static/css/xmodule/AnnotatableBlockPreview.7e95b106aa0a61824f4290da1374960d.css, which are
- included into Webpack via
xmodule/util/xmodule_django.py:XModuleWebpackLoader; and
- rendered to XModule via the
xmodule/util/xmodule_django.py:add_webpack_to_fragment .
After the last PR...
XModule SCSS will be:
- defined by various SCSS files under
xmodule/static/sass/include;
- synthesized together for each XModule by SCSS files named:
xmodule/static/sass/cms/AnnotatableBlockStudio.scss (editing views)
xmodule/static/sass/lms/AnnotatableBlockPreview.scss (display views)
- compiled from
xmodule/static/sass/(lms|cms)/*.scss to CSS files, eg, xmodule/static/css/AnnotatableBlockPreview.css, which are
- included into Webpack via
xmodule/util/xmodule_django.py:XModuleWebpackLoader (no change); and
- rendered to XModule via the
xmodule/util/xmodule_django.py:add_webpack_to_fragment (no change).
Background
Goal
All XModule SCSS should be committed to the repository rather than generated as part of the build process. Benefits:
Sum of the changes
The PRs do a better job of describing each atomic change, but as whole, here's what's changing.
Before the first PR...
XModule CSS is:
xmodule/css;studio_view_cssandpreview_view_cssclass variables;xmodules_assetsconsole script (defined inxmodule/static_content.py), which:studio_view_cssfromxmodule/css/<blah>/<yada>.scsstocommon/static/xmodule/descriptors/css/_001-<md5-hash-of-contents-28f7a87e12f>.scsscommon/static/xmodule/descriptors/css/AnnotatableBlockStudio.be69909d83985d31e206fad272906958.scss, with contents like:preview_view_cssfromxmodule/css/<blah>/<yada>.scsstocommon/static/xmodule/modules/js/_001-<md5-hash-of-contents-28f7a87e12f>.scsscommon/static/xmodule/modules/css/AnnotatableBlockPreview.7e95b106aa0a61824f4290da1374960d.scss;common/static/css/xmodule/AnnotatableBlockPreview.7e95b106aa0a61824f4290da1374960d.css, which arexmodule/util/xmodule_django.py:XModuleWebpackLoader; andxmodule/util/xmodule_django.py:add_webpack_to_fragment.After the last PR...
XModule SCSS will be:
xmodule/static/sass/include;xmodule/static/sass/cms/AnnotatableBlockStudio.scss(editing views)xmodule/static/sass/lms/AnnotatableBlockPreview.scss(display views)xmodule/static/sass/(lms|cms)/*.scssto CSS files, eg,xmodule/static/css/AnnotatableBlockPreview.css, which arexmodule/util/xmodule_django.py:XModuleWebpackLoader(no change); andxmodule/util/xmodule_django.py:add_webpack_to_fragment(no change).