FIX: prevent theme uploads from overwriting existing variables

app/assets/javascripts/admin/controllers/modals/admin-add-upload.js.es6

@@ -5,6 +5,24 @@ import { popupAjaxError } from 'discourse/lib/ajax-error';
 
 const THEME_FIELD_VARIABLE_TYPE_IDS = [2, 3, 4];
 
+const SCSS_VARIABLE_NAMES = [
+  // common/foundation/colors.scss
+  "primary", "secondary", "tertiary", "quaternary", "header_background",
+  "header_primary", "highlight", "danger", "success", "love",
+  // common/foundation/math.scss
+  "E", "PI", "LN2", "SQRT2",
+  // common/foundation/variables.scss
+  "small-width", "medium-width", "large-width",
+  "google", "instagram", "facebook", "cas", "twitter", "yahoo", "github",
+  "base-font-size", "base-line-height", "base-font-family",
+  "primary-low", "primary-medium",
+  "secondary-low", "secondary-medium",
+  "tertiary-low", "quaternary-low",
+  "highlight-low", "highlight-medium",
+  "danger-low", "danger-medium",
+  "success-low", "love-low",
+];
+
 export default Ember.Controller.extend(ModalFunctionality, {
   adminCustomizeThemesShow: Ember.inject.controller(),
 
@@ -19,10 +37,23 @@ export default Ember.Controller.extend(ModalFunctionality, {
   disabled: Em.computed.not('enabled'),
 
   @computed('name', 'adminCustomizeThemesShow.model.theme_fields')
-  nameValid(name, themeFields) {
-    return name &&
-           name.match(/^[a-z_][a-z0-9_-]*$/i) &&
-           !themeFields.some(tf => THEME_FIELD_VARIABLE_TYPE_IDS.includes(tf.type_id) && name === tf.name);
+  errorMessage(name, themeFields) {
+    if (name) {
+      if (!name.match(/^[a-z_][a-z0-9_-]*$/i)) {
+        return I18n.t("admin.customize.theme.variable_name_error.invalid_syntax");
+      } else if (SCSS_VARIABLE_NAMES.includes(name.toLowerCase())) {
+        return I18n.t("admin.customize.theme.variable_name_error.no_overwrite");
+      } else if (themeFields.some(tf => THEME_FIELD_VARIABLE_TYPE_IDS.includes(tf.type_id) && name === tf.name)) {
+        return I18n.t("admin.customize.theme.variable_name_error.must_be_unique");
+      }
+    }
+
+    return null;
+  },
+
+  @computed('errorMessage')
+  nameValid(errorMessage) {
+    return null === errorMessage;
   },
 
   @observes('name')

app/assets/javascripts/admin/templates/modal/admin-add-upload.hbs

@@ -6,9 +6,9 @@
         {{input id="name" value=name}}<br>
       </label>
       {{#if fileSelected}}
-        {{#unless nameValid}}
-          <span class="alert alert-error">{{i18n "admin.customize.theme.variable_name_invalid"}}</span>
-        {{/unless}}
+        {{#if errorMessage}}
+          <span class="alert alert-error">{{errorMessage}}</span>
+        {{/if}}
       {{/if}}
     </div>
 {{/d-modal-body}}

config/locales/client.en.yml

@@ -3141,6 +3141,10 @@ en:
           upload_file_tip: "Choose an asset to upload (png, woff2, etc...)"
           variable_name: "SCSS var name:"
           variable_name_invalid: "Invalid variable name. Only alphanumeric allowed. Must start with a letter. Must be unique."
+          variable_name_error:
+            invalid_syntax: "Invalid variable name. Only alphanumeric allowed. Must start with a letter."
+            no_overwrite: "Invalid variable name. Must not overwrite an existing variable."
+            must_be_unique: "Invalid variable name. Must be unique."
           upload: "Upload"
           child_themes_check: "Theme includes other child themes"
           css_html: "Custom CSS/HTML"
@@ -3891,7 +3895,7 @@ en:
           label: "New:"
           add: "Add"
           filter: "Search (URL or External URL)"
-    
+
   wizard_js:
     wizard:
       done: "Done"