CSS Inliner in JavaScript

Many email marketing platforms and other systems require CSS styles to be inlined directly within HTML elements, rather than being defined in external stylesheets or <style> tags. This is because some email clients have limited or no support for external CSS. This challenge asks you to build a JavaScript function that takes an HTML string and inlines all CSS styles found within <style> tags and external stylesheets (simulated by URLs within the HTML).

Problem Description

You need to create a JavaScript function called inlineCSS that takes an HTML string as input and returns a modified HTML string where all CSS styles have been inlined directly into the corresponding HTML elements. The function should:

Parse the HTML: The function should parse the HTML string to identify <style> tags and any href attributes in link tags that point to external CSS files (simulated as URLs within the HTML).
Extract CSS: Extract the CSS content from both <style> tags and the simulated external CSS files (represented as strings).
Inline CSS: Iterate through the HTML elements and apply the extracted CSS rules to each element. The inlining should be done using the style attribute of each element. If an element already has a style attribute, the new CSS rules should be appended to it, separated by semicolons.
Remove Style and Link Tags: After inlining, remove the original <style> tags and <link> tags referencing external stylesheets from the HTML.

Expected Behavior:

The function should return a valid HTML string with all CSS styles inlined. The original <style> and <link> tags should be removed. The order of styles within the style attribute should not be guaranteed.

Edge Cases to Consider:

Empty HTML string.
HTML with no <style> or <link> tags.
HTML with multiple <style> tags.
HTML with multiple <link> tags.
CSS rules with the same selectors in different <style> or <link> tags. (The later rule should overwrite the earlier one for the same selector).
HTML with nested elements.
Invalid HTML (the function should still attempt to process it as best as possible).
CSS rules with vendor prefixes (e.g., -webkit-).

Examples

Example 1:

Input: "<!DOCTYPE html><html><head><style>body { background-color: lightblue; }</style></head><body><h1>Hello</h1></body></html>"
Output: "<!DOCTYPE html><html><head></head><body style=\"background-color: lightblue;\"><h1>Hello</h1></body></html>"
Explanation: The CSS rule `body { background-color: lightblue; }` is extracted from the `<style>` tag and inlined into the `<body>` element. The `<style>` tag is then removed.

Example 2:

Input: "<!DOCTYPE html><html><head><link rel=\"stylesheet\" href=\"style.css\"></head><body><h1>Hello</h1></body></html>"
Output: "<!DOCTYPE html><html><head></head><body style=\"/* CSS from style.css would be inlined here */\"><h1>Hello</h1></body></html>"
Explanation:  Assume `style.css` contains `h1 { color: red; }`. The CSS rule `h1 { color: red; }` is extracted from the simulated external stylesheet and inlined into the `<h1>` element. The `<link>` tag is then removed.  Note: The comment represents the inlined CSS.

Example 3:

Input: "<!DOCTYPE html><html><head><style>body { background-color: lightblue; }</style><link rel=\"stylesheet\" href=\"style.css\"></head><body style=\"color: green;\"><h1>Hello</h1></body></html>"
Output: "<!DOCTYPE html><html><head></head><body style=\"color: green; background-color: lightblue; /* CSS from style.css would be inlined here */\"><h1>Hello</h1></body></html>"
Explanation:  The CSS rules from both the `<style>` tag and the simulated external stylesheet are inlined into the `<body>` element, and the `<style>` and `<link>` tags are removed.  The existing `color: green;` style is preserved and combined with the new styles.

Constraints

The input HTML string can be of any length (up to a reasonable limit, e.g., 1MB).
The function must return a valid HTML string.
The function should be reasonably performant for typical HTML documents. Avoid excessively complex parsing or regular expressions that could lead to performance bottlenecks.
Assume the external stylesheet content is provided as a string when a link tag is encountered. You don't need to actually read files from disk.

Notes

You can use a DOMParser to parse the HTML string, but it's not strictly required. Regular expressions can also be used, but be mindful of their potential limitations and performance implications when dealing with complex HTML.
Consider using a CSS selector parser to accurately match CSS rules to HTML elements. However, for simplicity, you can start with a basic approach that only inlines styles based on element tags (e.g., inlining body { ... } into the <body> element).
The simulated external stylesheet content will be a string containing valid CSS rules.
Focus on correctly inlining the CSS and removing the original style and link tags. The exact formatting of the inlined CSS (e.g., whitespace, order of rules) is not critical.
Error handling is not required for invalid CSS syntax. Assume the CSS is valid.