Migrate from sass to css

my-script.py

@@ -0,0 +1,52 @@
+import os
+import re
+
+# Path to the directory containing .scss files
+scss_directory = 'xmodule/assets/'
+
+# Path to the variables file
+variables_file = 'variables.txt'
+
+# Read the variables from the variables file
+with open(variables_file, 'r') as vf:
+    variables = [line.strip() for line in vf.readlines() if line.strip()]
+
+
+# Function to replace variables in a file
+def replace_variables_in_file(file_path, variables):
+    with open(file_path, 'r') as file:
+        content = file.read()
+
+    for variable in variables:
+        # Regular expression pattern to detect variable usage
+        variable_pattern = re.escape(variable)
+
+        # Regex pattern to check for arithmetic operations involving the variable
+        arithmetic_pattern = rf'(\({variable_pattern}\s*[\*/]\s*[0-9.]+\))|([0-9.]+\s*[\*/]\s*{variable_pattern})'
+
+        # Find and replace arithmetic operations with `calc()`
+        matches = re.findall(arithmetic_pattern, content)
+        for match in matches:
+            full_match = match[0] or match[1]  # Either the first or second capture group will match
+            calc_expression = re.sub(variable_pattern, f'var(--{variable[1:]})', full_match)
+            calc_expression = f'calc({calc_expression})'
+            content = content.replace(full_match, calc_expression)
+
+        # Standard replacement of variable usage with var()
+        pattern = rf'([^:])({variable_pattern})([^a-zA-Z0-9_-]|$)'
+        replacement = rf'\1var(--{variable[1:]})\3'
+        content = re.sub(pattern, replacement, content)
+
+    with open(file_path, 'w') as file:
+        file.write(content)
+
+
+# Walk through the directory and find all .scss files
+for root, _, files in os.walk(scss_directory):
+    for file in files:
+        if file.endswith('.scss'):
+            file_path = os.path.join(root, file)
+            print(f"Processing file: {file_path}")
+            replace_variables_in_file(file_path, variables)
+
+print("Variable replacement completed.")

variables.txt

@@ -0,0 +1,56 @@
+$action-primary-active-bg
+$all-text-inputs
+$base-font-size
+$base-line-height
+$baseline
+$black
+$black-t2
+$blue
+$blue-d1
+$blue-d2
+$blue-d4
+$body-color
+$border-color
+$bp-screen-lg
+$btn-brand-focus-background
+$correct
+$danger
+$darkGrey
+$error-color
+$font-bold
+$font-family-sans-serif
+$general-color-accent
+$gray
+$gray-300
+$gray-d1
+$gray-l2
+$gray-l3
+$gray-l4
+$gray-l6
+$highlight
+$incorrect
+$lightGrey
+$lighter-base-font-color
+$link-color
+$medium-font-size
+$partially-correct
+$primary
+$shadow
+$shadow-l1
+$sidebar-color
+$small-font-size
+$static-path
+$submitted
+$success
+$tmg-f2
+$tmg-s2
+$transparent
+$uxpl-gray-background
+$uxpl-gray-base
+$uxpl-gray-dark
+$very-light-text
+$warning
+$warning-color
+$warning-color-accent
+$white
+$yellow

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

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); }

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; }

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; }