From 086beadb9ad3fc26a25c01d527f4ad20d0aa07f7 Mon Sep 17 00:00:00 2001
From: Shea Bunge <shea@sheabunge.com>
Date: Mon, 19 Aug 2024 07:01:00 +1000
Subject: [PATCH] Fix outdated PrismJS line-highlight CSS rules to avoid
 webpack warnings.

---
 config/RtlCssPlugin.ts                     |  2 +-
 config/modules/postcss-easy-import.d.ts    |  8 ---
 src/css/prism.scss                         | 79 ++++++++++++++++++++--
 src/js/services/settings/editor-preview.ts |  1 +
 4 files changed, 74 insertions(+), 16 deletions(-)
 delete mode 100644 config/modules/postcss-easy-import.d.ts

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 = () => {