works now without border set in css

Author: drinking-code

src/css-utils.js

@@ -1,6 +1,6 @@
 import CSS_COLOR_NAMES from './external/bobspace:html-colors';
 
-const toPx = typeof document !== 'undefined' && require('./external/heygrady:units:length');
+const toPx = typeof document !== 'undefined' && require('./external/heygrady:units:length').default;
 
 /** @returns {string} */
 function convertPlainColor(val) {
@@ -26,7 +26,7 @@ function convertPlainColor(val) {
 function convertColorOpacity(val) {
     if (val?.startsWith('rgba') || val?.startsWith('hsla')) {
         return Number(val.match(/(\d*\.?\d+)?\)$/)[1])
-    } else return 1
+    } else return 0
 }
 
 const htmlLengthNotSvgErrorTemplate = (a, b) => `<RoundDiv> ${a} must be ${b ? `either ${b}, or` : ''} in one of the following units: ch, cm, em, ex, in, mm, pc, pt, px, rem, vh, vmax, vmin, vw.`

src/external/apearce:react-shadow-dom.js

@@ -3,7 +3,7 @@
  * by apearce
 */
 
-import React from 'react';
+import React, {Fragment} from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 
@@ -67,7 +67,7 @@ export default class ShadowRoot extends React.PureComponent {
 
     render() {
         if (!this.state.initialized) {
-            return <span ref={this.placeholder}></span>;
+            return <span ref={this.placeholder}/>;
         }
 
         return ReactDOM.createPortal(this.props.children, this.shadowRoot);

src/generator.js

@@ -63,7 +63,7 @@ export default function generateSvgSquircle(height, width, radius) {
 
     const startPoint = `${a0xw},${wyOffset}`
 
-    return `M${startPoint}
+    const path = `M${startPoint}
     ${width / 2 < a0x[1]
         ? ''
         : `L${width - a0xw},0`
@@ -108,4 +108,9 @@ export default function generateSvgSquircle(height, width, radius) {
         .replace(/\d+\.\d+/g, match =>
             Math.round(Number(match) * (10 ** roundToNthPlace)) / (10 ** roundToNthPlace)
         )
+
+    if (path.match(/[^ M0LCZ,]/) === null)
+        return ''
+
+    return path
 }

src/main.js

@@ -14,7 +14,7 @@ export default function RoundDiv({style, children, ...props}) {
     const [radius, setRadius] = useState(Array(4).fill(0))
 
     const [borderColor, setBorderColor] = useState(Array(4).fill('transparent'))
-    const [borderOpacity, setBorderOpacity] = useState(Array(4).fill(1))
+    const [borderOpacity, setBorderOpacity] = useState(Array(4).fill(0))
     const [borderWidth, setBorderWidth] = useState(Array(4).fill(0))
 
     const [path, setPath] = useState('Z')
@@ -23,17 +23,19 @@ export default function RoundDiv({style, children, ...props}) {
 
     const div = useRef()
 
-    const updateStatesWithArgs = useCallback(() => updateStates({
-        div,
-        style,
-        setPosition,
-        setHeight,
-        setWidth,
-        setRadius,
-        setBorderColor,
-        setBorderWidth,
-        setBorderOpacity
-    }), [style])
+    const updateStatesWithArgs = useCallback(() => {
+        updateStates({
+            div,
+            style,
+            setPosition,
+            setHeight,
+            setWidth,
+            setRadius,
+            setBorderColor,
+            setBorderWidth,
+            setBorderOpacity
+        })
+    }, [style])
 
     useEffect(updateStatesWithArgs, [style, updateStatesWithArgs])
 
@@ -81,8 +83,9 @@ export default function RoundDiv({style, children, ...props}) {
 
     const divStyle = {
         ...style,
-        clipPath: `path("${path}")`,
-        borderColor: 'transparent'
+        clipPath: (path.startsWith('Z') || path === '') ? '' : `path("${path}")`,
+        borderColor: 'transparent',
+        borderRadius: 0,
     }
 
     return <div {...props} style={divStyle} ref={div}>

src/styleSheetWatcher.js

@@ -1,5 +1,3 @@
-console.log()
-
 const CSSChangeEvent = typeof CustomEvent !== 'undefined' ? new CustomEvent('css-change') : 'css-change';
 
 export default function attachCSSWatcher(callback) {
@@ -8,6 +6,15 @@ export default function attachCSSWatcher(callback) {
 
 const CSSWatcher = new EventTarget()
 
+if (typeof document !== 'undefined') {
+    if (document.readyState === 'complete')
+        CSSWatcher.dispatchEvent(CSSChangeEvent)
+    else
+        window.addEventListener('load', () =>
+            CSSWatcher.dispatchEvent(CSSChangeEvent)
+        )
+}
+
 ;(function watchCSS() {
     let CSS = getCSSText()
     setInterval(() => {

src/updateStates.js

@@ -40,7 +40,7 @@ export default function updateStates(args) {
         const returnNthOverwrittenOrCurrent = r =>
             !r ? false :
                 r?.overwritten.length > 0
-                    ? r.overwritten[n ?? 0].value
+                    ? r.overwritten[n ?? 0]?.value
                     : r.current?.value
 
         const normal = getStyle(key, div.current)
@@ -73,7 +73,7 @@ export default function updateStates(args) {
     if (!divStyle) return
     ReactDOM.unstable_batchedUpdates(() => {
         lazySetRadius(
-            getBorderRadii(1)
+            getBorderRadii(0)
                 .map(s => Math.min(
                     toNumber(s, div.current, htmlBorderRadiusNotSvgError),
                     height / 2,