All <svg> elements in page are colored black

[rhysd]

Problem

I found a weird CSS rule in <style> element under <svg id="mermaidChartXXX"> element as following.

svg {
  color: rgb(0, 0, 0);
  font: normal normal normal normal 16px / normal "Hiragino Kaku Gothic ProN";
}

It colors all <svg> elements as black in an entire page overwriting other CSS rules.

How to reproduce

1. Install mermaid with $ npm install mermaid
2. Open example page with $ open node_modules/mermaid/dist/index.html
3. Find <svg id="mermaidChart1"> element under <div class="mermaid">
4. Check child <style> element's last CSS rule.

Environment

Followings are my environment information:

• macOS 10.12.6
• Chrome 61.0.3163.100
• mermaid 7.1.0

[rhysd]

This problem does not occur in mermaid 7.0.17 but occur in mermaid 7.0.18. So this is a regression.

[tylerlong]

Yes it is a regression.

In order to fix the problem from the root, we need to put mermaid CSS into its own namespace so it won't have any global pollution effect.

Example:

.mermad > svg {
...
}

[sclarson]

This looks like it is resolved by: #577