diff --git a/pom.xml b/pom.xml index 7ce1d3c1c0..1d3719af5f 100644 --- a/pom.xml +++ b/pom.xml @@ -772,6 +772,7 @@ **/logback.ci.xml **/pkg/ourPackage/scm-source.properties **/.vagrant/** + **/*.css SLASHSTAR_STYLE diff --git a/scm-ui/ui-components/src/repos/annotate/Annotate.tsx b/scm-ui/ui-components/src/repos/annotate/Annotate.tsx index 35e42cba48..c517e21159 100644 --- a/scm-ui/ui-components/src/repos/annotate/Annotate.tsx +++ b/scm-ui/ui-components/src/repos/annotate/Annotate.tsx @@ -24,8 +24,12 @@ import React, { FC, useReducer } from "react"; import { Repository, AnnotatedSource, AnnotatedLine } from "@scm-manager/ui-types"; +// eslint-disable-next-line @typescript-eslint/ban-ts-ignore // @ts-ignore import { PrismAsyncLight as ReactSyntaxHighlighter, createElement } from "react-syntax-highlighter"; +// eslint-disable-next-line @typescript-eslint/ban-ts-ignore +// @ts-ignore +// eslint-disable-next-line no-restricted-imports import highlightingTheme from "@scm-manager/ui-styles/src/syntax-highlighting.js"; import { DateInput } from "../../useDateFormatter"; import Popover from "./Popover"; diff --git a/scm-ui/ui-styles/scripts/build-syntax-highlighting-javascript.js b/scm-ui/ui-styles/scripts/build-syntax-highlighting-javascript.js index f28ef55580..ca1ac2ed69 100644 --- a/scm-ui/ui-styles/scripts/build-syntax-highlighting-javascript.js +++ b/scm-ui/ui-styles/scripts/build-syntax-highlighting-javascript.js @@ -22,11 +22,41 @@ * SOFTWARE. */ +// eslint-disable-next-line import/no-extraneous-dependencies +const css = require("css"); + +// eslint-disable-next-line import/no-extraneous-dependencies +const prettier = require("prettier"); + +// eslint-disable-next-line import/no-extraneous-dependencies +const camel = require("to-camel-case"); + const path = require("path"); const fs = require("fs"); -const css = require("css"); -const camel = require("to-camel-case"); -const prettier = require("prettier"); + +const licenseHeader = `/* + * 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. + */`; function createJavascriptStyleSheet(directory, inputFile, outputFile) { fs.readFile(path.join(__dirname, `${directory}/${inputFile}`), "utf-8", (err, data) => { @@ -42,12 +72,14 @@ function createJavascriptStyleSheet(directory, inputFile, outputFile) { (camelCaseDeclarationProp[0] === "o" && !camelCaseDeclarationProp.includes("overflow")) ? `${camelCaseDeclarationProp.substring(0, 1).toUpperCase()}${camelCaseDeclarationProp.substring(1)}` : camelCaseDeclarationProp; + // eslint-disable-next-line no-param-reassign declarations[key] = declaration.value; } return declarations; }, {}); if (selector.substring(0, 6) === ".token") { + // eslint-disable-next-line no-param-reassign selector = selector.substring(7); // Regex to fix Prism theme selectors @@ -55,15 +87,20 @@ function createJavascriptStyleSheet(directory, inputFile, outputFile) { // - Remove the space (descendant combinator) // to allow for styling multiple classes // Ref: https://github.com/react-syntax-highlighter/react-syntax-highlighter/pull/305 + // eslint-disable-next-line no-param-reassign selector = selector.replace(/(?<=\w) (\.token)?(?=\.)/g, ""); } + // eslint-disable-next-line no-param-reassign selectors[selector] = selectorObject; return selectors; }, {}); + // eslint-disable-next-line no-param-reassign sheet = Object.keys(style).reduce((stylesheet, selector) => { if (stylesheet[selector]) { + // eslint-disable-next-line stylesheet[selector] = { ...stylesheet[selector], ...style[selector] }; } else { + // eslint-disable-next-line no-param-reassign stylesheet[selector] = style[selector]; } return stylesheet; @@ -73,7 +110,9 @@ function createJavascriptStyleSheet(directory, inputFile, outputFile) { }, {}); fs.writeFile( path.join(__dirname, directory, outputFile), - prettier.format(`/* --- DO NOT EDIT --- */ + prettier.format(`${licenseHeader} + +/* --- DO NOT EDIT --- */ /* Auto-generated from ${inputFile} */ export default ${JSON.stringify(javacriptStylesheet, null, 2)}`), @@ -82,4 +121,4 @@ function createJavascriptStyleSheet(directory, inputFile, outputFile) { }); } -createJavascriptStyleSheet(path.join("..", "src"), "syntax-highlighting.css", "syntax-highlighting.js"); +createJavascriptStyleSheet(path.join("..", "src"), "syntax-highlighting.css", "syntax-highlighting.ts"); diff --git a/scm-ui/ui-styles/src/syntax-highlighting.css b/scm-ui/ui-styles/src/syntax-highlighting.css index 7fbe8e70c9..797a0ebc70 100644 --- a/scm-ui/ui-styles/src/syntax-highlighting.css +++ b/scm-ui/ui-styles/src/syntax-highlighting.css @@ -47,7 +47,6 @@ */ pre[class*="language-"], - code[class*="language-"] { color: #363636; @@ -87,11 +86,8 @@ code[class*="language-"] { } pre[class*="language-"]::selection, - code[class*="language-"]::selection, - pre[class*="language-"]::mozselection, - code[class*="language-"]::mozselection { text-shadow: none; @@ -103,7 +99,6 @@ code[class*="language-"]::mozselection { @media print { pre[class*="language-"], - code[class*="language-"] { text-shadow: none; @@ -149,11 +144,8 @@ pre[class*="language-"] { } .token.comment, - .token.prolog, - .token.doctype, - .token.cdata { color: #9a9a9a; @@ -167,17 +159,11 @@ pre[class*="language-"] { } .token.property, - .token.tag, - .token.boolean, - .token.number, - .token.constant, - .token.symbol, - .token.deleted { color: #2c99c7; @@ -185,15 +171,10 @@ pre[class*="language-"] { } .token.selector, - .token.attr-name, - .token.string, - .token.char, - .token.builtin, - .token.inserted { color: #cca201; @@ -201,13 +182,9 @@ pre[class*="language-"] { } .token.operator, - .token.entity, - .token.url, - .language-css .token.string, - .style .token.string { color: #686868; @@ -217,9 +194,7 @@ pre[class*="language-"] { } .token.atrule, - .token.attr-value, - .token.keyword { color: #00a984; @@ -233,9 +208,7 @@ pre[class*="language-"] { } .token.regex, - .token.important, - .token.variable { color: #a74eb2; @@ -243,7 +216,6 @@ pre[class*="language-"] { } .token.important, - .token.bold { font-weight: bold; diff --git a/scm-ui/ui-styles/src/syntax-highlighting.js b/scm-ui/ui-styles/src/syntax-highlighting.ts similarity index 55% rename from scm-ui/ui-styles/src/syntax-highlighting.js rename to scm-ui/ui-styles/src/syntax-highlighting.ts index f96fa51771..3318b805d6 100644 --- a/scm-ui/ui-styles/src/syntax-highlighting.js +++ b/scm-ui/ui-styles/src/syntax-highlighting.ts @@ -1,3 +1,27 @@ +/* + * 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. + */ + /* --- DO NOT EDIT --- */ /* Auto-generated from syntax-highlighting.css */ @@ -23,7 +47,7 @@ export default { padding: "1em", margin: ".5em 0", overflow: "auto", - background: "#ffffff" + background: "#ffffff", }, 'code[class*="language-"]': { color: "#363636", @@ -42,142 +66,142 @@ 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': { textShadow: "none", - background: "#7fe3cd" + background: "#7fe3cd", }, 'code[class*="language-"]::mozselection': { 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: "#cca201" + color: "#cca201", }, "attr-name": { - color: "#cca201" + color: "#cca201", }, string: { - color: "#cca201" + color: "#cca201", }, char: { - color: "#cca201" + color: "#cca201", }, builtin: { - color: "#cca201" + color: "#cca201", }, inserted: { - color: "#cca201" + color: "#cca201", }, operator: { color: "#686868", - background: "#ffffff" + background: "#ffffff", }, entity: { color: "#686868", background: "#ffffff", - cursor: "help" + cursor: "help", }, url: { color: "#686868", - background: "#ffffff" + background: "#ffffff", }, ".language-css .token.string": { color: "#686868", - background: "#ffffff" + background: "#ffffff", }, ".style .token.string": { color: "#686868", - background: "#ffffff" + background: "#ffffff", }, 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", }, 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", @@ -190,6 +214,6 @@ export default { zIndex: "0", pointerEvents: "none", lineHeight: "inherit", - whiteSpace: "pre" - } + whiteSpace: "pre", + }, };