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 @preprocessor
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} contents
* @param {String} [className] like 'pre' for monospace font
+ * @param {String} [title]
* @returns {Promise} 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')]