Fix css conflicts on diff syntaxhighlighting by using a css module

2026-01-07 08:02:09 +01:00 · 2020-10-23 13:06:36 +02:00
parent ea1eab6356
commit 5f30cf8f30
10 changed files with 156 additions and 113 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/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/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/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
--- 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" "*"