diff --git a/config/RtlCssPlugin.ts b/config/RtlCssPlugin.ts index 961b5807..b6fbd940 100644 --- a/config/RtlCssPlugin.ts +++ b/config/RtlCssPlugin.ts @@ -33,7 +33,7 @@ export class RtlCssPlugin { stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL }, assets => { for (const chunk of compilation.chunks) { - if (chunk.name && !this.options.entries.has(chunk.name)) { + if (chunk.name && this.options.entries.has(chunk.name)) { for (const sourceFilename of chunk.files) { if ('.css' === path.extname(sourceFilename)) { const rtlFilename = this.options.transformFilename(sourceFilename) diff --git a/config/modules/postcss-easy-import.d.ts b/config/modules/postcss-easy-import.d.ts deleted file mode 100644 index 67f9ec29..00000000 --- a/config/modules/postcss-easy-import.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -declare module 'postcss-easy-import' { - import type { Plugin } from 'postcss' - - export default function (opts: { - prefix: string | boolean - extensions: string | string[] - }): Plugin -} diff --git a/src/css/prism.scss b/src/css/prism.scss index 6a546d2a..95e0839d 100644 --- a/src/css/prism.scss +++ b/src/css/prism.scss @@ -1,17 +1,82 @@ @import '~prismjs/themes/prism.css'; -@import '~prismjs/plugins/line-highlight/prism-line-highlight.css'; @import '~prismjs/plugins/line-numbers/prism-line-numbers.css'; @import '~prismjs/plugins/toolbar/prism-toolbar.css'; @import '~prismjs/plugins/inline-color/prism-inline-color.css'; @import '~prismjs/plugins/previewers/prism-previewers.css'; @import '~prismjs/plugins/autolinker/prism-autolinker.css'; -:not(.is-style-prism-shades-of-purple) pre[class*=language-].line-numbers .line-highlight { - box-sizing: border-box; - padding: 0; - margin: 1em 0 0; +/* These lines are taken from '~prismjs/plugins/inline-color/prism-inline-color.css', adjusted to avoid autoprefixer +complaining about deprecated syntax. Ideally, they can be removed if the file in question is updated. */ + +pre[data-line] { + position: relative; + padding: 1em 0 1em 3em; +} + +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: inherit; + margin-top: 1em; + background: hsla(24, 20%, 50%, .08); + background: linear-gradient(to right, hsla(24, 20%, 50%, .1) 70%, hsla(24, 20%, 50%, 0)); + pointer-events: none; + line-height: inherit; + white-space: pre; + + @media print { + print-color-adjust: exact; + } + + &:before, &[data-end]:after { + content: attr(data-start); + position: absolute; + top: .4em; + left: .6em; + min-width: 1em; + padding: 0 .5em; + background-color: hsla(24, 20%, 50%, .4); + color: hsl(24, 20%, 95%); + font: bold 65%/1.5 sans-serif; + text-align: center; + vertical-align: .3em; + border-radius: 999px; + text-shadow: none; + box-shadow: 0 1px white; + } + + &[data-end]:after { + content: attr(data-end); + top: auto; + bottom: .4em; + } + + .line-numbers &:before, .line-numbers &:after { + content: none; + } + + /* Additional fixes to the behaviour of line highlighting with certain themes. */ + + :not(.is-style-prism-shades-of-purple) pre[class*=language-].line-numbers & { + box-sizing: border-box; + padding: 0; + margin: 1em 0 0; + } + + .is-style-prism-coy-without-shadows pre[class*=language-] & { + margin-top: 0; + } } -.is-style-prism-coy-without-shadows pre[class*=language-] .line-highlight { - margin-top: 0; +pre[id].linkable-line-numbers span.line-numbers-rows { + pointer-events: all; + + > span:before { + cursor: pointer; + } + + > span:hover:before { + background-color: rgba(128, 128, 128, .2); + } } diff --git a/src/js/services/settings/editor-preview.ts b/src/js/services/settings/editor-preview.ts index 2f6856dd..f83a6b20 100644 --- a/src/js/services/settings/editor-preview.ts +++ b/src/js/services/settings/editor-preview.ts @@ -14,6 +14,7 @@ const initialiseCodeMirror = () => { } console.error('Could not initialise CodeMirror on textarea.', textarea) + return undefined } export const handleEditorPreviewUpdates = () => {