Use stylis to prepend idSelector

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

packages/mermaid/src/mermaidAPI.ts

@@ -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);
 
   // -------------------------------------------------------------------------------

packages/mermaid/src/styles.ts

@@ -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};
   }