Skip to content

Commit

Permalink
build: import XModule source SCSS directly rather than copying (#32289)
Browse files Browse the repository at this point in the history
The `xmodule_assets` command copies SCSS source files from
xmodule/css to common/static/xmodule/scss, renaming them
to `{MD5_HASH}.scss` in order to "remove duplicates".
The copied files are then included into the generated
SCSS entrypoint files (eg AnnotatableBlockStudio.scss).

The "de-deplication" is completely unnecessary: there are
only a couple dozen SCSS files, and none of them are duplicates.
This copying process is confusing, it complicates our
build process, and it makes our SCSS harder to understand.

So, in the generated SCSS entrypoint files, we
stop importing the *copied* SCSS sources, and just
import the *original* SCSS sources instead.
For example, common/static/xmodule/descriptors/scss/AboutBlockStudio.scss
is changed from:

    .xmodule_edit.xmodule_AboutBlock {
      @import "9bdcda00f046f78be79aca7791e1d4fb.scss";
      @import "a10fc3e0fd6aca63426a89e75fe69c31.scss";
    }

to:

    .xmodule_edit.xmodule_AboutBlock {
      @import "editor/edit.scss";
      @import "html/edit.scss";
    }

In order to make the `@import` lines work, we add xmodule/css to the list
of lookup dirs for XModule SCSS compilation. We also remove the
copying logic from `xmodule_assets`, as it is no longer needed.

Part of: #32292
  • Loading branch information
kdmccormick authored Jun 14, 2023
1 parent ee72134 commit 3fab0ae
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 17 deletions.
10 changes: 8 additions & 2 deletions pavelib/assets.py
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,7 @@ def get_theme_sass_dirs(system, theme_dir):
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"

dependencies = SASS_LOOKUP_DEPENDENCIES.get(system, [])
if sass_dir.isdir():
Expand Down Expand Up @@ -202,7 +203,9 @@ def get_theme_sass_dirs(system, theme_dir):
dirs.append({
"sass_source_dir": xmodule_sass_dir,
"css_destination_dir": path("common") / "static" / "css" / "xmodule",
"lookup_paths": dependencies + [
"lookup_paths": [
xmodule_lookup_dir,
*dependencies,
sass_dir / "partials",
system_sass_dir / "partials",
system_sass_dir,
Expand Down Expand Up @@ -237,6 +240,7 @@ def get_system_sass_dirs(system):
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"

dependencies = SASS_LOOKUP_DEPENDENCIES.get(system, [])
dirs.append({
Expand All @@ -251,7 +255,9 @@ def get_system_sass_dirs(system):
dirs.append({
"sass_source_dir": xmodule_sass_dir,
"css_destination_dir": path("common") / "static" / "css" / "xmodule",
"lookup_paths": dependencies + [
"lookup_paths": [
xmodule_lookup_dir,
*dependencies,
sass_dir / "partials",
sass_dir,
],
Expand Down
21 changes: 6 additions & 15 deletions xmodule/static_content.py
Original file line number Diff line number Diff line change
Expand Up @@ -126,29 +126,20 @@ def _write_styles(selector, output_root, classes, css_attribute, suffix):
into `output_root` as individual files
"""
contents = {}
xmodule_scss_path = resource_filename(__name__, "") + "/css/"

for class_ in classes:
class_css = getattr(class_, css_attribute)()
fragment_paths = class_css.get('scss', [])
if not fragment_paths:
continue
fragment_names = []
for fragment_path in fragment_paths:
with open(fragment_path, 'rb') as fragment_file:
fragment = fragment_file.read()
fragment_name = "{hash}.{type}".format(
hash=hashlib.md5(fragment).hexdigest(),
type='scss')
# Prepend _ so that sass just includes the files into a single file
filename = '_' + fragment_name
contents[filename] = fragment
fragment_names.append(fragment_name)
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 "{name}";' for name in fragment_names)
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)
Expand Down

0 comments on commit 3fab0ae

Please sign in to comment.