Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[4/6] build: import XModule source SCSS directly rather than copying #32289

Merged

Conversation

kdmccormick
Copy link
Member

@kdmccormick kdmccormick commented May 23, 2023

Supporting information

This is a part of a series of PRs:

The previous PR is:

The next PR is:

Description

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.

Testing Instructions

  • Build the Tutor openedx image with this branch
  • Browse the demo course in the Studio outline editor
  • Browse the demo course in Learning MFE

Deadline

Medium-high urgency, as this is in the critical path to a long line of DevX improvement PRs.

@kdmccormick kdmccormick changed the title build: import XModule source SCSS directly rather than copying [4/6] build: import XModule source SCSS directly rather than copying May 23, 2023
@kdmccormick kdmccormick force-pushed the kdmccormick/xmodule-scss-copying branch from 66e6f4e to b35dd95 Compare June 6, 2023 13:41
@kdmccormick kdmccormick marked this pull request as ready for review June 6, 2023 13:46
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: openedx#32292
@kdmccormick kdmccormick force-pushed the kdmccormick/xmodule-scss-copying branch from b35dd95 to c90964e Compare June 14, 2023 14:15
Copy link
Contributor

@feanil feanil left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change makes sense and I was able to get it up in tutor and didn't see any issues in a quick browsing of studio or the LMS.

@kdmccormick kdmccormick merged commit 3fab0ae into openedx:master Jun 14, 2023
@kdmccormick kdmccormick deleted the kdmccormick/xmodule-scss-copying branch June 14, 2023 15:31
kdmccormick added a commit that referenced this pull request Jun 14, 2023
@edx-pipeline-bot
Copy link
Contributor

EdX Release Notice: This PR has been deployed to the staging environment in preparation for a release to production.

@edx-pipeline-bot
Copy link
Contributor

EdX Release Notice: This PR has been deployed to the production environment.

kdmccormick added a commit to kdmccormick/edx-platform that referenced this pull request Jun 16, 2023
`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; for context, make sure you've seen:
 * openedx#32288
 * openedx#32289

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: openedx#32292
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants