fix #52

pushqrdx · pushqrdx · commit d0818a4b136e · 2024-03-24T11:32:49.000+02:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,16 +1,17 @@
 # Changelog
 
-| Version | Date | Changelog |
-| ------- | -------- | ------ |
-| 0.0.1 | 04.10.2018 | Release Preview |
-| 0.1.0 | 12.22.2018 | Added ability to have spaces in a commented html function, so /* html */ is now possible. |
-| 0.2.0 | 01.08.2019 | Added CSS language support. |
-| 0.2.5 | 01.28.2019 | Fixed wrong CSS completions issue. |
-| 0.3.0 | 01.30.2019 | Preliminary formatting support. |
-| 0.3.1 | 05.08.2021 | Back to working state. |
-| 0.3.2 | 01.21.2022 | Allow non-whitespace before html tag thanks to @P-Froggy. |
-| 0.3.5 | 01.29.2022 | Revert @P-Froggy change while still allowing non-whitespace before tags. |
-| 0.3.6 | 09.15.2022 | Fix for typescriptreact files, as well as new snippets for easier block creation. |
-| 0.3.7 | 03.04.2023 | Added support for style tags highlighting/completion/hover. |
-| 0.3.8 | 04.10.2023 | Fixed regression in 0.3.7 that resulted in issue #39. |
-| 0.3.9 | 11.10.2023 | Added support for case insensitive blocks to fix #44. |
+| Version | Date       | Changelog                                                                                 |
+| ------- | ---------- | ----------------------------------------------------------------------------------------- |
+| 0.0.1   | 04.10.2018 | Release Preview                                                                           |
+| 0.1.0   | 12.22.2018 | Added ability to have spaces in a commented html function, so /* html */ is now possible. |
+| 0.2.0   | 01.08.2019 | Added CSS language support.                                                               |
+| 0.2.5   | 01.28.2019 | Fixed wrong CSS completions issue.                                                        |
+| 0.3.0   | 01.30.2019 | Preliminary formatting support.                                                           |
+| 0.3.1   | 05.08.2021 | Back to working state.                                                                    |
+| 0.3.2   | 01.21.2022 | Allow non-whitespace before html tag thanks to @P-Froggy.                                 |
+| 0.3.5   | 01.29.2022 | Revert @P-Froggy change while still allowing non-whitespace before tags.                  |
+| 0.3.6   | 09.15.2022 | Fix for typescriptreact files, as well as new snippets for easier block creation.         |
+| 0.3.7   | 03.04.2023 | Added support for style tags highlighting/completion/hover.                               |
+| 0.3.8   | 04.10.2023 | Fixed regression in 0.3.7 that resulted in issue #39.                                     |
+| 0.3.9   | 11.10.2023 | Added support for case insensitive blocks to fix #44.                                     |
+| 0.3.10  | 03.24.2024 | Avoid matching `html` using a negative lookahead fixes #52                                |
diff --git a/client/providers/css.js b/client/providers/css.js
diff --git a/client/providers/hover.js b/client/providers/hover.js
diff --git a/client/providers/html.js b/client/providers/html.js
diff --git a/client/providers/style.js b/client/providers/style.js
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
 	"name": "inline-html",
 	"displayName": "Inline HTML",
 	"description": "IntelliSense, Emmet and Syntax Highlighting for html/css inside ES6 Template Strings.",
-	"version": "0.3.9",
+	"version": "0.3.10",
 	"publisher": "pushqrdx",
 	"license": "MIT",
 	"icon": "docs/logo.png",
