fix(extension): fix code editor styles (#817)

extension/jest.config.js

@@ -2,4 +2,7 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>/test/setup.js'],
   testPathIgnorePatterns: ['<rootDir>/examples'],
   testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
+  },
 };

extension/src/browser/extension/window/index.tsx

@@ -7,9 +7,9 @@ import { StoreState } from '@redux-devtools/app/lib/reducers';
 import App from '../../../app/containers/App';
 import configureStore from '../../../app/stores/windowStore';
 import getPreloadedState from '../background/getPreloadedState';
+import { MonitorMessage } from '../../../app/middlewares/api';
 
 import '../../views/window.pug';
-import { MonitorMessage } from '../../../app/middlewares/api';
 
 const position = location.hash;
 let preloadedState: PreloadedState<StoreState>;

extension/test/__mocks__/styleMock.ts

@@ -0,0 +1 @@
+export default {};

extension/webpack/base.config.js

@@ -77,7 +77,7 @@ const baseConfig = (params) => ({
           ]),
       {
         test: /\.css?$/,
-        use: ['style-loader', 'raw-loader'],
+        use: ['style-loader', 'css-loader'],
       },
       {
         test: /\.pug$/,

packages/devui/.storybook/preview.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Container } from '../src';
 import { listSchemes, listThemes } from '../src/utils/theme';
-import '../src/presets';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

packages/devui/jest.config.js

@@ -2,4 +2,7 @@ module.exports = {
   preset: 'ts-jest',
   setupFilesAfterEnv: ['<rootDir>/tests/setup.ts'],
   testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.css$': '<rootDir>/tests/__mocks__/styleMock.ts',
+  },
 };

packages/devui/src/Editor/Editor.tsx

@@ -6,6 +6,15 @@ import { Base16Theme } from 'base16';
 import { defaultStyle, themedStyle } from './styles';
 import { Theme } from '../themes/default';
 
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/addon/fold/foldgutter';
+import 'codemirror/addon/fold/foldcode';
+import 'codemirror/addon/fold/brace-fold';
+
+import '../../fonts/index.css';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/addon/fold/foldgutter.css';
+
 const EditorContainer = styled.div(
   '' as unknown as TemplateStringsArray,
   ({ theme }: { theme: Theme }) =>

packages/devui/src/presets.ts

@@ -1,12 +0,0 @@
-/* eslint-disable global-require */
-
-import 'codemirror/mode/javascript/javascript';
-import 'codemirror/addon/fold/foldgutter';
-import 'codemirror/addon/fold/foldcode';
-import 'codemirror/addon/fold/brace-fold';
-
-if (process.env.NODE_ENV !== 'test') {
-  require('../fonts/index.css');
-  require('codemirror/lib/codemirror.css');
-  require('codemirror/addon/fold/foldgutter.css');
-}

packages/devui/tests/__mocks__/styleMock.ts

@@ -0,0 +1 @@
+export default {};

packages/redux-devtools-app/jest.config.js

@@ -2,4 +2,7 @@ module.exports = {
   preset: 'ts-jest',
   setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
   testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
+  },
 };

packages/redux-devtools-app/src/index.tsx

@@ -1,4 +1,3 @@
-import 'devui/lib/presets';
 import React, { Component } from 'react';
 import { Provider } from 'react-redux';
 import { Store } from 'redux';

packages/redux-devtools-app/test/__mocks__/styleMock.ts

@@ -0,0 +1 @@
+export default {};

packages/redux-devtools-inspector-monitor-test-tab/jest.config.js

@@ -2,4 +2,7 @@ module.exports = {
   preset: 'ts-jest',
   setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
   testEnvironment: 'jsdom',
+  moduleNameMapper: {
+    '\\.css$': '<rootDir>/test/__mocks__/styleMock.ts',
+  },
 };

packages/redux-devtools-inspector-monitor-test-tab/test/__mocks__/styleMock.ts

@@ -0,0 +1 @@
+export default {};