diff --git a/scm-ui/ui-components/.storybook/webpack.config.js b/scm-ui/ui-components/.storybook/webpack.config.js index 9269500c2d..9b7c1b6d26 100644 --- 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" ] diff --git a/scm-ui/ui-components/package.json b/scm-ui/ui-components/package.json index c4c8eb61fe..31469a0f43 100644 --- 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", diff --git a/scm-ui/ui-components/scripts/build-syntax-highlighting-javascript.js b/scm-ui/ui-components/scripts/build-syntax-highlighting-javascript.js index ca1ac2ed69..4d816c3c20 100644 --- 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"); diff --git a/scm-ui/ui-components/src/SyntaxHighlighter.stories.tsx b/scm-ui/ui-components/src/SyntaxHighlighter.stories.tsx index 16331dcfd2..63961ac564 100644 --- 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) )) + .add("Markdown", () => ( + + + + )) .add("Without line numbers", () => ( diff --git a/scm-ui/ui-components/src/__resources__/Diff.markdown.ts b/scm-ui/ui-components/src/__resources__/Diff.markdown.ts new file mode 100644 index 0000000000..25c5dc77b3 --- /dev/null +++ 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" + } + } +}; diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap index 2129da9f5e..1276bd1c8f 100644 --- 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" > @@ -4407,7 +4407,7 @@ exports[`Storyshots Diff Binaries 1`] = ` className="panel-block is-paddingless" >
@@ -5271,7 +5271,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = ` className="panel-block is-paddingless" >
@@ -6129,7 +6129,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = ` className="panel-block is-paddingless" >
@@ -6583,7 +6583,7 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = ` className="panel-block is-paddingless" >
@@ -7196,7 +7196,7 @@ exports[`Storyshots Diff Default 1`] = ` className="panel-block is-paddingless" >
@@ -7777,7 +7777,7 @@ exports[`Storyshots Diff Default 1`] = ` className="panel-block is-paddingless" >
@@ -8635,7 +8635,7 @@ exports[`Storyshots Diff Default 1`] = ` className="panel-block is-paddingless" >
@@ -9089,7 +9089,7 @@ exports[`Storyshots Diff Default 1`] = ` className="panel-block is-paddingless" >
@@ -9543,7 +9543,7 @@ exports[`Storyshots Diff Default 1`] = ` className="panel-block is-paddingless" >
@@ -10604,7 +10604,7 @@ exports[`Storyshots Diff Default 1`] = ` className="panel-block is-paddingless" >
@@ -11142,7 +11142,7 @@ exports[`Storyshots Diff Expandable 1`] = ` className="panel-block is-paddingless" >
@@ -11760,7 +11760,7 @@ exports[`Storyshots Diff Expandable 1`] = ` className="panel-block is-paddingless" >
@@ -12715,7 +12715,7 @@ exports[`Storyshots Diff Expandable 1`] = ` className="panel-block is-paddingless" >
@@ -13241,7 +13241,7 @@ exports[`Storyshots Diff Expandable 1`] = ` className="panel-block is-paddingless" >
@@ -13767,7 +13767,7 @@ exports[`Storyshots Diff Expandable 1`] = ` className="panel-block is-paddingless" >
@@ -14983,7 +14983,7 @@ exports[`Storyshots Diff Expandable 1`] = ` className="panel-block is-paddingless" >
@@ -15562,7 +15562,7 @@ exports[`Storyshots Diff File Annotation 1`] = ` src/main/java/com/cloudogu/scm/review/events/EventListener.java

@@ -16147,7 +16147,7 @@ exports[`Storyshots Diff File Annotation 1`] = ` src/main/js/ChangeNotification.tsx

@@ -17009,7 +17009,7 @@ exports[`Storyshots Diff File Annotation 1`] = ` src/main/resources/locales/de/plugins.json

@@ -17467,7 +17467,7 @@ exports[`Storyshots Diff File Annotation 1`] = ` src/main/resources/locales/en/plugins.json

@@ -17925,7 +17925,7 @@ exports[`Storyshots Diff File Annotation 1`] = ` src/test/java/com/cloudogu/scm/review/events/ClientTest.java

