scope all css rules to .mermaid

[icewind1991]

Prevents the css from messing with other styles on the site.

[blackst0ne]

@knsv any chance to get this PR merged? 🙂

[blackst0ne]

@tylerlong do you have an ability to merge PRs? 🙂

[sclarson]

If I'm not mistaken this will resolve: #584

[blackst0ne]

Anyone with permissions, please, merge this bugfix. 🙂

/cc @knsv @tylerlong

[paullbn]

Waiting for this merge too 😇

[blackst0ne]

By the way, mermaid adds this style (for neutral theme):

svg {
  color: rgb(46, 46, 46);
  font: normal normal 400 normal 13px / 20.8px Menlo, "DejaVu Sans Mono", "Liberation Mono", Consolas, "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
}

which breaks other SVG elements on pages.

It seems this PR does not fix that styles. 🙂

diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index 2a45de7..6e85592 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -440,7 +440,7 @@ const render = function (id, txt, cb, container) {
   const cs = window.getComputedStyle(svg)
   s.innerHTML = `
   ${themes[config.theme] || defaultTheme}
-svg {
+.mermaid svg {
   color: ${cs.color};
   font: ${cs.font};
 }

[DoctorBud]

I would love to see this fixed. In the meantime, other users of Mermaid that are calling mermaid.render() may want to adapt my hack, which does the fixup of the CSS before its insertion into the DOM. It's a hack, and I didn't bother turning it into a single Regex, although I think that is doable:

function fixupMermaidSVG(svgCode) {
  svgCode = svgCode.replace(/\n/g, '');
  var beginStyleTag = '<style>';
  var endStyleTag = '</style>';

  var beginStyle = svgCode.indexOf(beginStyleTag);
  var endStyle = svgCode.indexOf(endStyleTag);
  var svgStyle = svgCode.slice(beginStyle + beginStyleTag.length, endStyle).trim();
  var svgStyleLines = svgStyle.split(/}/g);
  --svgStyleLines.length; // Assumes last element is ''
  var svgNewStyleLines = svgStyleLines.map(function(line) {
    var bracePos = line.indexOf('{');
    var selectors = line.slice(0, bracePos);
    var body = line.slice(bracePos);
    var selectorsNew = selectors.replace(/,/g, ',.mermaid ');
    selectorsNew = '.mermaid ' + selectorsNew;
    selectorsNew = selectorsNew.replace(/.mermaid .mermaid/g, '.mermaid');

    var newLine = selectorsNew + body;
    return newLine;
  });
  var svgNewStyle = beginStyleTag + svgNewStyleLines.join('}') + endStyleTag;
  svgCode =   svgCode.slice(0, beginStyle) +
              svgNewStyle +
              svgCode.slice(endStyle + endStyleTag.length);
  return svgCode;
}


function mermaidRender(div, code) {
  div.classList.add('mermaid');
  mermaid.render(
    div.id + '_svg',
    code,
    function (svgCode) {
      var svgCodeNew = fixupMermaidSVG(svgCode);
      div.innerHTML = svgCodeNew;
    },
    div
  );
}

[tylerlong]

Sorry for the late reply guys.

I am working on version 8.0 and the CSS part has been completely rewritten.

I will merge this PR manually into the latest code base.

[tylerlong]

Applied in commit: be33c41

[blackst0ne]

@tylerlong

What about this diff? 🙂

diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index 2a45de7..6e85592 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -440,7 +440,7 @@ const render = function (id, txt, cb, container) {
   const cs = window.getComputedStyle(svg)
   s.innerHTML = `
   ${themes[config.theme] || defaultTheme}
-svg {
+.mermaid svg {
   color: ${cs.color};
   font: ${cs.font};
 }

[tylerlong]

@blackst0ne I removed that part because I don't know what it is. And the CSS style seems to work fine without it.

Update: I've added that part back and made sure I didn't bring this scope issue back.

[tylerlong]

I made it even better. I scope the css with svg ID, so even there are multiple diagrams in a single page, each of them could have different CSS styles: 2ed5150

[blackst0ne]

@tylerlong is it possible to get a bumped version in npm, please? 🙂

[tylerlong]

@blackst0ne Yes. yarn add [email protected]. But keep in mind it's just an alpha version.