Replace builtin block Sass with vanilla CSS

[kdmccormick]

Background

Follows up from:

• Expose builtin block Sass variables as CSS variables #35173
• Convert builtin block Sass variables into CSS variables #35306

The goal of this task is to entirely convert the Sass in the ./xmodule/ directory into vanilla CSS which can be loaded with the standard ResourceLoader class from xblock.utils. The immediate benefit is that we can remove the xmodule Sass build steps from edx-platform. The longer-term benefit is that this will remove any Sass build concerns from the xblock extraction effort.

Tasks

1. Ensure Sass has been compiled into uncompressed CSS (npm run compile-sass-dev).
2. Copy all the built-in compiled XBlock CSS (lms/static/css/*Display.css and lms/static/css/*Editor.css) into xmodule/assets. Add those CSS files to version control.
3. For each XBlock with Sass: Replace its add_sass_to_fragment call with standard usage of a xblock.utils.resources.ResourceLoader and fragment.add_css.
4. Remove the definition of add_sass_to_fragment from xmodule.util.builtin_assets.py
5. Remove all .scss files under xmodule/assets
6. Remove all compile_sass_dir(...) calls in scripts/compile_sass.sh which compile Sass under xmodule/assets.
7. Update xmodule/assets/README.rst

[farhan]

Perhaps duplicate of #35306

[kdmccormick]

@farhan Whereas #35306 concerned converting just the variables, this issue will concern converting the entire files from .scss to .css

[kdmccormick]

@farhan I've filled this one in. Let me know if you have any questions.

[farhan]

I have created following main epic story for per block conversion of sass to css
#35570

After shifting of all the blocks from sass to css we can pick this story and do the left over cleaning.

cc: @kdmccormick

[kdmccormick]

Hey @farhan , could you or someone on your team:

• Review this cleanup PR: build: Remove unneccessary built-in XBlock Sass built steps #35833
• Open a quick PR to remove these pointless stylelint-disable statements from every xmodule/static/css-builtin-blocks file?

.xmodule_display.xmodule_VideoBlock {
    /* stylelint-disable-line */
    /* stylelint-disable-line */
    /* stylelint-disable-line */
    /* stylelint-disable-line */
    /* stylelint-disable-line */
    /* stylelint-disable-line */
}

[kdmccormick]

Finally, before extracting the CSS to the xblock-contrib repo, I'd like to take care of this task: #32617

Let me know if that's something your team has time to take on soon. If not, I can take care of it.

[farhan]

@kdmccormick Going to mark this epic done as all functionality has been implemented