Merge pull request #1387 from scm-manager/bugfix/diff_syntax_highlighting_css_conflict

Fix css conflicts on diff syntaxhighlighting by using a css module
2026-01-21 06:52:11 +01:00 · 2020-10-26 15:36:41 +01:00
parent 6021832788 99dae1c1bc
commit bef98ecd03
15 changed files with 392 additions and 249 deletions
--- a/scm-ui/ui-components/.storybook/webpack.config.js
+++ b/scm-ui/ui-components/.storybook/webpack.config.js
@@ -50,8 +50,16 @@ module.exports = {
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
-          // Translates CSS into CommonJS
-          "css-loader",
+          {
+            loader: "css-loader",
+            options: {
+              // Run `postcss-loader` on each CSS `@import`, do not forget that `sass-loader` compile non CSS `@import`'s into a single file
+              // If you need run `sass-loader` and `postcss-loader` on each CSS `@import` please set it to `2`
+              importLoaders: 1,
+              // Automatically enable css modules for files satisfying `/\.module\.\w+$/i` RegExp.
+              modules: { auto: true }
+            }
+          },
          // Compiles Sass to CSS
          "sass-loader"
        ]
--- a/scm-ui/ui-components/package.json
+++ b/scm-ui/ui-components/package.json
@@ -34,7 +34,7 @@
    "@types/react-router-dom": "^5.1.0",
    "@types/react-select": "^2.0.19",
    "@types/react-syntax-highlighter": "^11.0.1",
-    "@types/refractor": "^2.8.0",
+    "@types/refractor": "^3.0.0",
    "@types/storybook__addon-storyshots": "^5.1.1",
    "@types/styled-components": "^5.1.0",
    "@types/to-camel-case": "^1.0.0",
--- a/scm-ui/ui-components/scripts/build-syntax-highlighting-javascript.js
+++ b/scm-ui/ui-components/scripts/build-syntax-highlighting-javascript.js
@@ -121,4 +121,4 @@ function createJavascriptStyleSheet(directory, inputFile, outputFile) {
  });
 }

-createJavascriptStyleSheet(path.join("..", "src"), "syntax-highlighting.css", "syntax-highlighting.ts");
+createJavascriptStyleSheet(path.join("..", "src"), "syntax-highlighting.module.css", "syntax-highlighting.ts");
--- a/scm-ui/ui-components/src/SyntaxHighlighter.stories.tsx
+++ b/scm-ui/ui-components/src/SyntaxHighlighter.stories.tsx
@@ -30,6 +30,7 @@ import JavaHttpServer from "./__resources__/HttpServer.java";
 import GoHttpServer from "./__resources__/HttpServer.go";
 import JsHttpServer from "./__resources__/HttpServer.js";
 import PyHttpServer from "./__resources__/HttpServer.py";
