mermaid-cli icon indicating copy to clipboard operation
mermaid-cli copied to clipboard

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

Open joelburton opened this issue 4 years ago • 3 comments

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.

joelburton avatar Oct 02 '20 00:10 joelburton

@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! :)

MindaugasLaganeckas avatar Oct 05 '20 11:10 MindaugasLaganeckas

demo.zip

To build:

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

check that file does not contain the CSS given

joelburton avatar Oct 08 '20 06:10 joelburton

@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

SplitGemini avatar Mar 13 '22 05:03 SplitGemini