feat!: Dropping Sass support from builtin blocks, replacing with vani…

…lla CSS
openedx · Sep 12, 2024 · 56d765d · 56d765d
1 parent 082350e
commit 56d765d
Show file tree

Hide file tree

Showing 54 changed files with 3,995 additions and 4,771 deletions.
diff --git a/scripts/compile_sass.py b/scripts/compile_sass.py
@@ -352,18 +352,6 @@ def compile_sass_dir(
                     repo / "lms" / "static" / "sass",
                 ],
             )
-            compile_sass_dir(
-                "Compiling built-in XBlock Sass for default LMS",
-                repo / "xmodule" / "assets",
-                repo / "lms" / "static" / "css",
-                includes=[
-                    *common_includes,
-                    repo / "lms" / "static" / "sass" / "partials",
-                    repo / "cms" / "static" / "sass" / "partials",
-                    repo / "lms" / "static" / "sass",
-                    repo / "cms" / "static" / "sass",
-                ],
-            )
         if not skip_cms:
             compile_sass_dir(
                 "Compiling default CMS Sass",
@@ -376,18 +364,6 @@ def compile_sass_dir(
                     repo / "cms" / "static" / "sass",
                 ],
             )
-            compile_sass_dir(
-                "Compiling built-in XBlock Sass for default CMS",
-                repo / "xmodule" / "assets",
-                repo / "cms" / "static" / "css",
-                includes=[
-                    *common_includes,
-                    repo / "lms" / "static" / "sass" / "partials",
-                    repo / "cms" / "static" / "sass" / "partials",
-                    repo / "lms" / "static" / "sass",
-                    repo / "cms" / "static" / "sass",
-                ],
-            )
         click.secho(f"Done compiling default Sass!", fg="cyan", bold=True)
         click.echo()
 
@@ -429,20 +405,6 @@ def compile_sass_dir(
                 ],
                 tolerate_missing=True,
             )
-            compile_sass_dir(
-                "Compiling built-in XBlock Sass for themed LMS",
-                repo / "xmodule" / "assets",
-                theme / "lms" / "static" / "css",
-                includes=[
-                    *common_includes,
-                    theme / "lms" / "static" / "sass" / "partials",
-                    theme / "cms" / "static" / "sass" / "partials",
-                    repo / "lms" / "static" / "sass" / "partials",
-                    repo / "cms" / "static" / "sass" / "partials",
-                    repo / "lms" / "static" / "sass",
-                    repo / "cms" / "static" / "sass",
-                ],
-            )
         if not skip_cms:
             compile_sass_dir(
                 "Compiling default CMS Sass with themed partials",
@@ -470,20 +432,6 @@ def compile_sass_dir(
                 ],
                 tolerate_missing=True,
             )
-            compile_sass_dir(
-                "Compiling built-in XBlock Sass for themed CMS",
-                repo / "xmodule" / "assets",
-                theme / "cms" / "static" / "css",
-                includes=[
-                    *common_includes,
-                    theme / "lms" / "static" / "sass" / "partials",
-                    theme / "cms" / "static" / "sass" / "partials",
-                    repo / "lms" / "static" / "sass" / "partials",
-                    repo / "cms" / "static" / "sass" / "partials",
-                    repo / "lms" / "static" / "sass",
-                    repo / "cms" / "static" / "sass",
-                ],
-            )
         click.secho(f"Done compiling Sass for theme at {theme}!", fg="cyan", bold=True)
         click.echo()
 

diff --git a/xmodule/annotatable_block.py b/xmodule/annotatable_block.py
@@ -11,7 +11,7 @@
 from openedx.core.djangolib.markup import HTML, Text
 from xmodule.editing_block import EditingMixin
 from xmodule.raw_block import RawMixin
