reduce specificity of generated stylesheets to 0 (observablehq#1941)

* 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.

* chore: generate new snapshots

Because the change in selector specificity affects every chart, all
snapshots will need regenerating. The rendered output should yield no
differences however.

* chore: add simple test case for style overrides

This test renders two categorical legends, one using default Plot styles and
the other using styles by setting the `className` option. The styles being
overridden have the same selector specificity as those set by Plot, would
it not be for the `:where()` selector resetting Plot's specificity to 0.

This is easily verified by reverting b2ff68e.

---------

Co-authored-by: Marcus Stade <[email protected]>

Author: 2 people

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;
 }`
       )