Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

scope all css rules to .mermaid #577

Closed
wants to merge 1 commit into from

Conversation

icewind1991
Copy link

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

@blackst0ne
Copy link

@knsv any chance to get this PR merged? 🙂

@blackst0ne
Copy link

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

@sclarson
Copy link

sclarson commented Nov 7, 2017

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

This was referenced Nov 8, 2017
@blackst0ne
Copy link

Anyone with permissions, please, merge this bugfix. 🙂

/cc @knsv @tylerlong

@paullbn
Copy link

paullbn commented Nov 14, 2017

Waiting for this merge too 😇

@blackst0ne
Copy link

blackst0ne commented Nov 22, 2017

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
Copy link

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
Copy link
Collaborator

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
Copy link
Collaborator

Applied in commit: be33c41

@tylerlong tylerlong closed this Mar 11, 2018
@blackst0ne
Copy link

@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
Copy link
Collaborator

tylerlong commented Mar 11, 2018

@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
Copy link
Collaborator

tylerlong commented Mar 11, 2018

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

@icewind1991 icewind1991 deleted the scope-css-rules branch March 11, 2018 20:12
@blackst0ne
Copy link

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

@tylerlong
Copy link
Collaborator

@blackst0ne Yes. yarn add mermaid@8.0.0-alpha.3. But keep in mind it's just an alpha version.

mgenereu pushed a commit to mgenereu/mermaid that referenced this pull request Jun 25, 2022
…yarn/develop/tailwindcss-3.0.13

chore(deps-dev): bump tailwindcss from 3.0.11 to 3.0.13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants