Merge pull request #8 from leodr/fix/jsx-with-only-html-tags

Detect JSX by searching for className attributes

Author: leodr

UNRELEASED.md

@@ -2,3 +2,7 @@
 
 Keep track of any changes you make here, so they can just be copied into the
 changelog after releasing them.
+
+### Fixed
+
+-   Detect that string is JSX if it contains a `className`-attribute

src/isHTML.spec.ts

@@ -356,3 +356,42 @@ test("should match long HTML snippet", () => {
 
     expect(isHTML(text)).toBe(true);
 });
+
+test("should not match JSX that contains className attribute", () => {
+    const text = html`
+        <div className="bg-gray-50">
+            <div
+                className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"
+            >
+                <h2
+                    className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"
+                >
+                    <span className="block">Ready to dive in?</span>
+                    <span className="block text-indigo-600"
+                        >Start your free trial today.</span
+                    >
+                </h2>
+                <div className="mt-8 lex lg:mt-0 lg:flex-shrink-0">
+                    <div className="inline-flex rounded-md shadow">
+                        <a
+                            href="#"
+                            className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
+                        >
+                            Get started
+                        </a>
+                    </div>
+                    <div className="ml-3 inline-flex rounded-md shadow">
+                        <a
+                            href="#"
+                            className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50"
+                        >
+                            Learn more
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+
+    expect(isHTML(text)).toBe(false);
+});

src/isHTML.ts

@@ -1,4 +1,5 @@
 const UPPERCASE_TAGS = /<\s*[A-Z]/;
+const CLASSNAME_ATTRIBUTE = /<.*className.*>/;
 
 /**
  * Checks if a given input string is HTML code.
@@ -15,5 +16,9 @@ export function isHTML(text: string): boolean {
         return false;
     }
 
+    if (CLASSNAME_ATTRIBUTE.test(trimmedText)) {
+        return false;
+    }
+
     return true;
 }