@@ -18990,7 +18990,7 @@ exports[`Storyshots Diff File Annotation 1`] = ` Main.java

@@ -19546,7 +19546,7 @@ exports[`Storyshots Diff File Controls 1`] = ` className="panel-block is-paddingless" >
@@ -20145,7 +20145,7 @@ exports[`Storyshots Diff File Controls 1`] = ` className="panel-block is-paddingless" >
@@ -21021,7 +21021,7 @@ exports[`Storyshots Diff File Controls 1`] = ` className="panel-block is-paddingless" >
@@ -21493,7 +21493,7 @@ exports[`Storyshots Diff File Controls 1`] = ` className="panel-block is-paddingless" >
@@ -21965,7 +21965,7 @@ exports[`Storyshots Diff File Controls 1`] = ` className="panel-block is-paddingless" >
@@ -23044,7 +23044,7 @@ exports[`Storyshots Diff File Controls 1`] = ` className="panel-block is-paddingless" >
@@ -23582,7 +23582,7 @@ exports[`Storyshots Diff Hunks 1`] = ` className="panel-block is-paddingless" >
@@ -24427,7 +24427,7 @@ exports[`Storyshots Diff Line Annotation 1`] = ` className="panel-block is-paddingless" >
@@ -25020,7 +25020,7 @@ exports[`Storyshots Diff Line Annotation 1`] = ` className="panel-block is-paddingless" >
@@ -25890,7 +25890,7 @@ exports[`Storyshots Diff Line Annotation 1`] = ` className="panel-block is-paddingless" >
@@ -26344,7 +26344,7 @@ exports[`Storyshots Diff Line Annotation 1`] = ` className="panel-block is-paddingless" >
@@ -26798,7 +26798,7 @@ exports[`Storyshots Diff Line Annotation 1`] = ` className="panel-block is-paddingless" >
@@ -27859,7 +27859,7 @@ exports[`Storyshots Diff Line Annotation 1`] = ` className="panel-block is-paddingless" >
@@ -28409,7 +28409,7 @@ exports[`Storyshots Diff OnClick 1`] = ` className="panel-block is-paddingless" >
@@ -29030,7 +29030,7 @@ exports[`Storyshots Diff OnClick 1`] = ` className="panel-block is-paddingless" >
@@ -29950,7 +29950,7 @@ exports[`Storyshots Diff OnClick 1`] = ` className="panel-block is-paddingless" >
@@ -30434,7 +30434,7 @@ exports[`Storyshots Diff OnClick 1`] = ` className="panel-block is-paddingless" >
@@ -30918,7 +30918,7 @@ exports[`Storyshots Diff OnClick 1`] = ` className="panel-block is-paddingless" >
@@ -32055,7 +32055,7 @@ exports[`Storyshots Diff OnClick 1`] = ` className="panel-block is-paddingless" >
@@ -32629,7 +32629,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = ` className="panel-block is-paddingless" >
@@ -33303,7 +33303,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = ` className="panel-block is-paddingless" >
@@ -34251,7 +34251,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = ` className="panel-block is-paddingless" >
@@ -34757,7 +34757,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = ` className="panel-block is-paddingless" >
@@ -35263,7 +35263,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = ` className="panel-block is-paddingless" >
@@ -36493,7 +36493,7 @@ exports[`Storyshots Diff Side-By-Side 1`] = ` className="panel-block is-paddingless" >
@@ -37104,7 +37104,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = ` className="panel-block is-paddingless" >
@@ -37685,7 +37685,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = ` className="panel-block is-paddingless" >
@@ -38543,7 +38543,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = ` className="panel-block is-paddingless" >
@@ -38997,7 +38997,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = ` className="panel-block is-paddingless" >
@@ -39451,7 +39451,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = ` className="panel-block is-paddingless" >
@@ -40512,7 +40512,7 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = ` className="panel-block is-paddingless" >
@@ -41050,7 +41050,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = ` className="panel-block is-paddingless" >
@@ -41668,7 +41668,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = ` className="panel-block is-paddingless" >
@@ -42623,7 +42623,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = ` className="panel-block is-paddingless" >
@@ -43149,7 +43149,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = ` className="panel-block is-paddingless" >
@@ -43675,7 +43675,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = ` className="panel-block is-paddingless" >
@@ -44891,7 +44891,7 @@ exports[`Storyshots Diff WithLinkToFile 1`] = ` className="panel-block is-paddingless" >
diff --git a/scm-ui/ui-components/src/repos/Diff.stories.tsx b/scm-ui/ui-components/src/repos/Diff.stories.tsx index be343c70ae..9649d97a84 100644 --- 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 ; }) + .add("SyntaxHighlighting (Markdown)", () => { + // @ts-ignore + return ; + }) .add("CollapsingWithFunction", () => ( oldPath.endsWith(".java")} /> )) diff --git a/scm-ui/ui-components/src/repos/Tokenize.worker.ts b/scm-ui/ui-components/src/repos/Tokenize.worker.ts index fba9aec455..72f74b39b1 100644 --- 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); + } }); diff --git a/scm-ui/ui-components/src/repos/TokenizedDiffView.tsx b/scm-ui/ui-components/src/repos/TokenizedDiffView.tsx index 26e1d36455..82242af187 100644 --- 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; diff --git a/scm-ui/ui-components/src/repos/annotate/Annotate.stories.tsx b/scm-ui/ui-components/src/repos/annotate/Annotate.stories.tsx index 2da808c387..e69d4c62f0 100644 --- 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", () => ( )) + .add("Markdown", () => ( + + )) .add("With Avatars", () => ( diff --git a/scm-ui/ui-components/src/repos/refractorAdapter.ts b/scm-ui/ui-components/src/repos/refractorAdapter.ts index 0bac53e4d2..6c2f93f1ec 100644 --- 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; diff --git a/scm-ui/ui-components/src/syntax-highlighting.css b/scm-ui/ui-components/src/syntax-highlighting.module.css similarity index 94% rename from scm-ui/ui-components/src/syntax-highlighting.css rename to scm-ui/ui-components/src/syntax-highlighting.module.css index 71c052bdcf..4273b26931 100644 --- a/scm-ui/ui-components/src/syntax-highlighting.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; - } diff --git a/scm-ui/ui-components/src/syntax-highlighting.ts b/scm-ui/ui-components/src/syntax-highlighting.ts index 46c319d15e..7b6e928cfd 100644 --- 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" + } }; diff --git a/scm-ui/ui-scripts/src/webpack.config.js b/scm-ui/ui-scripts/src/webpack.config.js index 0bc9f93fd7..bc20d91718 100644 --- 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" ] diff --git a/yarn.lock b/yarn.lock index 087b9f224d..96120d711d 100644 --- 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" "*"