Fix css scope adder function (#1726)

* Fix css scope adder function * Update tests
yomidevs · Jan 1, 2025 · c80b4d5 · c80b4d5
1 parent ec30c97
commit c80b4d5
Show file tree

Hide file tree

Showing 5 changed files with 901 additions and 917 deletions.
diff --git a/ext/js/core/utilities.js b/ext/js/core/utilities.js
@@ -273,3 +273,12 @@ export function sanitizeCSS(css) {
     sanitizer.replaceSync(css);
     return [...sanitizer.cssRules].map((rule) => rule.cssText || '').join('\n');
 }
+
+/**
+ * @param {string} css
+ * @param {string} scopeSelector
+ * @returns {string}
+ */
+export function addScopeToCss(css, scopeSelector) {
+    return scopeSelector + ' {' + css + '\n}';
+}
diff --git a/ext/js/data/anki-note-data-creator.js b/ext/js/data/anki-note-data-creator.js
@@ -16,6 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+import {addScopeToCss} from '../core/utilities.js';
 import {getDisambiguations, getGroupedPronunciations, getPronunciationsOfType, getTermFrequency, groupTermTags} from '../dictionary/dictionary-data-util.js';
 import {distributeFurigana, distributeFuriganaInflected} from '../language/ja/japanese.js';
 
@@ -599,18 +600,6 @@ function addDictionaryScopeToCss(css, dictionaryTitle) {
     return addScopeToCss(css, `[data-dictionary="${escapedTitle}"]`);
 }
 
-/**
- * @param {string} css
- * @param {string} scopeSelector
- * @returns {string}
- */
-function addScopeToCss(css, scopeSelector) {
-    const regex = /([^\r\n,{}]+)(\s*[,{])/g;
-    const replacement = `${scopeSelector} $1$2`;
-    return css.replace(regex, replacement);
-}
-
-
 /**
  * @param {import('dictionary').TermDictionaryEntry} dictionaryEntry
  * @returns {import('anki-templates').TermFrequency[]}

diff --git a/ext/js/display/display.js b/ext/js/display/display.js
@@ -26,7 +26,7 @@ import {ExtensionError} from '../core/extension-error.js';
 import {log} from '../core/log.js';
 import {safePerformance} from '../core/safe-performance.js';
 import {toError} from '../core/to-error.js';
-import {clone, deepEqual, promiseTimeout} from '../core/utilities.js';
+import {addScopeToCss, clone, deepEqual, promiseTimeout} from '../core/utilities.js';
 import {setProfile} from '../data/profiles-util.js';
 import {PopupMenu} from '../dom/popup-menu.js';
 import {querySelectorNotNull} from '../dom/query-selector.js';
@@ -1254,28 +1254,14 @@ export class Display extends EventDispatcher {
         let customCss = customPopupCss;
         for (const {name, enabled, styles = ''} of dictionaries) {
             if (enabled) {
-                customCss += '\n' + this._addScopeToCss(styles, name);
+                const escapedTitle = name.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
+                customCss += '\n' + addScopeToCss(styles, `[data-dictionary="${escapedTitle}"]`);
             }
         }
         this.setCustomCss(customCss);
         return customCss;
     }
 
-    /**
-     * @param {string} css
-     * @param {string} dictionaryTitle
-     * @returns {string}
-     */
-    _addScopeToCss(css, dictionaryTitle) {
-        const escapedTitle = dictionaryTitle
-            .replace(/\\/g, '\\\\')
-            .replace(/"/g, '\\"');
-
-        const regex = /([^\r\n,{}]+)(\s*[,{])/g;
-        const replacement = `[data-dictionary="${escapedTitle}"] $1$2`;
-        return css.replace(regex, replacement);
-    }
-
     /**
      * @param {boolean} isKanji
      * @param {string} source