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

-C option for CSS file has no effect (part of potential fix included) #55

Closed
joelburton opened this issue Oct 2, 2020 · 3 comments · Fixed by #358
Closed

-C option for CSS file has no effect (part of potential fix included) #55

joelburton opened this issue Oct 2, 2020 · 3 comments · Fixed by #358

Comments

@joelburton
Copy link
Contributor

joelburton commented Oct 2, 2020

Describe the bug
Using the -C option does not include that CSS into the written-out SVG file anywhere.

To Reproduce
Steps to reproduce the behavior:

echo ".messageText { stroke: transparent !important }" > mermaid.css
../test/node_modules/.bin/mmdc -C mermaid.css -i diag.mmd
grep transparent diag.mmd.svg     # finds nothing

Expected behavior
I expect <style>.messageText { stroke: transparent !important }</style> to be in the SVG.

Desktop (please complete the following information):

  • OS: OSX Catalina

Additional context
Running puppeteer in headless mode, I don't see the SVG in the created document, either.

I did hack together a workaround for me, where the part that emits SVG now is:

    const svg = yield page.$eval('#container', function (container) { 
      // new line is here; also, made the `style` variable in a higher scope, so can get to here
      container.childNodes[0].appendChild(style); 
      return container.innerHTML; 
    });

I don't understand whether others find their CSS files are includes, or whether I'm doing anything wrong.

@MindaugasLaganeckas
Copy link
Member

@joelburton : thank you so much for reporting this issue. Can you attach a .mmd file, css file and instructions to build the diagram?
Would you be able to make a PR? I could validate your proposed solution there.
Thanks! :)

@joelburton
Copy link
Contributor Author

demo.zip

To build:

~/src/node_modules/.bin/mmdc -i demo.mmd -C mermaid.css

check that file does not contain the CSS given

@SplitGemini
Copy link

SplitGemini commented Mar 13, 2022

@font-face {
	font-family: 'Source Han Sans SC';
	font-style: normal;
	font-weight: normal;
	src: local('Source Han Sans SC'), local('SourceHanSansSC-Regular'),
		url('SourceHanSansSC-Regular.otf') format('opentype');
}

html,
body {
	font-family: 'Source Han Sans SC', Segoe UI, Roboto, PingFang SC, Hiragino Sans GB,
		Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.65);
	padding: 16px;
}

I use this css to specify a local font fail too

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants