enable ssr

Author: drinking-code

src/css-utils.js

@@ -1,5 +1,6 @@
-import CSS_COLOR_NAMES from "./external/bobspace:html-colors";
-import toPx from "./external/heygrady:units:length";
+import CSS_COLOR_NAMES from './external/bobspace:html-colors';
+
+const toPx = typeof document !== 'undefined' && require('./external/heygrady:units:length');
 
 /** @returns {string} */
 function convertPlainColor(val) {
@@ -42,7 +43,12 @@ function toNumber(length, element, err) {
         if (err) throw err
         else return false
     else if (length?.match(/(\d+(\.\d+)?(ch|cm|em|ex|in|mm|pc|pt|px|rem|vh|vmax|vmin|vw)|0)/))
-        return toPx(element, length)
+        if (typeof toPx === 'function')
+            return toPx(element, length)
+        else if (length.endsWith('px'))
+            return Number(length.substring(0, length.length - 2))
+        else
+            return false
 }
 
 /** @returns {number} */

src/external/apearce:eact-shadow-dom.js renamed to src/external/apearce:react-shadow-dom.js

@@ -7,19 +7,18 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 
-const constructableStylesheetsSupported = window
+const constructableStylesheetsSupported = typeof window !== 'undefined' && window
     && window.ShadowRoot
     && window.ShadowRoot.prototype.hasOwnProperty('adoptedStyleSheets')
     && window.CSSStyleSheet
     && window.CSSStyleSheet.prototype.hasOwnProperty('replace');
 
-const shadowRootSupported = window
+const shadowRootSupported = typeof window !== 'undefined' && window
     && window.Element
     && window.Element.prototype.hasOwnProperty('attachShadow');
 
 export default class ShadowRoot extends React.PureComponent {
     static constructableStylesheetsSupported = constructableStylesheetsSupported;
-    static constructibleStylesheetsSupported = constructableStylesheetsSupported;
     static defaultProps = {
         delegatesFocus: false,
         mode: 'open'

src/external/getMatchedCSSRules-polyfill.js

@@ -1,13 +1,13 @@
 /* eslint-disable */
 // polyfill element.matches
-if (!Element.prototype.matches) {
+if (typeof Element !== 'undefined' && !Element.prototype.matches) {
     Element.prototype.matches =
         Element.prototype.matchesSelector ||
         Element.prototype.mozMatchesSelector ||
         Element.prototype.msMatchesSelector ||
         Element.prototype.oMatchesSelector ||
         Element.prototype.webkitMatchesSelector ||
-        function(s) {
+        function (s) {
             var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                 i = matches.length;
             while (--i >= 0 && matches.item(i) !== this) {}
@@ -16,42 +16,43 @@ if (!Element.prototype.matches) {
 }
 
 // polyfill window.getMatchedCSSRules() in FireFox 6+
-if ( typeof window.getMatchedCSSRules !== 'function' ) {
+if (typeof window !== 'undefined' && typeof window.getMatchedCSSRules !== 'function') {
     var ELEMENT_RE = /[\w-]+/g,
         ID_RE = /#[\w-]+/g,
         CLASS_RE = /\.[\w-]+/g,
         ATTR_RE = /\[[^\]]+\]/g,
         // :not() pseudo-class does not add to specificity, but its content does as if it was outside it
         PSEUDO_CLASSES_RE = /\:(?!not)[\w-]+(\(.*\))?/g,
         PSEUDO_ELEMENTS_RE = /\:\:?(after|before|first-letter|first-line|selection)/g;
+
     // convert an array-like object to array
-    function toArray (list) {
+    function toArray(list) {
         return [].slice.call(list);
     }
 
     // handles extraction of `cssRules` as an `Array` from a stylesheet or something that behaves the same
-    function getSheetRules (stylesheet) {
+    function getSheetRules(stylesheet) {
         var sheet_media = stylesheet.media && stylesheet.media.mediaText;
         // if this sheet is disabled skip it
-        if ( stylesheet.disabled ) return [];
+        if (stylesheet.disabled) return [];
         // if this sheet's media is specified and doesn't match the viewport then skip it
-        if ( sheet_media && sheet_media.length && ! window.matchMedia(sheet_media).matches ) return [];
+        if (sheet_media && sheet_media.length && !window.matchMedia(sheet_media).matches) return [];
         // get the style rules of this sheet
         return toArray(stylesheet.cssRules);
     }
 
-    function _find (string, re) {
+    function _find(string, re) {
         var matches = string.match(re);
         return re ? re.length : 0;
     }
 
     // calculates the specificity of a given `selector`
-    function calculateScore (selector) {
-        var score = [0,0,0],
+    function calculateScore(selector) {
+        var score = [0, 0, 0],
             parts = selector.split(' '),
             part, match;
         //TODO: clean the ':not' part since the last ELEMENT_RE will pick it up
-        while ( part = parts.shift(), typeof part == 'string' ) {
+        while (part = parts.shift(), typeof part == 'string') {
             // find all pseudo-elements
             match = _find(part, PSEUDO_ELEMENTS_RE);
             score[2] = match;
@@ -84,21 +85,21 @@ if ( typeof window.getMatchedCSSRules !== 'function' ) {
     }
 
     // returns the heights possible specificity score an element can get from a give rule's selectorText
-    function getSpecificityScore (element, selector_text) {
+    function getSpecificityScore(element, selector_text) {
         var selectors = selector_text.split(','),
             selector, score, result = 0;
-        while ( selector = selectors.shift() ) {
-            if ( element.matches(selector) ) {
+        while (selector = selectors.shift()) {
+            if (element.matches(selector)) {
                 score = calculateScore(selector);
                 result = score > result ? score : result;
             }
         }
         return result;
     }
 
-    function sortBySpecificity (element, rules) {
+    function sortBySpecificity(element, rules) {
         // comparing function that sorts CSSStyleRules according to specificity of their `selectorText`
-        function compareSpecificity (a, b) {
+        function compareSpecificity(a, b) {
             return getSpecificityScore(element, b.selectorText) - getSpecificityScore(element, a.selectorText);
         }
 
@@ -116,28 +117,28 @@ if ( typeof window.getMatchedCSSRules !== 'function' ) {
 
         // assuming the browser hands us stylesheets in order of appearance
         // we iterate them from the beginning to follow proper cascade order
-        while ( sheet = style_sheets.shift() ) {
+        while (sheet = style_sheets.shift()) {
             // get the style rules of this sheet
             rules = getSheetRules(sheet);
             // loop the rules in order of appearance
-            while ( rule = rules.shift() ) {
+            while (rule = rules.shift()) {
                 // if this is an @import rule
-                if ( rule.styleSheet ) {
+                if (rule.styleSheet) {
                     // insert the imported stylesheet's rules at the beginning of this stylesheet's rules
                     rules = getSheetRules(rule.styleSheet).concat(rules);
                     // and skip this rule
                     continue;
                 }
                 // if there's no stylesheet attribute BUT there IS a media attribute it's a media rule
-                else if ( rule.media ) {
+                else if (rule.media) {
                     // insert the contained rules of this media rule to the beginning of this stylesheet's rules
                     rules = getSheetRules(rule).concat(rules);
                     // and skip it
                     continue
                 }
                 //TODO: for now only polyfilling Gecko
                 // check if this element matches this rule's selector
-                if ( element.matches(rule.selectorText) ) {
+                if (element.matches(rule.selectorText)) {
                     // push the rule to the results set
                     result.push(rule);
                 }

src/main.js

@@ -2,7 +2,7 @@ import React, {useRef, useEffect, useState, useCallback} from 'react'
 import generateSvgSquircle from './generator'
 import './external/getMatchedCSSRules-polyfill'
 import updateStates from "./updateStates"
-import ShadowRoot from "./external/apearce:eact-shadow-dom"
+import ShadowRoot from "./external/apearce:react-shadow-dom"
 import attachCSSWatcher from './styleSheetWatcher'
 import getMaskPaths from './mask-generator'
 

src/styleSheetWatcher.js

@@ -1,4 +1,6 @@
-const CSSChangeEvent = new CustomEvent('css-change');
+console.log()
+
+const CSSChangeEvent = typeof CustomEvent !== 'undefined' ? new CustomEvent('css-change') : 'css-change';
 
 export default function attachCSSWatcher(callback) {
     CSSWatcher.addEventListener('css-change', () => callback())
@@ -14,13 +16,16 @@ const CSSWatcher = new EventTarget()
         CSS = newCSS
         CSSWatcher.dispatchEvent(CSSChangeEvent)
     }, 30)
+
+    if (typeof window === 'undefined') return
     window.addEventListener('resize', () => {
         CSS = getCSSText()
         CSSWatcher.dispatchEvent(CSSChangeEvent)
     })
 })()
 
 function getCSSText() {
+    if (typeof document === 'undefined') return ''
     let CSS = ''
     for (let i = 0; i < document.styleSheets.length; i++) {
         const sheet = document.styleSheets[i]