fix: don't replace comments inside codeblocks while processing README (#7093)

Author: snitin315

src/utilities/__snapshots__/process-readme.test.mjs.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`processReadme should preserve comments inside code blocks 1`] = `
+"
+    
+    ### Disable url resolving using the \`<!-- webpackIgnore: true -->\` comment
+
+    \`\`\`html
+    <!-- Disabled url handling for the src attribute -->
+    <!-- webpackIgnore: true -->
+    <img src="image.png" />
+
+    <!-- Disabled url handling for the src and srcset attributes -->
+    <!-- webpackIgnore: true -->
+    <img
+      srcset="image.png 480w, image.png 768w"
+      src="image.png"
+      alt="Elva dressed as a fairy"
+    />
+
+    <!-- Disabled url handling for the content attribute -->
+    <!-- webpackIgnore: true -->
+    <meta itemprop="image" content="./image.png" />
+
+    <!-- Disabled url handling for the href attribute -->
+    <!-- webpackIgnore: true -->
+    <link rel="icon" type="image/png" sizes="192x192" href="./image.png" />
+    \`\`\`
+    "
+`;

src/utilities/process-readme.mjs

@@ -109,11 +109,36 @@ export default function processREADME(body, options = {}) {
     .replace(inlineLinkRegex, linkFixerFactory(options.source))
     // Replace any <h2> with `##`
     .replace(/<h2[^>]*>/g, '## ')
-    .replace(/<\/h2>/g, '')
-    // Drop any comments
-    .replace(/<!--[\s\S]*?-->/g, '');
+    .replace(/<\/h2>/g, '');
+
+  // Drop any comments that are not in code blocks
+  // EXAMPLE: <!-- some comment --> should be dropped
+  // EXAMPLE: `<!-- webpackIgnore: true -->` should  not be dropped
+  // EXAMPLE: ```html <!-- webpackIgnore: true -->  <!-- some comment -->``` should not be dropped
+  processingString = processingString.replace(/<!--[\s\S]*?-->/g, (match) => {
+    const codeBlockPattern = /```([\s\S]*?)```|`([\s\S]*?)`/g;
+    const contents = [];
+    let matches;
+    while ((matches = codeBlockPattern.exec(processingString)) !== null) {
+      // Content inside triple backticks
+      if (matches[1] !== undefined) {
+        contents.push(matches[1]);
+      }
+      // Content inside single backticks
+      else if (matches[2] !== undefined) {
+        contents.push(matches[2]);
+      }
+    }
+
+    // If the comment is inside a code block, return the match
+    if (contents.join('').includes(match)) {
+      return match;
+    }
+
+    return '';
+  });
 
-  // find the laoders links
+  // find the loaders links
   const loaderMatches = getMatches(
     processingString,
     /https?:\/\/github.com\/(webpack|webpack-contrib)\/([-A-za-z0-9]+-loader\/?)([)"])/g

src/utilities/process-readme.test.mjs

@@ -39,4 +39,38 @@ describe('processReadme', () => {
       'See the file [`https://github.com/webpack-contrib/postcss-loader/blob/master/src/config.d.ts`](https://github.com/webpack-contrib/postcss-loader/blob/master/src/config.d.ts).'
     );
   });
+
+  it('should preserve comments inside code blocks', () => {
+    const options = {
+      source:
+        'https://raw.githubusercontent.com/webpack-contrib/postcss-loader/master/README.md',
+    };
+    const loaderMDData = `
+    <!-- some comment that should be dropped -->
+    ### Disable url resolving using the \`<!-- webpackIgnore: true -->\` comment
+
+    \`\`\`html
+    <!-- Disabled url handling for the src attribute -->
+    <!-- webpackIgnore: true -->
+    <img src="image.png" />
+
+    <!-- Disabled url handling for the src and srcset attributes -->
+    <!-- webpackIgnore: true -->
+    <img
+      srcset="image.png 480w, image.png 768w"
+      src="image.png"
+      alt="Elva dressed as a fairy"
+    />
+
+    <!-- Disabled url handling for the content attribute -->
+    <!-- webpackIgnore: true -->
+    <meta itemprop="image" content="./image.png" />
+
+    <!-- Disabled url handling for the href attribute -->
+    <!-- webpackIgnore: true -->
+    <link rel="icon" type="image/png" sizes="192x192" href="./image.png" />
+    \`\`\`
+    `;
+    expect(processReadme(loaderMDData, options)).toMatchSnapshot();
+  });
 });