inline styles; tabular nums (#579)

* inline styles; tabular nums

* inline styles test (#581)

* keep inline stylesheet

* inline stylesheets

* top-level className (#582)

* keep inline stylesheet

* inline stylesheets

* top-level className

* coerce className to string

Co-authored-by: Mike Bostock <[email protected]>

Co-authored-by: Philippe Rivière <[email protected]>

Author: mbostock

README.md

@@ -106,6 +106,8 @@ Plot.plot({
 })
 ```
 
+The generated SVG element has a random class name which applies a default stylesheet. Use the top-level **className** option to specify that class name.
+
 ### Scale options
 
 Plot passes data through [scales](https://observablehq.com/@observablehq/plot-scales) as needed before rendering marks. A scale maps abstract values such as time or temperature to visual values such as position or color. Within a given plot, marks share scales. For example, if a plot has two Plot.line marks, both share the same *x* and *y* scales for a consistent representation of data. (Plot does not currently support dual-axis charts, which are [not advised](https://blog.datawrapper.de/dualaxis/).)

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

@@ -3,11 +3,14 @@ import {Axes, autoAxisTicks, autoScaleLabels} from "./axes.js";
 import {facets} from "./facet.js";
 import {markify} from "./mark.js";
 import {Scales, autoScaleRange, applyScales, exposeScales, isOrdinalScale} from "./scales.js";
-import {filterStyles, offset} from "./style.js";
+import {filterStyles, maybeClassName, offset} from "./style.js";
 
 export function plot(options = {}) {
   const {facet, style, caption} = options;
 
+  // className for inline styles
+  const className = maybeClassName(options.className);
+
   // When faceting, wrap all marks in a faceting mark.
   if (facet !== undefined) {
     const {marks} = options;
@@ -69,12 +72,27 @@ export function plot(options = {}) {
   const {width, height} = dimensions;
 
   const svg = create("svg")
-      .attr("class", "plot")
+      .attr("class", className)
       .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(`
+        .${className} {
+          display: block;
+          background: white;
+          height: auto;
+          height: intrinsic;
+          max-width: 100%;
+        }
+        .${className} text {
+          white-space: pre;
+        }
+      `))
       .each(function() {
         if (typeof style === "string") this.style = style;
         else Object.assign(this.style, style);

src/style.css

@@ -153,3 +153,12 @@ export function filterStyles(index, {fill: F, fillOpacity: FO, stroke: S, stroke
 function none(color) {
   return color == null || color === "none";
 }
+
+const validClassName = /^-?([_a-z]|[\240-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])([_a-z0-9-]|[\240-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*$/;
+
+export function maybeClassName(name) {
+  if (name === undefined) return `plot-${Math.random().toString(16).slice(2)}`;
+  name = `${name}`;
+  if (!validClassName.test(name)) throw new Error(`invalid class name: ${name}`);
+  return name;
+}