MDL-78334 core: Add a mechanism to deprecate SCSS code

lib/behat/classes/behat_session_trait.php

@@ -1007,6 +1007,31 @@ EOF;
         }
     }
 
+    /**
+     * Internal step definition to find deprecated styles.
+     *
+     * Part of behat_hooks class as is part of the testing framework, is auto-executed
+     * after each step so no features will splicitly use it.
+     *
+     * @throws Exception Unknown type, depending on what we caught in the hook or basic \Exception.
+     * @see Moodle\BehatExtension\Tester\MoodleStepTester
+     */
+    public function look_for_deprecated_styles() {
+        if (!$this->running_javascript()) {
+            return;
+        }
+
+        // Look for any DOM element with deprecated message in before pseudo-element.
+        $js = <<<EOF
+            [...document.querySelectorAll('*')].some(
+                el => window.getComputedStyle(el, ':before').content === '"Deprecated style in use"'
+            );
+        EOF;
+        if ($this->evaluate_script($js)) {
+            throw new \Exception(html_entity_decode("Deprecated style in use", ENT_COMPAT));
+        }
+    }
+
     /**
      * Converts HTML tags to line breaks to display the info in CLI
      *
@@ -1045,6 +1070,9 @@ EOF;
 
         // Look for exceptions.
         $this->look_for_exceptions();
+
+        // Look for deprecated styles.
+        $this->look_for_deprecated_styles();
     }
 
     /**

lib/pagelib.php

@@ -2116,6 +2116,10 @@ class moodle_page {
             $this->add_body_class($this->_devicetypeinuse . 'theme');
         }
 
+        if (!empty($CFG->themedesignermode)) {
+            $this->add_body_class('themedesignermode');
+        }
+
         // Add class for behat site to apply behat related fixes.
         if (defined('BEHAT_SITE_RUNNING')) {
             $this->add_body_class('behat-site');

theme/boost/scss/moodle.scss

@@ -52,3 +52,4 @@ $breadcrumb-divider-rtl: "◀" !default;
 @import "moodle/process-monitor";
 @import "moodle/moodlenet";
 @import "moodle/dropdown";
+@import "moodle/deprecated";

theme/boost/scss/moodle/deprecated.scss

@@ -0,0 +1,38 @@
+/**
+ Deprecations
+ */
+
+//
+// Deprecation mixin.
+//
+@mixin deprecated-styles() {
+    /* stylelint-disable declaration-no-important */
+    body.behat-site &,
+    body.behat-site#{&},
+    body.themedesignermode &,
+    body.themedesignermode#{&} {
+        outline: 3px dotted $red !important;
+        background-color: lighten($red, 50%) !important;
+        &::before {
+            content: "Deprecated style in use" !important;
+            color: $red !important;
+            font-size: smaller !important;
+        }
+    }
+    /* stylelint-enable */
+}
+
+//
+// Deprecated styles.
+//
+
+// All deprecated styles should include "deprecated-styles" mixin.
+// Example:
+// .foo {
+//     .bar {
+//         color: $blue;
+//         @include deprecated-styles();
+//     }
+//     color: $red;
+//     @include deprecated-styles();
+// }

theme/boost/style/moodle.css

@@ -38779,6 +38779,9 @@ div.editor_atto_toolbar button .icon {
   color: #fff !important; /* stylelint-disable-line declaration-no-important */
 }
 
+/**
+ Deprecations
+ */
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

theme/classic/style/moodle.css

@@ -38713,6 +38713,9 @@ div.editor_atto_toolbar button .icon {
   color: #fff !important; /* stylelint-disable-line declaration-no-important */
 }
 
+/**
+ Deprecations
+ */
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;