+import Markdown from "./__resources__/test-page.md";

 const Spacing = styled.div`
  padding: 1em;
@@ -56,6 +57,11 @@ storiesOf("SyntaxHighlighter", module)
      <SyntaxHighlighter language="python" value={PyHttpServer} />
    </Spacing>
  ))
+  .add("Markdown", () => (
+    <Spacing>
+      <SyntaxHighlighter language="markdown" value={Markdown} />
+    </Spacing>
+  ))
  .add("Without line numbers", () => (
    <Spacing>
      <SyntaxHighlighter language="java" value={JavaHttpServer} showLineNumbers={false} />
--- a/scm-ui/ui-components/src/resources/Diff.markdown.ts
+++ b/scm-ui/ui-components/src/resources/Diff.markdown.ts
@@ -0,0 +1,118 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export default {
+  files: [
+    {
+      oldPath: "CHANGELOG.md",
+      newPath: "CHANGELOG.md",
+      oldEndingNewLine: true,
+      newEndingNewLine: true,
+      oldRevision: "de732d6da1cc0be8454f004c14b7666c69c91fb4",
+      newRevision: "148eb799f3a56909fe65b966e093a482ba542c81",
+      type: "modify",
+      language: "markdown",
+      hunks: [
+        {
+          content: "@@ -5,7 +5,7 @@",
+          oldStart: 5,
+          newStart: 5,
+          oldLines: 7,
+          newLines: 7,
+          changes: [
+            {
+              content: "The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),",
+              type: "normal",
+              oldLineNumber: 5,
+              newLineNumber: 5,
+              isNormal: true
+            },
+            {
+              content: "and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).",
+              type: "normal",
+              oldLineNumber: 6,
+              newLineNumber: 6,
+              isNormal: true
+            },
+            {
+              content: "",
+              type: "normal",
+              oldLineNumber: 7,
+              newLineNumber: 7,
+              isNormal: true
+            },
+            {
+              content: "## Unreleased",
+              type: "delete",
+              lineNumber: 8,
+              isDelete: true
+            },
+            {
+              content: "## [2.7.1] - 2020-10-14",
+              type: "insert",
+              lineNumber: 8,
+              isInsert: true
+            },
+            {
+              content: "### Fixed",
+              type: "normal",
+              oldLineNumber: 9,
+              newLineNumber: 9,
+              isNormal: true
+            },
+            {
+              content:
+                "- Null Pointer Exception on anonymous migration with deleted repositories ([#1371](https://github.com/scm-manager/scm-manager/pull/1371))",
+              type: "normal",
+              oldLineNumber: 10,
+              newLineNumber: 10,
+              isNormal: true
+            },
+            {
+              content:
+                "- Null Pointer Exception on parsing SVN properties ([#1373](https://github.com/scm-manager/scm-manager/pull/1373))",
+              type: "normal",
+              oldLineNumber: 11,
+              newLineNumber: 11,
+              isNormal: true
+            }
+          ]
+        }
+      ],
+      _links: {
+        lines: {
+          href:
+            "http://localhost:8081/scm/api/v2/repositories/scmadmin/scm-manager/content/fbffdea2a566dc4ac54ea38d4aade5aaf541e7f2/CHANGELOG.md?start={start}&end={end}",
+          templated: true
+        }
+      }
+    }
+  ],
+  _links: {
+    self: {
+      href:
+        "http://localhost:8081/scm/api/v2/repositories/scmadmin/scm-manager/diff/fbffdea2a566dc4ac54ea38d4aade5aaf541e7f2/parsed"
+    }
+  }
+};
--- a/scm-ui/ui-components/src/snapshots/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/snapshots/storyshots.test.ts.snap
@@ -4224,7 +4224,7 @@ exports[`Storyshots Diff Binaries 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -4407,7 +4407,7 @@ exports[`Storyshots Diff Binaries 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -5271,7 +5271,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -6129,7 +6129,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -6583,7 +6583,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -7196,7 +7196,7 @@ exports[`Storyshots Diff Default 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -7777,7 +7777,7 @@ exports[`Storyshots Diff Default 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -8635,7 +8635,7 @@ exports[`Storyshots Diff Default 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -9089,7 +9089,7 @@ exports[`Storyshots Diff Default 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -9543,7 +9543,7 @@ exports[`Storyshots Diff Default 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -10604,7 +10604,7 @@ exports[`Storyshots Diff Default 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -11142,7 +11142,7 @@ exports[`Storyshots Diff Expandable 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -11760,7 +11760,7 @@ exports[`Storyshots Diff Expandable 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -12715,7 +12715,7 @@ exports[`Storyshots Diff Expandable 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -13241,7 +13241,7 @@ exports[`Storyshots Diff Expandable 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -13767,7 +13767,7 @@ exports[`Storyshots Diff Expandable 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -14983,7 +14983,7 @@ exports[`Storyshots Diff Expandable 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -15562,7 +15562,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
          src/main/java/com/cloudogu/scm/review/events/EventListener.java
        </p>
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -16147,7 +16147,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
          src/main/js/ChangeNotification.tsx
        </p>
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -17009,7 +17009,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
          src/main/resources/locales/de/plugins.json
        </p>
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -17467,7 +17467,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
          src/main/resources/locales/en/plugins.json
        </p>
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -17925,7 +17925,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
          src/test/java/com/cloudogu/scm/review/events/ClientTest.java
        </p>
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -18990,7 +18990,7 @@ exports[`Storyshots Diff File Annotation 1`] = `
          Main.java
        </p>
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -19546,7 +19546,7 @@ exports[`Storyshots Diff File Controls 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -20145,7 +20145,7 @@ exports[`Storyshots Diff File Controls 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -21021,7 +21021,7 @@ exports[`Storyshots Diff File Controls 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -21493,7 +21493,7 @@ exports[`Storyshots Diff File Controls 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -21965,7 +21965,7 @@ exports[`Storyshots Diff File Controls 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -23044,7 +23044,7 @@ exports[`Storyshots Diff File Controls 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -23582,7 +23582,7 @@ exports[`Storyshots Diff Hunks 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -24427,7 +24427,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -25020,7 +25020,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -25890,7 +25890,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -26344,7 +26344,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -26798,7 +26798,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -27859,7 +27859,7 @@ exports[`Storyshots Diff Line Annotation 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -28409,7 +28409,7 @@ exports[`Storyshots Diff OnClick 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -29030,7 +29030,7 @@ exports[`Storyshots Diff OnClick 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -29950,7 +29950,7 @@ exports[`Storyshots Diff OnClick 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -30434,7 +30434,7 @@ exports[`Storyshots Diff OnClick 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -30918,7 +30918,7 @@ exports[`Storyshots Diff OnClick 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -32055,7 +32055,7 @@ exports[`Storyshots Diff OnClick 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -32629,7 +32629,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD split"
+          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE split"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -33303,7 +33303,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD split"
+          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE split"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -34251,7 +34251,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD split"
+          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE split"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -34757,7 +34757,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD split"
+          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE split"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -35263,7 +35263,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD split"
+          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE split"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -36493,7 +36493,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD split"
+          className="diff diff-split TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE split"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -37104,7 +37104,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -37685,7 +37685,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -38543,7 +38543,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -38997,7 +38997,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -39451,7 +39451,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -40512,7 +40512,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -41050,7 +41050,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -41668,7 +41668,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -42623,7 +42623,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -43149,7 +43149,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -43675,7 +43675,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
@@ -44891,7 +44891,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = `
        className="panel-block is-paddingless"
      >
        <table
-          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 bQyEUD unified"
+          className="diff diff-unified TokenizedDiffView__DiffView-sc-2wiyd4-0 iqnAYE unified"
          onMouseDown={[Function]}
        >
          <colgroup>
--- a/scm-ui/ui-components/src/repos/Diff.stories.tsx
+++ b/scm-ui/ui-components/src/repos/Diff.stories.tsx
@@ -29,6 +29,7 @@ import parser from "gitdiff-parser";
 import simpleDiff from "../__resources__/Diff.simple";
 import hunksDiff from "../__resources__/Diff.hunks";
 import binaryDiff from "../__resources__/Diff.binary";
+import markdownDiff from "../__resources__/Diff.markdown";
 import { DiffEventContext, File, FileControlFactory } from "./DiffTypes";
 import Toast from "../toast/Toast";
 import { getPath } from "./diffs";
@@ -151,6 +152,10 @@ storiesOf("Diff", module)
    });
    return <Diff diff={filesWithLanguage} />;
  })
+  .add("SyntaxHighlighting (Markdown)", () => {
+    // @ts-ignore
+    return <Diff diff={markdownDiff.files} />;
+  })
  .add("CollapsingWithFunction", () => (
    <Diff diff={diffFiles} defaultCollapse={(oldPath, newPath) => oldPath.endsWith(".java")} />
  ))
--- a/scm-ui/ui-components/src/repos/Tokenize.worker.ts
+++ b/scm-ui/ui-components/src/repos/Tokenize.worker.ts
@@ -24,14 +24,28 @@

 // @ts-ignore we have no types for react-diff-view
 import { tokenize } from "react-diff-view";
-import refractor from "./refractorAdapter";
+import createRefractor, { RefractorAdapter } from "./refractorAdapter";

 // the WorkerGlobalScope is assigned to self
 // see https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/self
 declare const self: Worker;

-self.addEventListener("message", ({ data: { id, payload } }) => {
+type TokenizeMessage = {
+  id: string;
+  language: string;
+  hunks: any;
+  payload: any;
+};
+
+let refractor: RefractorAdapter;
+
+function initRefractor(theme: { [key: string]: string }) {
+  refractor = createRefractor(theme);
+}
+
+function runTokenize({ id, payload }: TokenizeMessage) {
  const { hunks, language } = payload;
+
  const options = {
    highlight: language !== "text",
    language: language,
@@ -60,4 +74,12 @@ self.addEventListener("message", ({ data: { id, payload } }) => {
  if (options.highlight) {
    refractor.loadLanguage(language, createTokenizer(self));
  }
+}
+
+self.addEventListener("message", ({ data }) => {
+  if (data.theme) {
+    initRefractor(data.theme);
+  } else {
+    runTokenize(data);
+  }
 });
--- a/scm-ui/ui-components/src/repos/TokenizedDiffView.tsx
+++ b/scm-ui/ui-components/src/repos/TokenizedDiffView.tsx
@@ -28,10 +28,8 @@ import { Diff, useTokenizeWorker } from "react-diff-view";
 import { File } from "./DiffTypes";
 import { determineLanguage } from "../languages";

-// styling for the diff tokens
-// this must be aligned with th style, which is used in the SyntaxHighlighter component
-// eslint-disable-next-line no-restricted-imports
-import "../syntax-highlighting.css";
+// @ts-ignore no types for css modules
+import theme from "../syntax-highlighting.module.css";

 const DiffView = styled(Diff)`
  /* align line numbers */
@@ -60,26 +58,11 @@ const DiffView = styled(Diff)`
  &.unified .diff-widget-content .is-indented-line {
    padding-left: 6.5rem;
  }
-  
-  /* conflict between prism and bulma number class */
-  .number {
-    align-items: inherit;
-    background-color: inherit;
-    border-radius: inherit;
-    display: initial;
-    font-size: inherit;
-    height: inherit;
-    justify-content: inherit;
-    margin-right: inherit;
-    margin-left: 0;
-    min-width: inherit;
-    padding: 0;
-    text-align: inherit;
-  }
 `;

 // WebWorker which creates tokens for syntax highlighting
 const tokenize = new Worker("./Tokenize.worker.ts", { name: "tokenizer", type: "module" });
+tokenize.postMessage({ theme });

 type Props = {
  file: File;
--- a/scm-ui/ui-components/src/repos/annotate/Annotate.stories.tsx
+++ b/scm-ui/ui-components/src/repos/annotate/Annotate.stories.tsx
@@ -112,6 +112,52 @@ const source: AnnotatedSource = {
  ]
 };

+const markdownSource: AnnotatedSource = {
+  language: "markdown",
+  lines: [
+    {
+      lineNumber: 1,
+      code: "# Title",
+      ...commitCreateNewApp
+    },
+    {
+      lineNumber: 2,
+      code: "",
+      ...commitCreateNewApp
+    },
+    {
+      lineNumber: 3,
+      code: "This is a short Markdown text.",
+      ...commitFixedMissingImport
+    },
+    {
+      lineNumber: 4,
+      code: "",
+      ...commitFixedMissingImport
+    },
+    {
+      lineNumber: 5,
+      code: "With **bold** and __italic__ words.",
+      ...commitCreateNewApp
+    },
+    {
+      lineNumber: 6,
+      code: "",
+      ...commitImplementMain
+    },
+    {
+      lineNumber: 7,
+      code: "> This should be a quote",
+      ...commitCreateNewApp
+    },
+    {
+      lineNumber: 8,
+      code: "",
+      ...commitCreateNewApp
+    }
+  ]
+};
+
 const Robohash: FC = ({ children }) => {
  const binder = new Binder("robohash");
  binder.bind("avatar.factory", (person: Person) => `https://robohash.org/${person.mail}.png`);
@@ -124,6 +170,9 @@ storiesOf("Annotate", module)
  .add("Default", () => (
    <Annotate source={source} repository={repository} baseDate={new Date("2020-04-16T09:22:42Z")} />
  ))
+  .add("Markdown", () => (
+    <Annotate source={markdownSource} repository={repository} baseDate={new Date("2020-04-15T09:47:42Z")} />
+  ))
  .add("With Avatars", () => (
    <Robohash>
      <Annotate source={source} repository={repository} baseDate={new Date("2020-04-15T09:47:42Z")} />
--- a/scm-ui/ui-components/src/repos/refractorAdapter.ts
+++ b/scm-ui/ui-components/src/repos/refractorAdapter.ts
@@ -24,29 +24,51 @@

 import refractor from "refractor/core";

-const isLanguageRegistered = (lang: string) => {
-  const registeredLanguages = refractor.listLanguages();
-  return registeredLanguages.includes(lang);
+type RunHookEnv = {
+  classes: string[];
 };

-const loadLanguage = (lang: string, callback: () => void) => {
-  if (isLanguageRegistered(lang)) {
-    callback();
-  } else {
-    import(
-      /* webpackChunkName: "tokenizer-refractor-[request]" */
-      `refractor/lang/${lang}`
-    ).then(loadedLanguage => {
-      refractor.register(loadedLanguage.default);
+export type RefractorAdapter = typeof refractor & {
+  isLanguageRegistered: (lang: string) => boolean;
+  loadLanguage: (lang: string, callback: () => void) => void;
+};
+
+const createAdapter = (theme: { [key: string]: string }): RefractorAdapter => {
+  const isLanguageRegistered = (lang: string) => {
+    const registeredLanguages = refractor.listLanguages();
+    return registeredLanguages.includes(lang);
+  };
+
+  const loadLanguage = (lang: string, callback: () => void) => {
+    if (isLanguageRegistered(lang)) {
      callback();
-    });
-  }
+    } else {
+      import(
+        /* webpackChunkName: "tokenizer-refractor-[request]" */
+        `refractor/lang/${lang}`
+      ).then(loadedLanguage => {
+        refractor.register(loadedLanguage.default);
+        callback();
+      });
+    }
+  };
+
+  // @ts-ignore hooks are not in the type definition
+  const originalRunHook = refractor.hooks.run;
+  const runHook = (name: string, env: RunHookEnv) => {
+    originalRunHook.apply(name, env);
+    if (env.classes) {
+      env.classes = env.classes.map(className => theme[className] || className);
+    }
+  };
+  // @ts-ignore hooks are not in the type definition
+  refractor.hooks.run = runHook;
+
+  return {
+    isLanguageRegistered,
+    loadLanguage,
+    ...refractor
+  };
 };

-const refractorAdapter = {
-  isLanguageRegistered,
-  loadLanguage,
-  ...refractor
-};
-
-export default refractorAdapter;
+export default createAdapter;
--- a/scm-ui/ui-components/src/syntax-highlighting.module.css
+++ b/scm-ui/ui-components/src/syntax-highlighting.module.css
@@ -22,140 +22,94 @@
 * SOFTWARE.
 */

-/* Generated with http://k88hudson.github.io/syntax-highlighting-theme-generator/www */
+/**
+ * IMPORTANT: If this file is changed, please run scritps/build-syntax-highlighting-javascript afterwards
+ */

+/* Generated with http://k88hudson.github.io/syntax-highlighting-theme-generator/www */
 /* http://k88hudson.github.io/react-markdocs */

 /**
-
 * @author k88hudson
-
 *
-
 * Based on prism.js default theme for JavaScript, CSS and HTML
-
 * Based on dabblet (http://dabblet.com)
-
 * @author Lea Verou
-
 */

 /*********************************************************
-
 * General
-
 */

 pre[class*="language-"],
 code[class*="language-"] {
-
  color: #363636;
-
  font-size: 13px;
-
  text-shadow: none;
-
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-
  direction: ltr;
-
  text-align: left;
-
  white-space: pre;
-
  word-spacing: normal;
-
  word-break: normal;
-
  line-height: 1.5;
-
  -moz-tab-size: 4;
-
  -o-tab-size: 4;
-
  tab-size: 4;
-
  -webkit-hyphens: none;
-
  -moz-hyphens: none;
-
  -ms-hyphens: none;
-
  hyphens: none;
-
 }

 pre[class*="language-"]::selection,
 code[class*="language-"]::selection,
-pre[class*="language-"]::mozselection,
-code[class*="language-"]::mozselection {
-
+pre[class*="language-"]::-moz-selection,
+code[class*="language-"]::-moz-selection {
  text-shadow: none;
-
  background: #7fe3cd;
-
 }

@media print {

  pre[class*="language-"],
  code[class*="language-"] {
-
    text-shadow: none;
-
  }

 }

 pre[class*="language-"] {
-
  padding: 1em;
-
  margin: .5em 0;
-
  overflow: auto;
-
  background: #ffffff;
-
 }

 :not(pre) > code[class*="language-"] {
-
  padding: .1em .3em;
-
  border-radius: .3em;
-
  color: #ff3860;
-
  background: #fbe7eb;
-
 }

 /*********************************************************
-
 * Tokens
-
 */

 .namespace {
-
  opacity: .7;
-
 }

 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-
  color: #9a9a9a;
-
 }

 .token.punctuation {
-
  color: #9a9a9a;
-
 }

 .token.property,
@@ -165,9 +119,7 @@ pre[class*="language-"] {
 .token.constant,
 .token.symbol,
 .token.deleted {
-
  color: #2c99c7;
-
 }

 .token.selector,
@@ -176,9 +128,7 @@ pre[class*="language-"] {
 .token.char,
 .token.builtin,
 .token.inserted {
-
  color: #005f9a;
-
 }

 .token.operator,
@@ -186,93 +136,62 @@ pre[class*="language-"] {
 .token.url,
 .language-css .token.string,
 .style .token.string {
-
  color: #686868;
 }

 .token.atrule,
 .token.attr-value,
 .token.keyword {
-
  color: #00a984;
-
 }

 .token.function {
-
  color: #ff3860;
-
 }

 .token.regex,
 .token.important,
 .token.variable {
-
  color: #a74eb2;
-
 }

 .token.important,
-.token.bold {
-
+.token.bold,
+.token.title {
  font-weight: bold;
-
 }

 .token.italic {
-
  font-style: italic;
-
 }

 .token.entity {
-
  cursor: help;
-
 }

 /*********************************************************
-
 * Line highlighting
-
 */

 pre[data-line] {
-
  position: relative;
-
 }

 pre[class*="language-"] > code[class*="language-"] {
-
  position: relative;
-
  z-index: 1;
-
 }

 .line-highlight {
-
  position: absolute;
-
  left: 0;
-
  right: 0;
-
  padding: inherit 0;
-
  margin-top: 1em;
-
  background: #f5f5f5;
-
  box-shadow: inset 5px 0 0 #99d8f3;
-
  z-index: 0;
-
  pointer-events: none;
-
  line-height: inherit;
-
  white-space: pre;
-
 }
--- a/scm-ui/ui-components/src/syntax-highlighting.ts
+++ b/scm-ui/ui-components/src/syntax-highlighting.ts
@@ -23,7 +23,7 @@
 */

 /* --- DO NOT EDIT --- */
-/* Auto-generated from syntax-highlighting.css */
+/* Auto-generated from syntax-highlighting.module.css */

 export default {
  'pre[class*="language-"]': {
@@ -47,7 +47,7 @@ export default {
    padding: "1em",
    margin: ".5em 0",
    overflow: "auto",
-    background: "#ffffff",
+    background: "#ffffff"
  },
  'code[class*="language-"]': {
    color: "#363636",
@@ -66,137 +66,140 @@ export default {
    WebkitHyphens: "none",
    MozHyphens: "none",
    msHyphens: "none",
-    hyphens: "none",
+    hyphens: "none"
  },
  'pre[class*="language-"]::selection': {
    textShadow: "none",
-    background: "#7fe3cd",
+    background: "#7fe3cd"
  },
  'code[class*="language-"]::selection': {
    textShadow: "none",
-    background: "#7fe3cd",
+    background: "#7fe3cd"
  },
-  'pre[class*="language-"]::mozselection': {
+  'pre[class*="language-"]::-moz-selection': {
    textShadow: "none",
-    background: "#7fe3cd",
+    background: "#7fe3cd"
  },
-  'code[class*="language-"]::mozselection': {
+  'code[class*="language-"]::-moz-selection': {
    textShadow: "none",
-    background: "#7fe3cd",
+    background: "#7fe3cd"
  },
  ':not(pre) > code[class*="language-"]': {
    padding: ".1em .3em",
    borderRadius: ".3em",
    color: "#ff3860",
-    background: "#fbe7eb",
+    background: "#fbe7eb"
  },
  ".namespace": {
-    Opacity: ".7",
+    Opacity: ".7"
  },
  comment: {
-    color: "#9a9a9a",
+    color: "#9a9a9a"
  },
  prolog: {
-    color: "#9a9a9a",
+    color: "#9a9a9a"
  },
  doctype: {
-    color: "#9a9a9a",
+    color: "#9a9a9a"
  },
  cdata: {
-    color: "#9a9a9a",
+    color: "#9a9a9a"
  },
  punctuation: {
-    color: "#9a9a9a",
+    color: "#9a9a9a"
  },
  property: {
-    color: "#2c99c7",
+    color: "#2c99c7"
  },
  tag: {
-    color: "#2c99c7",
+    color: "#2c99c7"
  },
  boolean: {
-    color: "#2c99c7",
+    color: "#2c99c7"
  },
  number: {
-    color: "#2c99c7",
+    color: "#2c99c7"
  },
  constant: {
-    color: "#2c99c7",
+    color: "#2c99c7"
  },
  symbol: {
-    color: "#2c99c7",
+    color: "#2c99c7"
  },
  deleted: {
-    color: "#2c99c7",
+    color: "#2c99c7"
  },
  selector: {
-    color: "#005f9a",
+    color: "#005f9a"
  },
  "attr-name": {
-    color: "#005f9a",
+    color: "#005f9a"
  },
  string: {
-    color: "#005f9a",
+    color: "#005f9a"
  },
  char: {
-    color: "#005f9a",
+    color: "#005f9a"
  },
  builtin: {
-    color: "#005f9a",
+    color: "#005f9a"
  },
  inserted: {
-    color: "#005f9a",
+    color: "#005f9a"
  },
  operator: {
-    color: "#686868",
+    color: "#686868"
  },
  entity: {
    color: "#686868",
-    cursor: "help",
+    cursor: "help"
  },
  url: {
-    color: "#686868",
+    color: "#686868"
  },
  ".language-css .token.string": {
-    color: "#686868",
+    color: "#686868"
  },
  ".style .token.string": {
-    color: "#686868",
+    color: "#686868"
  },
  atrule: {
-    color: "#00a984",
+    color: "#00a984"
  },
  "attr-value": {
-    color: "#00a984",
+    color: "#00a984"
  },
  keyword: {
-    color: "#00a984",
+    color: "#00a984"
  },
  function: {
-    color: "#ff3860",
+    color: "#ff3860"
  },
  regex: {
-    color: "#a74eb2",
+    color: "#a74eb2"
  },
  important: {
    color: "#a74eb2",
-    fontWeight: "bold",
+    fontWeight: "bold"
  },
  variable: {
-    color: "#a74eb2",
+    color: "#a74eb2"
  },
  bold: {
-    fontWeight: "bold",
+    fontWeight: "bold"
+  },
+  title: {
+    fontWeight: "bold"
  },
  italic: {
-    fontStyle: "italic",
+    fontStyle: "italic"
  },
  "pre[data-line]": {
-    position: "relative",
+    position: "relative"
  },
  'pre[class*="language-"] > code[class*="language-"]': {
    position: "relative",
-    zIndex: "1",
+    zIndex: "1"
  },
  ".line-highlight": {
    position: "absolute",
@@ -209,6 +212,6 @@ export default {
    zIndex: "0",
    pointerEvents: "none",
    lineHeight: "inherit",
-    whiteSpace: "pre",
-  },
+    whiteSpace: "pre"
+  }
 };
--- a/scm-ui/ui-scripts/src/webpack.config.js
+++ b/scm-ui/ui-scripts/src/webpack.config.js
@@ -90,8 +90,16 @@ module.exports = [
          use: [
            // Creates `style` nodes from JS strings
            "style-loader",
-            // Translates CSS into CommonJS
-            "css-loader",
+            {
+              loader: "css-loader",
+              options: {
+                // Run `postcss-loader` on each CSS `@import`, do not forget that `sass-loader` compile non CSS `@import`'s into a single file
+                // If you need run `sass-loader` and `postcss-loader` on each CSS `@import` please set it to `2`
+                importLoaders: 1,
+                // Automatically enable css modules for files satisfying `/\.module\.\w+$/i` RegExp.
+                modules: { auto: true }
+              }
+            },
            // Compiles Sass to CSS
            "sass-loader"
          ]
--- a/yarn.lock
+++ b/yarn.lock
@@ -3861,10 +3861,10 @@
  dependencies:
    redux "^4.0.0"

-"@types/refractor@^2.8.0":
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/@types/refractor/-/refractor-2.8.0.tgz#2e17b69f27e89c1ea076f49b599abe3567c54e01"
-  integrity sha512-l3wSB96RFZnvB8bnbF8UmYsDD1MQl+u7jtYq+DgI/vo3RD5pdbK3OitGEvMO3DNJhTYmCEhXLVWyyWTddzwNzQ==
+"@types/refractor@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/refractor/-/refractor-3.0.0.tgz#c535cfad1c54cf377ae2984f6cf6e9627a36ea66"
+  integrity sha512-jkCqkTpxMXXfN03Xpzj+mBMxo9IxG616SV2U42iwHkBGq/f8RrX3DCzLayIqUV+MAIBCUvl5xPnjqpUtZRnMqA==
  dependencies:
    "@types/prismjs" "*"