Use stylis to prepend idSelector

code previously manually inserted idSelector before the generated CSS.
This could produce invalid CSS. Stylis seems permissive about this,
but it fails if there is no selector at all. (e.g. "{...props...}")

Adding & in front of rules will ensure that it behaves properly.

We should probably do this for each diagram's style.ts files as well

docs/config/setup/modules/mermaidAPI.md

@@ -80,7 +80,7 @@ mermaid.initialize(config);
 
 #### Defined in
 
-[mermaidAPI.ts:949](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L949)
+[mermaidAPI.ts:950](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L950)
 
 ## Functions
 
@@ -111,7 +111,7 @@ Return the last node appended
 
 #### Defined in
 
-[mermaidAPI.ts:292](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L292)
+[mermaidAPI.ts:293](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L293)
 
 ---
 
@@ -137,7 +137,7 @@ the cleaned up svgCode
 
 #### Defined in
 
-[mermaidAPI.ts:243](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L243)
+[mermaidAPI.ts:244](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L244)
 
 ---
 
@@ -279,7 +279,7 @@ Put the svgCode into an iFrame. Return the iFrame code
 
 #### Defined in
 
-[mermaidAPI.ts:271](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L271)
+[mermaidAPI.ts:272](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L272)
 
 ---
 
@@ -305,4 +305,4 @@ Remove any existing elements from the given document
 
 #### Defined in
 
-[mermaidAPI.ts:343](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L343)
+[mermaidAPI.ts:344](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L344)

packages/mermaid/src/mermaidAPI.ts

@@ -226,6 +226,7 @@ export const createUserStyles = (
   const userCSSstyles = createCssStyles(config, graphType, classDefs);
   const allStyles = getStyles(graphType, userCSSstyles, config.themeVariables);
 
+
   // Now turn all of the styles into a (compiled) string that starts with the id
   // use the stylis library to compile the css, turn the results into a valid CSS string (serialize(...., stringify))
   // @see https://github.com/thysultan/stylis
@@ -510,7 +511,7 @@ const render = function (
   );
 
   const style1 = document.createElement('style');
-  style1.innerHTML = `${idSelector} ` + rules;
+  style1.innerHTML = rules;
   svg.insertBefore(style1, firstChild);
 
   // -------------------------------------------------------------------------------
@@ -706,7 +707,7 @@ const renderAsync = async function (
   );
 
   const style1 = document.createElement('style');
-  style1.innerHTML = `${idSelector} ` + rules;
+  style1.innerHTML = rules;
   svg.insertBefore(style1, firstChild);
 
   // -------------------------------------------------------------------------------

packages/mermaid/src/styles.ts

@@ -53,48 +53,48 @@ const getStyles = (
   } else {
     log.warn(`No theme found for ${type}`);
   }
-  return ` {
+  return ` & {
     font-family: ${options.fontFamily};
     font-size: ${options.fontSize};
     fill: ${options.textColor}
   }
 
   /* 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};
   }