From c514277e31a21326c835bef0b823b0df1ab268c8 Mon Sep 17 00:00:00 2001
From: Anthony Lieuallen <arantius@gmail.com>
Date: Tue, 22 Nov 2022 08:47:41 -0500
Subject: [PATCH] Dynamic stylesheet workaround.

Apparently Safari doesn't support `SVGStyleElement.sheet`.  And we don't
need that separate sheet anyway, so reduce to one and just use
`document.styleSheets[0]`.

Fixes #1
---
 colors.html | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/colors.html b/colors.html
index def60e4..0279644 100644
--- a/colors.html
+++ b/colors.html
@@ -43,6 +43,7 @@ body {
 svg {
   clip-path: circle(300px at center);
 }
+polygon { stroke-width: 1px; }
 
 .swatch {
   border: 8px outset white;
@@ -60,11 +61,7 @@ svg {
     viewbox="0 0 1024 1024"
     width="600"
     xmlns="http://www.w3.org/2000/svg"
-    >
-  <style>
-  polygon { stroke-width: 1px; }
-  </style>
-</svg>
+    ></svg>
 
 <!-- https://github.com/gorhill/Javascript-Voronoi -->
 <script src="rhill-voronoi-core.min.js"></script>
@@ -230,7 +227,7 @@ const cx = radius;
 const cy = radius;
 
 const svg = document.querySelector('svg');
-const svgStyle = svg.querySelector('style').sheet;
+const styleSheet = document.styleSheets[0];
 
 // TODO: Select-able color categories, re-render wheel.
 function renderWheel() {
@@ -277,7 +274,7 @@ function renderWheel() {
 
     svg.appendChild(c);
     let rgb = `rgb(${r}, ${g}, ${b})`;
-    svgStyle.insertRule(`[data-color='${colorName}'] { fill: ${rgb}; stroke: ${rgb}; }`);
+    styleSheet.insertRule(`[data-color='${colorName}'] { fill: ${rgb}; stroke: ${rgb}; }`);
   });
 }
 renderWheel();