Skip to content

Stop dynamically generating XModule SCSS #32292

@kdmccormick

Description

@kdmccormick

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).

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions