Fix multiple classNames in specific identifiers

Author: talatkuyuk

src/index.ts

@@ -127,8 +127,8 @@ export const plugin: Plugin<[FlexibleContainerOptions?], Root> = (options) => {
   function normalizeIdentifiers(input?: string): string | undefined {
     return input
       ?.replace(/[{}]/g, "")
-      .replace(".", " .")
-      .replace("#", " #")
+      .replace(/\./g, " .")
+      .replace(/#/g, " #")
       .replace(/\s+/g, " ")
       .trim();
   }

tests/regex.specific.identifiers.spec.ts

@@ -1,52 +1,62 @@
 import { describe, it, expect } from "vitest";
 import { REGEX_CUSTOM } from "../src/index";
 
-// Define a custom string method
-String.prototype.normalize = function () {
-  return this?.replace(/[{}]/g, "")
-    .replace(".", " .")
-    .replace("#", " #")
+/**
+ *
+ * normalize specific identifiers "{section#id.classname}" --> "section #id .classname"
+ *
+ */
+function normalizeIdentifiers(input?: string): string | undefined {
+  return input
+    ?.replace(/[{}]/g, "")
+    .replace(/\./g, " .")
+    .replace(/#/g, " #")
     .replace(/\s+/g, " ")
     .trim();
-};
+}
 
 /**
- * the matched title may contain additional props for container and title node
- * in curly braces like: {section#foo} Title {span.bar}
+ *
+ * extract specific identifiers in curly braces for container and title nodes
+ * ::: type {section#foo} title {span.bar}
  *
  */
-function getCustomProps(input: string) {
+function extractSpecificIdentifiers(input?: string): {
+  containerProps?: string[];
+  mainTitle?: string;
+  titleProps?: string[];
+} {
+  if (!input) return {};
+
   const match = input.match(REGEX_CUSTOM);
 
-  // eslint-disable-next-line
-  let [input_, containerFixture, mainTitle, titleFixture] = match ?? [undefined];
+  /* v8 ignore next */
+  const [, containerFixture, mainTitle, titleFixture] = match ?? [undefined];
 
-  containerFixture = containerFixture?.normalize();
+  const nContainerFixture = normalizeIdentifiers(containerFixture);
+  const nMainTitle = normalizeIdentifiers(mainTitle);
+  const nTitleFixture = normalizeIdentifiers(titleFixture);
 
   const containerProps =
-    containerFixture && containerFixture !== "" ? containerFixture?.split(" ") : undefined;
-
-  titleFixture = titleFixture?.normalize();
-
-  const titleProps = titleFixture && titleFixture !== "" ? titleFixture?.split(" ") : undefined;
-
-  mainTitle = mainTitle?.normalize();
+    nContainerFixture && nContainerFixture !== "" ? nContainerFixture.split(" ") : undefined;
 
-  mainTitle = mainTitle === "" ? undefined : mainTitle;
+  const titleProps =
+    nTitleFixture && nTitleFixture !== "" ? nTitleFixture.split(" ") : undefined;
 
-  return { containerProps, mainTitle, titleProps };
+  return { containerProps, mainTitle: nMainTitle || undefined, titleProps };
 }
 
 describe("regex for custom props", () => {
   it("gets custom props 1", () => {
-    const input = "{  details#xxx   .fff  } Title  My    Spaces { summary   #box }";
+    const input = "{  details#xxx   .fff.ggg  } Title  My    Spaces { summary   #box }";
 
-    expect(getCustomProps(input)).toMatchInlineSnapshot(`
+    expect(extractSpecificIdentifiers(input)).toMatchInlineSnapshot(`
       {
         "containerProps": [
           "details",
           "#xxx",
           ".fff",
+          ".ggg",
         ],
         "mainTitle": "Title My Spaces",
         "titleProps": [
@@ -60,7 +70,7 @@ describe("regex for custom props", () => {
   it("gets custom props 2", () => {
     const input = " Title  My    Spaces { summary   #box }";
 
-    expect(getCustomProps(input)).toMatchInlineSnapshot(`
+    expect(extractSpecificIdentifiers(input)).toMatchInlineSnapshot(`
       {
         "containerProps": undefined,
         "mainTitle": "Title My Spaces",
@@ -75,7 +85,7 @@ describe("regex for custom props", () => {
   it("gets custom props 3", () => {
     const input = "{  details#xxx   .fff  } Title  My    Spaces ";
 
-    expect(getCustomProps(input)).toMatchInlineSnapshot(`
+    expect(extractSpecificIdentifiers(input)).toMatchInlineSnapshot(`
       {
         "containerProps": [
           "details",
@@ -91,7 +101,7 @@ describe("regex for custom props", () => {
   it("gets custom props 4", () => {
     const input = "{  details#xxx   .fff  }";
 
-    expect(getCustomProps(input)).toMatchInlineSnapshot(`
+    expect(extractSpecificIdentifiers(input)).toMatchInlineSnapshot(`
       {
         "containerProps": [
           "details",
@@ -107,7 +117,7 @@ describe("regex for custom props", () => {
   it("gets custom props 5", () => {
     const input = "{  details#xxx   .fff  }   { summary   #box }";
 
-    expect(getCustomProps(input)).toMatchInlineSnapshot(`
+    expect(extractSpecificIdentifiers(input)).toMatchInlineSnapshot(`
       {
         "containerProps": [
           "details",
@@ -126,7 +136,7 @@ describe("regex for custom props", () => {
   it("gets custom props 6", () => {
     const input = " Title  My    Spaces ";
 
-    expect(getCustomProps(input)).toMatchInlineSnapshot(`
+    expect(extractSpecificIdentifiers(input)).toMatchInlineSnapshot(`
       {
         "containerProps": undefined,
         "mainTitle": "Title My Spaces",
@@ -138,7 +148,7 @@ describe("regex for custom props", () => {
   it("gets custom props 7", () => {
     const input = "{   } Title  My    Spaces {}";
 
-    expect(getCustomProps(input)).toMatchInlineSnapshot(`
+    expect(extractSpecificIdentifiers(input)).toMatchInlineSnapshot(`
       {
         "containerProps": undefined,
         "mainTitle": "Title My Spaces",
@@ -150,7 +160,7 @@ describe("regex for custom props", () => {
   it("gets custom props 8", () => {
     const input = "{   }   {}";
 
-    expect(getCustomProps(input)).toMatchInlineSnapshot(`
+    expect(extractSpecificIdentifiers(input)).toMatchInlineSnapshot(`
       {
         "containerProps": undefined,
         "mainTitle": undefined,
@@ -162,7 +172,7 @@ describe("regex for custom props", () => {
   it("gets custom props 9", () => {
     const input = " {}";
 
-    expect(getCustomProps(input)).toMatchInlineSnapshot(`
+    expect(extractSpecificIdentifiers(input)).toMatchInlineSnapshot(`
       {
         "containerProps": undefined,
         "mainTitle": undefined,
@@ -174,7 +184,7 @@ describe("regex for custom props", () => {
   it("gets custom props 10", () => {
     const input = " ";
 
-    expect(getCustomProps(input)).toMatchInlineSnapshot(`
+    expect(extractSpecificIdentifiers(input)).toMatchInlineSnapshot(`
       {
         "containerProps": undefined,
         "mainTitle": undefined,

tests/with_customid_customclass.spec.ts

@@ -57,15 +57,15 @@ describe("special/custom props", () => {
   });
 
   // ******************************************
-  it("example in the readme", async () => {
+  it("multiple class names vs multiple id", async () => {
     const input = dedent`
-      ::: info {section#foo.myclass} Title Of Information {span#baz.someclass}
+      ::: info {section#foo.myclass.yourclass#id} Title Of Information {span#baz.someclass.anotherclass#id}
       content
       :::
     `;
 
     expect(await process(input)).toMatchInlineSnapshot(
-      `"<section id="foo" class="remark-container info myclass"><span id="baz" class="remark-container-title info someclass">Title Of Information</span><p>content</p></section>"`,
+      `"<section id="foo" class="remark-container info myclass yourclass"><span id="baz" class="remark-container-title info someclass anotherclass">Title Of Information</span><p>content</p></section>"`,
     );
   });