warn when paste-importing usercss with @preprocessor

_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"

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) {

edit/sections-editor-section.js

@@ -176,10 +176,9 @@ function createSection({
     });
     cm.on('paste', (cm, event) => {
       const text = event.clipboardData.getData('text') || '';
-      if (
+      if (/@-moz-document/i.test(text) &&
-        text.includes('@-moz-document') &&
+          /@-moz-document\s+(url|url-prefix|domain|regexp)\(/i
-        text.replace(/\/\*[\s\S]*?(?:\*\/|$)/g, '')
+            .test(text.replace(/\/\*([^*]|\*(?!\/))*(\*\/|$)/g, ''))
-          .match(/@-moz-document[\s\r\n]+(url|url-prefix|domain|regexp)\(/)
       ) {
         event.preventDefault();
         showMozillaFormatImport(text);

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()})
+      try {
-        .then(({sections, errors}) => {
+        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)
+      } catch (err) {
-        .then(() => lockPageUI(false));
+        showError(err);
+      }
+      lockPageUI(false);
+    }
+
+    async function getPreprocessor(code) {
+      try {
+        return (await API.buildUsercssMeta({sourceCode: code})).usercssData.preprocessor;
+      } catch (e) {}
     }
 
     function lockPageUI(locked) {

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

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')]