inline styles; tabular nums

Author: mbostock

bundle.js

@@ -1,3 +1,2 @@
-import "./src/style.css";
 export {version} from "./package.json";
 export * from "./src/index.js";

package.json

@@ -22,8 +22,7 @@
   },
   "files": [
     "dist/**/*.js",
-    "src/**/*.js",
-    "src/**/*.css"
+    "src/**/*.js"
   ],
   "scripts": {
     "test": "mkdir -p test/output && mocha -r module-alias/register 'test/**/*-test.js' test/plot.js && eslint src test",
@@ -38,12 +37,10 @@
   "devDependencies": {
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
-    "clean-css": "^5.1.1",
     "eslint": "^7.12.1",
     "htl": "^0.3.0",
     "js-beautify": "^1.13.0",
     "jsdom": "^17.0.0",
-    "jsesc": "^3.0.2",
     "mocha": "^9.1.0",
     "module-alias": "^2.2.2",
     "rollup": "^2.32.1",

rollup.config.js

@@ -1,10 +1,7 @@
 import fs from "fs";
-import path from "path";
 import {terser} from "rollup-plugin-terser";
 import json from "@rollup/plugin-json";
 import node from "@rollup/plugin-node-resolve";
-import jsesc from "jsesc";
-import CleanCSS from "clean-css";
 import * as meta from "./package.json";
 
 const filename = meta.name.split("/").pop();
@@ -20,27 +17,6 @@ const copyrights = fs.readFileSync("./LICENSE", "utf-8")
   .filter(line => /^copyright\s+/i.test(line))
   .map(line => line.replace(/^copyright\s+/i, ""));
 
-// A lil’ Rollup plugin to allow importing of style.css.
-const cssPath = path.resolve("./src/style.css");
-const css = {
-  load(id) {
-    if (id !== cssPath) return;
-    return fs.readFileSync(id, "utf8");
-  },
-  transform(input, id) {
-    if (id !== cssPath) return;
-    return {
-      moduleSideEffects: true,
-      code: `if (typeof document !== 'undefined') {
-  const style = document.createElement('style');
-  style.textContent = '${jsesc(new CleanCSS().minify(input).styles)}';
-  document.head.appendChild(style);
-}
-`
-    };
-  }
-};
-
 const config = {
   input: "bundle.js",
   external: ["d3"],
@@ -49,7 +25,6 @@ const config = {
     banner: `// ${meta.name} v${meta.version} Copyright ${copyrights.join(", ")}`
   },
   plugins: [
-    css,
     json(),
     node()
   ]

src/plot.js

@@ -68,13 +68,31 @@ export function plot(options = {}) {
 
   const {width, height} = dimensions;
 
+  // A unique identifier for this plot, for inline styles.
+  const uid = `plot-${Math.random().toString(16).slice(2)}`;
+
   const svg = create("svg")
-      .attr("class", "plot")
+      .attr("class", uid)
       .attr("fill", "currentColor")
+      .attr("font-family", "system-ui, sans-serif")
+      .attr("font-size", 10)
+      .attr("font-variant", "tabular-nums")
       .attr("text-anchor", "middle")
       .attr("width", width)
       .attr("height", height)
       .attr("viewBox", `0 0 ${width} ${height}`)
+      .call(svg => svg.append("style").text(`
+        .${uid} {
+          display: block;
+          background: white;
+          height: auto;
+          height: intrinsic;
+          max-width: 100%;
+        }
+        .${uid} text {
+          white-space: pre;
+        }
+      `))
       .each(function() {
         if (typeof style === "string") this.style = style;
         else Object.assign(this.style, style);