diff --git a/server/providers/css.ts b/server/providers/css.ts
@@ -34,7 +34,7 @@ import { CompletionsCache } from '../cache'
 export class HTMLStyleCompletionItemProvider implements CompletionItemProvider {
 	private _cssLanguageService: CSSLanguageService = GetCSSLanguageService()
 	private _HTMLanguageService: HTMLanguageService = GetHTMLanguageService()
-	private _expression = /(\/\*\s*html\s*\*\/\s*`|html\s*`)([^`]*)(`)/gi
+	private _expression = /(\/\*\s*html\s*\*\/\s*`|(?<!`)html\s*`)([^`]*)(`)/gi
 	private _cache = new CompletionsCache()
 
 	public provideCompletionItems(
@@ -134,7 +134,7 @@ export class HTMLStyleCompletionItemProvider implements CompletionItemProvider {
 
 export class CSSCompletionItemProvider implements CompletionItemProvider {
 	private _CSSLanguageService: CSSLanguageService = GetCSSLanguageService()
-	private _expression = /(\/\*\s*(css|less|scss)\s*\*\/\s*`|css\s*`)([^`]*)(`)/gi
+	private _expression = /(\/\*\s*(css|less|scss)\s*\*\/\s*`|(?<!`)(?:css|less|scss)\s*`)([^`]*)(`)/gi
 	private _cache = new CompletionsCache()
 
 	public provideCompletionItems(
diff --git a/server/providers/hover.ts b/server/providers/hover.ts
@@ -21,8 +21,7 @@ import { CreateVirtualDocument, MatchOffset } from '../util'
 export class HTMLHoverProvider implements HoverProvider {
 	private _htmlLanguageService: HtmlLanguageService = GetHtmlLanguageService()
 	private _cssLanguageService: CssLanguageService = GetCssLanguageService()
-	// private _expression = /(html\s*`)([^`]*)(`)/g
-	private _expression =  /(\/\*\s*html\s*\*\/\s*`|html\s*`)([^`]*)(`)/gi
+	private _expression =  /(\/\*\s*html\s*\*\/\s*`|(?<!`)html\s*`)([^`]*)(`)/gi
 
 
 	provideHover(
diff --git a/server/providers/html.ts b/server/providers/html.ts
@@ -26,8 +26,7 @@ import { CompletionsCache } from '../cache'
 
 export class HTMLCompletionItemProvider implements CompletionItemProvider {
 	private _htmlLanguageService: HTMLanguageService = GetHTMLanguageService()
-	private _expression =  /(\/\*\s*html\s*\*\/\s*`|html\s*`)([^`]*)(`)/gi
-	// private _expression = /(html\s*`)([^`]*)(`)/g
+	private _expression =  /(\/\*\s*html\s*\*\/\s*`|(?<!`)html\s*`)([^`]*)(`)/gi
 	private _cache = new CompletionsCache()
 
 	public provideCompletionItems(
diff --git a/server/providers/style.ts b/server/providers/style.ts
@@ -33,7 +33,7 @@ import { CompletionsCache } from '../cache'
 
 export class StyleCompletionItemProvider implements CompletionItemProvider {
 	private _CSSLanguageService: CSSLanguageService = GetCSSLanguageService()
-	private _expression = /(\/\*\s*(style)\s*\*\/\s*`|style\s*`)([^`]*)(`)/gi
+	private _expression = /(\/\*\s*(style)\s*\*\/\s*`|(?<!`)style\s*`)([^`]*)(`)/gi
 	private _cache = new CompletionsCache()
 
 	public provideCompletionItems(
diff --git a/tests/index.js b/tests/index.js
@@ -0,0 +1,105 @@
+function html()
+{	
+	html`
+		<style>
+			:host {
+				display: block;
+			}
+		</style>
+
+		<body>
+			<input type="button" @click=${(e) => this.click(e)} value="deadmau5 🐭" />
+		
+			<div></div>
+			<div></div>
+			<div></div>
+
+			<h3>${['❤️', '💛', '💚', '💙', '💜', '🖤']}</h3>
+		</body>
+	`;
+
+	/* html */`
+		<div></div>
+		<div></div>
+		<div></div>
+		<div></div>
+		<div>
+			<p></p>
+		</div>
+	`;
+
+	bug(/*   html*/`
+		<div></div>
+	`);
+
+	bug(html`
+		<div></div>
+	`);
+}
+
+function bug()
+{
+	html`div...`;
+}
+
+function css()
+{
+	css`
+		:host {
+			display: block;
+		}
+	`;
+
+	/* css */`
+		:host {
+			display: block;
+			height: 50px;
+		}
+	`;
+
+	/*    css    */`
+		:host {
+			display: block;
+		}
+	`;
+
+	bug(/*css  */`
+		:host {
+			display: block;
+		}
+	`)
+
+	bug(css`
+		:host {
+			display: block;
+		}
+	`)
+
+	style`
+		display: inline;
+	`
+}
+
+function issue39() 
+{
+	document.querySelector("#main").innerHTML = /*html*/`
+		<a href="http://127.0.0.1:8080/${data[0].id}">${data[0].title}</a>
+	`
+
+	/*css*/`
+		:root {
+			content: "${data[0].id}";
+		}
+	`
+
+	/*style*/`
+		content: "${data[0].id}";
+	`
+}
+
+function issue52()
+{
+	let a = document.querySelector(`html`)
+	let b;
+	let c = document.querySelector(`a`)	
+}
diff --git a/tests/index.jsx b/tests/index.jsx
@@ -1,5 +1,5 @@
 function html()
-{
+{	
 	html`
 		<style>
 			:host {
@@ -95,4 +95,11 @@ function issue39()
 	/*style*/`
 		content: "${data[0].id}";
 	`
+}
+
+function issue52()
+{
+	let a = document.querySelector(`html`)
+	let b;
+	let c = document.querySelector(`a`)	
 }
