fix!: reduce specificity of generated stylesheets to 0

By reducing the specificity of selectors in the generated stylesheets to 0,
consumers of Plot can much more easily override these styles using their
own stylesheets while still enjoying the default styling of Plot.

Author: mstade

src/legends/ramp.js

@@ -38,14 +38,14 @@ export function legendRamp(color, options) {
     .call((svg) =>
       // Warning: if you edit this, change defaultClassName.
       svg.append("style").text(
-        `.${className}-ramp {
+        `:where(.${className}-ramp) {
   display: block;
   height: auto;
   height: intrinsic;
   max-width: 100%;
   overflow: visible;
 }
-.${className}-ramp text {
+:where(.${className}-ramp text) {
   white-space: pre;
 }`
       )

src/legends/swatches.js

@@ -96,16 +96,16 @@ function legendItems(scale, options = {}, swatch) {
   let extraStyle;
 
   if (columns != null) {
-    extraStyle = `.${className}-swatches-columns .${className}-swatch {
+    extraStyle = `:where(.${className}-swatches-columns .${className}-swatch) {
   display: flex;
   align-items: center;
   break-inside: avoid;
   padding-bottom: 1px;
 }
-.${className}-swatches-columns .${className}-swatch::before {
+:where(.${className}-swatches-columns .${className}-swatch::before) {
   flex-shrink: 0;
 }
-.${className}-swatches-columns .${className}-swatch-label {
+:where(.${className}-swatches-columns .${className}-swatch-label) {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -123,13 +123,13 @@ function legendItems(scale, options = {}, swatch) {
         item.append("div").attr("class", `${className}-swatch-label`).attr("title", tickFormat).text(tickFormat)
       );
   } else {
-    extraStyle = `.${className}-swatches-wrap {
+    extraStyle = `:where(.${className}-swatches-wrap) {
   display: flex;
   align-items: center;
   min-height: 33px;
   flex-wrap: wrap;
 }
-.${className}-swatches-wrap .${className}-swatch {
+:where(.${className}-swatches-wrap .${className}-swatch) {
   display: inline-flex;
   align-items: center;
   margin-right: 1em;
@@ -150,12 +150,12 @@ function legendItems(scale, options = {}, swatch) {
   return swatches
     .call((div) =>
       div.insert("style", "*").text(
-        `.${className}-swatches {
+        `:where(.${className}-swatches) {
   font-family: system-ui, sans-serif;
   font-size: 10px;
   margin-bottom: 0.5em;
 }
-.${className}-swatch > svg {
+:where(.${className}-swatch > svg) {
   margin-right: 0.5em;
   overflow: visible;
 }

src/plot.js

@@ -257,15 +257,15 @@ export function plot(options = {}) {
     .call((svg) =>
       // Warning: if you edit this, change defaultClassName.
       svg.append("style").text(
-        `.${className} {
+        `:where(.${className}) {
   --plot-background: white;
   display: block;
   height: auto;
   height: intrinsic;
   max-width: 100%;
 }
-.${className} text,
-.${className} tspan {
+:where(.${className} text),
+:where(.${className} tspan) {
   white-space: pre;
 }`
       )