DEV: Show warning message when using ember css selectors (#12036)

* DEV: Show warning message when using ember css selectors

When editing the theme css via the admin UI a warning message
will be displayed if it detects that the `#emberXXX` or `.ember-view`
css selectors are being used. These are dynamic selectors that ember
generates, but they can change so they should not be used.

* Update error message text to be more helpful

* Display a warning instead of erroring out

This allows the theme to still be saved, but a warning is displayed.

Updated the tests to check for the error message.

Updated the pre tags css so that it wraps for long messages.

spec/requests/admin/themes_controller_spec.rb

@@ -370,6 +370,45 @@ describe Admin::ThemesController do
       expect(UserHistory.where(action: UserHistory.actions[:change_theme]).count).to eq(1)
     end
 
+    it 'prevents theme update when using ember css selectors' do
+      child_theme = Fabricate(:theme, component: true)
+
+      put "/admin/themes/#{theme.id}.json", params: {
+        theme: {
+          child_theme_ids: [child_theme.id],
+          name: 'my test name',
+          theme_fields: [
+            { name: 'scss', target: 'common', value: '' },
+            { name: 'scss', target: 'desktop', value: '.ember-view{color: blue;}' },
+          ]
+        }
+      }
+
+      expect(response.status).to eq(200)
+
+      json = response.parsed_body
+
+      fields = json["theme"]["theme_fields"].sort { |a, b| a["value"] <=> b["value"] }
+      expect(fields[0]["error"]).to eq(I18n.t("themes.ember_selector_error"))
+
+      put "/admin/themes/#{theme.id}.json", params: {
+        theme: {
+          child_theme_ids: [child_theme.id],
+          name: 'my test name',
+          theme_fields: [
+            { name: 'scss', target: 'common', value: '' },
+            { name: 'scss', target: 'desktop', value: '#ember392{color: blue;}' },
+          ]
+        }
+      }
+
+      expect(response.status).to eq(200)
+      json = response.parsed_body
+
+      fields = json["theme"]["theme_fields"].sort { |a, b| a["value"] <=> b["value"] }
+      expect(fields[0]["error"]).to eq(I18n.t("themes.ember_selector_error"))
+    end
+
     it 'blocks remote theme fields from being locally edited' do
       r = RemoteTheme.create!(remote_url: "https://magic.com/repo.git")
       theme.update!(remote_theme_id: r.id)