GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

Use stylis to prepend idSelector

Browse Source 
code previously manually inserted idSelector before the generated CSS.
This could produce incorrect CSS.

Adding & in front of rules will ensure that it behaves properly.
Stylis seems permissive about the lack of nesting selector, but fails
if there is no selector at all. (e.g. "{...props...}")

We should probably do this for each diagram's style.ts files as well
This commit is contained in:
Dan Fallon 2022-11-20 22:42:26 -06:00
parent a8c5f6d517
commit 1f64302ae2
2 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/mermaid/src/mermaidAPI.ts
View File

@ -510,7 +510,7 @@ const render = function (
);
const style1 = document.createElement('style');
style1.innerHTML = `${idSelector} ` + rules;
style1.innerHTML = rules;
svg.insertBefore(style1, firstChild);
// -------------------------------------------------------------------------------
@ -706,7 +706,7 @@ const renderAsync = async function (
);
const style1 = document.createElement('style');
style1.innerHTML = `${idSelector} ` + rules;
style1.innerHTML = rules;
svg.insertBefore(style1, firstChild);
// -------------------------------------------------------------------------------

20
packages/mermaid/src/styles.ts
View File

@ -53,7 +53,7 @@ const getStyles = (
} else {
log.warn(`No theme found for ${type}`);
}
return ` {
return ` & {
font-family: ${options.fontFamily};
font-size: ${options.fontSize};
fill: ${options.textColor}
@ -61,40 +61,40 @@ const getStyles = (
/* Classes common for multiple diagrams */
.error-icon {
& .error-icon {
fill: ${options.errorBkgColor};
}
.error-text {
& .error-text {
fill: ${options.errorTextColor};
stroke: ${options.errorTextColor};
}
.edge-thickness-normal {
& .edge-thickness-normal {
stroke-width: 2px;
}
.edge-thickness-thick {
& .edge-thickness-thick {
stroke-width: 3.5px
}
.edge-pattern-solid {
& .edge-pattern-solid {
stroke-dasharray: 0;
}
.edge-pattern-dashed{
& .edge-pattern-dashed{
stroke-dasharray: 3;
}
.edge-pattern-dotted {
stroke-dasharray: 2;
}
.marker {
& .marker {
fill: ${options.lineColor};
stroke: ${options.lineColor};
}
.marker.cross {
& .marker.cross {
stroke: ${options.lineColor};
}
svg {
& svg {
font-family: ${options.fontFamily};
font-size: ${options.fontSize};
}