From 4eabdf3f5794f70e2a086a7c43d583e9fde3d393 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Sun, 25 Oct 2020 22:36:41 +0300
Subject: [PATCH] warn when paste-importing usercss with @preprocessor

---
 _locales/en/messages.json       |  6 ++++++
 background/usercss-helper.js    |  1 +
 edit/sections-editor-section.js |  7 +++----
 edit/sections-editor.js         | 34 +++++++++++++++++++++++----------
 msgbox/msgbox.css               |  4 ++++
 msgbox/msgbox.js                |  4 +++-
 6 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index ea18706f..51dddb1a 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -468,6 +468,12 @@
     "message": "Import",
     "description": "Label for the button to import a style ('edit' page) or all styles ('manage' page)"
   },
+  "importPreprocessor": {
+    "message": "Style with a <code>@preprocessor</code> won't work in the classic mode. You can switch the editor to Usercss mode: 1) open the style manager, 2) enable \"as Usercss\" checkbox, 3) click \"Write new style\"\n\nImport now anyway?"
+  },
+  "importPreprocessorTitle": {
+    "message": "Potential problem due to @preprocessor"
+  },
   "importReplaceLabel": {
     "message": "Overwrite style",
     "description": "Label for the button to import and overwrite current style"
diff --git a/background/usercss-helper.js b/background/usercss-helper.js
index 00b3a99b..58dc2233 100644
--- a/background/usercss-helper.js
+++ b/background/usercss-helper.js
@@ -8,6 +8,7 @@ const usercssHelper = (() => {
   API_METHODS.configUsercssVars = configUsercssVars;
 
   API_METHODS.buildUsercss = build;
+  API_METHODS.buildUsercssMeta = buildMeta;
   API_METHODS.findUsercss = find;
 
   function buildMeta(style) {
diff --git a/edit/sections-editor-section.js b/edit/sections-editor-section.js
index 5b07875e..dce07e93 100644
--- a/edit/sections-editor-section.js
+++ b/edit/sections-editor-section.js
@@ -176,10 +176,9 @@ function createSection({
     });
     cm.on('paste', (cm, event) => {
       const text = event.clipboardData.getData('text') || '';
-      if (
-        text.includes('@-moz-document') &&
-        text.replace(/\/\*[\s\S]*?(?:\*\/|$)/g, '')
-          .match(/@-moz-document[\s\r\n]+(url|url-prefix|domain|regexp)\(/)
+      if (/@-moz-document/i.test(text) &&
+          /@-moz-document\s+(url|url-prefix|domain|regexp)\(/i
+            .test(text.replace(/\/\*([^*]|\*(?!\/))*(\*\/|$)/g, ''))
       ) {
         event.preventDefault();
         showMozillaFormatImport(text);
diff --git a/edit/sections-editor.js b/edit/sections-editor.js
index e2e3678d..9d556553 100644
--- a/edit/sections-editor.js
+++ b/edit/sections-editor.js
@@ -333,24 +333,38 @@ function createSectionsEditor(editorBase) {
       'Shift-Ctrl-Enter': () => doImport({replaceOldStyle: true}),
     };
 
-    function doImport({replaceOldStyle = false}) {
+    async function doImport({replaceOldStyle = false}) {
       lockPageUI(true);
-      API.parseCss({code: popup.codebox.getValue().trim()})
-        .then(({sections, errors}) => {
+      try {
+        const code = popup.codebox.getValue().trim();
+        if (!/==userstyle==/i.test(code) ||
+            !await getPreprocessor(code) ||
+            await messageBox.confirm(
+              t('importPreprocessor'), 'pre-line',
+              t('importPreprocessorTitle'))
+        ) {
+          const {sections, errors} = await API.parseCss({code});
           // shouldn't happen but just in case
           if (!sections.length || errors.length) {
             throw errors;
           }
           if (replaceOldStyle) {
-            return replaceSections(sections);
+            replaceSections(sections);
+          } else {
+            initSections(sections, {focusOn: false});
           }
-          return initSections(sections, {focusOn: false});
-        })
-        .then(() => {
           $('.dismiss').dispatchEvent(new Event('click'));
-        })
-        .catch(showError)
-        .then(() => lockPageUI(false));
+        }
+      } catch (err) {
+        showError(err);
+      }
+      lockPageUI(false);
+    }
+
+    async function getPreprocessor(code) {
+      try {
+        return (await API.buildUsercssMeta({sourceCode: code})).usercssData.preprocessor;
+      } catch (e) {}
     }
 
     function lockPageUI(locked) {
diff --git a/msgbox/msgbox.css b/msgbox/msgbox.css
index bbc70622..4f349613 100644
--- a/msgbox/msgbox.css
+++ b/msgbox/msgbox.css
@@ -56,6 +56,10 @@
   text-align: left;
 }
 
+#message-box.pre-line #message-box-contents {
+  white-space: pre-line;
+}
+
 #message-box-title {
   font-weight: bold;
   background-color: rgb(145, 208, 198);
diff --git a/msgbox/msgbox.js b/msgbox/msgbox.js
index a537da32..6a409f9f 100644
--- a/msgbox/msgbox.js
+++ b/msgbox/msgbox.js
@@ -168,10 +168,12 @@ messageBox.alert = (contents, className, title) =>
 /**
  * @param {String|Node|Array<String|Node>} contents
  * @param {String} [className] like 'pre' for monospace font
+ * @param {String} [title]
  * @returns {Promise<Boolean>} resolves to true when confirmed
  */
-messageBox.confirm = (contents, className) =>
+messageBox.confirm = (contents, className, title) =>
   messageBox({
+    title,
     contents,
     className: `center ${className || ''}`,
     buttons: [t('confirmYes'), t('confirmNo')]