-from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment
+from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment
 from xmodule.xml_block import XmlMixin
 from xmodule.x_module import (
     ResourceTemplates,
@@ -180,7 +180,7 @@ def student_view(self, context):  # lint-amnesty, pylint: disable=unused-argumen
         """
         fragment = Fragment()
         fragment.add_content(self.get_html())
-        add_sass_to_fragment(fragment, 'AnnotatableBlockDisplay.scss')
+        add_css_to_fragment(fragment, 'AnnotatableBlockDisplay.css')
         add_webpack_js_to_fragment(fragment, 'AnnotatableBlockDisplay')
         shim_xmodule_js(fragment, 'Annotatable')
 
@@ -193,7 +193,7 @@ def studio_view(self, _context):
         fragment = Fragment(
             self.runtime.service(self, 'mako').render_cms_template(self.mako_template, self.get_context())
         )
-        add_sass_to_fragment(fragment, 'AnnotatableBlockEditor.scss')
+        add_css_to_fragment(fragment, 'AnnotatableBlockEditor.css')
         add_webpack_js_to_fragment(fragment, 'AnnotatableBlockEditor')
         shim_xmodule_js(fragment, self.studio_js_module_name)
         return fragment
diff --git a/xmodule/assets/AnnotatableBlockDisplay.css b/xmodule/assets/AnnotatableBlockDisplay.css
@@ -0,0 +1,197 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
+/* line 1, /openedx/edx-platform/xmodule/assets/AnnotatableBlockDisplay.scss */
+.xmodule_display.xmodule_AnnotatableBlock {
+  /* TODO: move top-level variables to a common _variables.scss.
+ * NOTE: These variables were only added here because when this was integrated with the CMS,
+ * SASS compilation errors were triggered because the CMS didn't have the same variables defined
+ * that the LMS did, so the quick fix was to localize the LMS variables not shared by the CMS.
+ * -Abarrett and Vshnayder
+ */
+  /* stylelint-disable-line */
+  /* stylelint-disable-line */ }
+  /* line 15, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+  .xmodule_display.xmodule_AnnotatableBlock .annotatable-wrapper {
+    position: relative; }
+  /* line 19, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+  .xmodule_display.xmodule_AnnotatableBlock .annotatable-header {
+    margin-bottom: 0.5em; }
+  /* line 23, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+  .xmodule_display.xmodule_AnnotatableBlock .annotatable-section {
+    position: relative;
+    padding: 0.5em 1em;
+    border: 1px solid var(--gray-l3);
+    border-radius: 0.5em;
+    margin-bottom: 0.5em; }
+    /* line 30, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-section.shaded {
+      background-color: #ededed; }
+    /* line 32, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-title {
+      font-weight: bold; }
+      /* line 34, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-title a {
+        font-weight: normal; }
+    /* line 37, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-body {
+      border-top: 1px solid var(--gray-l3);
+      margin-top: 0.5em;
+      padding-top: 0.5em; }
+      /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-body:after {
+        content: "";
+        display: table;
+        clear: both; }
+    /* line 45, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template {
+      list-style: disc;
+      margin-left: 4em; }
+      /* line 48, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template b {
+        font-weight: bold; }
+      /* line 49, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template i {
+        font-style: italic; }
+      /* line 51, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template code {
+        display: inline;
+        white-space: pre;
+        font-family: Courier New, monospace; }
+  /* line 59, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+  .xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle {
+    position: absolute;
+    right: 0;
+    margin: 2px 1em 2px 0; }
+    /* line 63, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle.expanded::after {
+      content: " \2191"; }
+    /* line 64, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle.collapsed::after {
+      content: " \2193"; }
+  /* line 67, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+  .xmodule_display.xmodule_AnnotatableBlock .annotatable-span {
+    display: inline; }
+    /* line 88, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight {
+      background-color: rgba(255, 255, 10, 0.3); }
+      /* line 90, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight.selected {
+        background-color: rgba(255, 255, 10, 0.9); }
+    /* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-yellow {
+      background-color: rgba(255, 255, 10, 0.3); }
+      /* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-yellow.selected {
+        background-color: rgba(255, 255, 10, 0.9); }
+    /* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-red {
+      background-color: rgba(178, 19, 16, 0.3); }
+      /* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-red.selected {
+        background-color: rgba(178, 19, 16, 0.9); }
+    /* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-orange {
+      background-color: rgba(255, 165, 0, 0.3); }
+      /* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-orange.selected {
+        background-color: rgba(255, 165, 0, 0.9); }
+    /* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-green {
+      background-color: rgba(25, 255, 132, 0.3); }
+      /* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-green.selected {
+        background-color: rgba(25, 255, 132, 0.9); }
+    /* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-blue {
+      background-color: rgba(35, 163, 255, 0.3); }
+      /* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-blue.selected {
+        background-color: rgba(35, 163, 255, 0.9); }
+    /* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-purple {
+      background-color: rgba(115, 9, 178, 0.3); }
+      /* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-purple.selected {
+        background-color: rgba(115, 9, 178, 0.9); }
+    /* line 100, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.hide {
+      cursor: none;
+      background-color: inherit; }
+      /* line 104, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.hide .annotatable-icon {
+        display: none; }
+    /* line 109, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-span .annotatable-comment {
+      display: none; }
+  /* line 114, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+  .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip {
+    font-size: 0.875em;
+    border: 1px solid #333;
+    border-radius: 1em;
+    background-color: rgba(0, 0, 0, 0.85);
+    color: var(--white);
+    -webkit-font-smoothing: antialiased; }
+    /* line 122, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar {
+      font-size: 1em;
+      color: inherit;
+      background-color: transparent;
+      padding: calc((var(--baseline)/4)) calc((var(--baseline)/2));
+      border: none; }
+      /* line 129, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-tooltip-title {
+        padding: calc((var(--baseline)/4)) 0;
+        border-bottom: 2px solid #333;
+        font-weight: bold; }
+      /* line 135, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-tooltip-icon {
+        right: 10px;
+        background: #333; }
+      /* line 140, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-state-hover {
+        color: inherit;
+        border: 1px solid var(--gray-l3); }
+    /* line 146, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-content {
+      color: inherit;
+      font-size: 0.875em;
+      text-align: left;
+      font-weight: 400;
+      padding: 0 calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)/2));
+      background-color: transparent;
+      border-color: transparent; }
+    /* line 156, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip p {
+      color: inherit;
+      line-height: normal; }
+  /* line 162, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+  .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable {
+    max-width: 375px; }
+    /* line 165, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content {
+      padding: 0 calc((var(--baseline)/2)); }
+      /* line 168, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content .annotatable-comment {
+        display: block;
+        margin: 0 0 calc((var(--baseline)/2)) 0;
+        max-height: 225px;
+        overflow: auto;
+        line-height: normal; }
+      /* line 176, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content .annotatable-reply {
+        display: block;
+        border-top: 2px solid #333;
+        padding: calc((var(--baseline)/4)) 0;
+        margin: 0;
+        text-align: center; }
+    /* line 185, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable::after {
+      content: '';
+      display: inline-block;
+      position: absolute;
+      bottom: -20px;
+      left: 50%;
+      height: 0;
+      width: 0;
+      margin-left: calc(-1 * (var(--baseline) / 4));
+      border: 10px solid transparent;
+      border-top-color: rgba(0, 0, 0, 0.85); }
diff --git a/xmodule/assets/AnnotatableBlockDisplay.scss b/xmodule/assets/AnnotatableBlockDisplay.scss
diff --git a/xmodule/assets/AnnotatableBlockEditor.css b/xmodule/assets/AnnotatableBlockEditor.css
@@ -0,0 +1,5 @@
+/* line 1, /openedx/edx-platform/xmodule/assets/codemirror/_codemirror.scss */
+.xmodule_edit.xmodule_AnnotatableBlock .CodeMirror {
+  background: #fff;
+  font-size: 13px;
+  color: #3c3c3c; }
diff --git a/xmodule/assets/AnnotatableBlockEditor.scss b/xmodule/assets/AnnotatableBlockEditor.scss
diff --git a/xmodule/assets/CustomTagBlockEditor.css b/xmodule/assets/CustomTagBlockEditor.css
@@ -0,0 +1,5 @@
+/* line 1, /openedx/edx-platform/xmodule/assets/codemirror/_codemirror.scss */
+.xmodule_edit.xmodule_CustomTagBlock .CodeMirror {
+  background: #fff;
+  font-size: 13px;
+  color: #3c3c3c; }
diff --git a/xmodule/assets/CustomTagBlockEditor.scss b/xmodule/assets/CustomTagBlockEditor.scss