fixes colorblind theme name and adds tests to prevent it happening again (#4525)

packages/insomnia-app/app/plugins/misc.test.ts

@@ -0,0 +1,23 @@
+import { validateThemeName } from './misc';
+
+describe('validateThemeName', () => {
+  it('will return valid names as-is', () => {
+    const name = 'default-dark';
+    const validName = validateThemeName(name);
+    expect(name).toEqual(validName);
+  });
+
+  it('will lowercase', () => {
+    const name = 'Default-dark';
+    const validName = validateThemeName(name);
+    expect(name).not.toEqual(validName);
+    expect(validName).toEqual('default-dark');
+  });
+
+  it('will replace spaces', () => {
+    const name = 'default dark';
+    const validName = validateThemeName(name);
+    expect(name).not.toEqual(validName);
+    expect(validName).toEqual('default-dark');
+  });
+});

packages/insomnia-app/app/plugins/misc.ts

@@ -60,11 +60,23 @@ type ThemeInner = ThemeBlock & {
 };
 
 export interface PluginTheme {
+  /** this name is used to generate CSS classes, and must be lower case and must not contain whitespace */
   name: string;
   displayName: string;
   theme: ThemeInner;
 }
 
+export const validateThemeName = (name: string) => {
+  const validName = name.replace(/\s/gm, '-').toLowerCase();
+  const isValid = name === validName;
+
+  if (!isValid) {
+    // `console.error`ing instead of throwing because this is a check that we had relatively late in the game and we don't want to break existing themes that might work (albeit, by accident)
+    console.error(`[theme] found an invalid theme name "${name}".  Try using ${validName}`);
+  }
+  return validName;
+};
+
 export async function generateThemeCSS(theme: PluginTheme) {
   const renderedTheme: ThemeInner = await render(
     theme.theme,
@@ -74,6 +86,8 @@ export async function generateThemeCSS(theme: PluginTheme) {
     theme.name,
   );
   const n = theme.name;
+  validateThemeName(theme.name);
+
   let css = '';
   // For the top-level variables, merge with the base theme to ensure that
   // we have everything we need.

plugins/insomnia-plugin-core-themes/index.js

@@ -15,5 +15,5 @@ module.exports.themes = [
   require('./themes/solarized'),
   require('./themes/solarized-dark'),
   require('./themes/high-contrast-light'),
-  require('./themes/dark-colorblind')
+  require('./themes/colorblind-dark')
 ];

plugins/insomnia-plugin-core-themes/themes/colorblind-dark.js

@@ -1,5 +1,5 @@
 module.exports = {
-	name: 'Dark Colorblind',
+	name: 'colorblind-dark',
 	displayName: 'Dark Colorblind',
 	theme: {
 		background: {