Enhance CSS handling in ThemingController

Added extraction of @import and @-rules from custom CSS.

Author: memurats

apps/theming/lib/Controller/ThemingController.php

@@ -408,10 +408,14 @@ public function getThemeStylesheet(string $themeId, bool $plain = false, bool $w
 			// from the rest of the CSS.
 			$customCssWithoutComments = preg_replace('!/\*.*?\*/!s', '', $customCss);
 			$customCssWithoutComments = preg_replace('!//.*!', '', $customCssWithoutComments);
+
+			// Extract @import rules, because they MUST appear at the very top of the final CSS
+			// If they remain inside the theme scope or behind normal rules, browsers will ignore them
 			preg_match_all('/(@import[^;]+;)/', $customCssWithoutComments, $imports);
 			$importsCss = implode('', $imports[0]);
 			$customCssWithoutImports = preg_replace('/(@import[^;]+;)/', '', $customCssWithoutComments);
 
+			// Extract all remaining @-rules (e.g. @media), because they cannot be nested inside the theme scope
 			preg_match_all('/(@[^{]+{(?:[^{}]*|(?R))*})/', $customCssWithoutImports, $atRules);
 			$atRulesCss = implode('', $atRules[0]);
 			$scopedCss = preg_replace('/(@[^{]+{(?:[^{}]*|(?R))*})/', '', $customCssWithoutImports);