fix borders in firefox, update readme

Author: drinking-code

README.md

@@ -28,9 +28,9 @@ const App = () => {
 
 export default App;
 ```
-`react-round-div` will clip the `border-radius` of it is too large to prevent artifacts from appearing. You can turn this off by passing `clip={false}`.
 
 
 ## Caveats
-This package is still in the starting blocks, so for now only single colored backgrounds and solid, uniform borders are supported.  
-There is support to come for gradients and image backgrounds, gradient borders, and perhaps proper `backdrop-filter` support.
+This package is still in the starting blocks, so for now borders are only supported in the `solid` style and some transitions on the div may not work properly.
+
+Moreover, children inside `RoundDiv` get cut off when are placed (partly) outside the div due to `clip-path` being used to make the smooth corners. There will probably an option in later versions to use a pseudo-element for the shape, so that children can be rendered outside.

src/generator.js

@@ -8,6 +8,7 @@
 export default function generateSvgSquircle(height, width, radius) {
     /* from right to left top left corner upper (right half) */
     const ratios = [1.528665037, 1.0884928889, 0.8684068148, 0.07491140741, 0.6314939259, 0.1690595556, 0.3728238519];
+    const roundToNthPlace = 1;
 
     if (typeof radius === 'number')
         radius = Array(4).fill(radius)
@@ -101,5 +102,10 @@ export default function generateSvgSquircle(height, width, radius) {
     C0,${a1x[0]},0,${a2x[0]},${a3y[0]},${a3x[0]}
     C${b1y[0]},${b1x[0]},${b1x[0]},${b1y[0]},${b0x[0]},${b0y[0]}
     C${a2x[0]},0,${a1x[0]},0,${startPoint}
-    Z`.replace(/\n */g, '').replace(/NaN/g, '0');
+    Z`
+        .replace(/[\n ]/g, '')
+        .replace(/NaN/g, '0')
+        .replace(/\d+\.\d+/g, match =>
+            Math.round(Number(match) * (10 ** roundToNthPlace)) / (10 ** roundToNthPlace)
+        )
 }

src/main.js

@@ -98,7 +98,7 @@ export default function RoundDiv({style, children, ...props}) {
             }} xmlnsXlink="http://www.w3.org/1999/xlink" preserveAspectRatio={'xMidYMid slice'}>
                 <defs>
                     <clipPath id="inner">
-                        <path d={`M0,0V${height}H${width}V0H0Z` + innerPath} fillRule={'evenodd'}/>
+                        <path d={`M0,0V${height}H${width}V0Z` + innerPath} fillRule={'evenodd'}/>
                     </clipPath>
                 </defs>
                 {Object.keys(maskPaths).map((key, i) => {

src/mask-generator.js

@@ -1,4 +1,5 @@
 export default function getMaskPaths(borderWidth, height, width, radius) {
+    // console.log(borderWidth, height, width, radius)
     const allSides = ['top', 'right', 'bottom', 'left']
     const max = allSides.length - 1
     const next = i => i === max ? 0 : i + 1

src/styleSheetWatcher.js

@@ -1,10 +1,7 @@
 const CSSChangeEvent = new CustomEvent('css-change');
 
 export default function attachCSSWatcher(callback) {
-    // attach later, after loading is done
-    setTimeout(() =>
-            CSSWatcher.addEventListener('css-change', () => callback())
-        , 20)
+    CSSWatcher.addEventListener('css-change', () => callback())
 }
 
 const CSSWatcher = new EventTarget()

src/updateStates.js

@@ -39,7 +39,7 @@ export default function updateStates(args) {
     const getNthStyle = (key, n) => {
         const returnNthOverwrittenOrCurrent = r =>
             !r ? false :
-                r?.overwritten.length > 1
+                r?.overwritten.length > 0
                     ? r.overwritten[n ?? 0].value
                     : r.current?.value