improve rendering correct dimensions

src/main.js

@@ -33,10 +33,12 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props})
  const [innerPath, setInnerPath] = useState('Z')
 
  const div = useRef()
+ const slotWrapper = useRef()
 
  const updateStatesWithArgs = () => {
  updateStates({
  div,
+ slotWrapper,
  style,
  setBoxSizing,
  setOverflow,
@@ -108,11 +110,10 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props})
  const pathIsEmpty = path.startsWith('Z') || path === ''
  const divStyle = {
  ...style,
- ...(pathIsEmpty ? {
- borderImage: 'none',
- } : {
+ borderImage: 'none',
+ ...(pathIsEmpty ? {} : {
  ...invisibleBorderStyles,
- borderImage: 'none',
+ padding: '0',
  background: 'transparent',
  boxShadow: dontConvertShadow
  // "box-shadow" must be overridden for the style extraction to work (with nth: 1, and not nth: 0)
@@ -125,13 +126,12 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props})
  }
 
  const shapeComponentStyles = {
- height: boxSizing === 'border-box' ? height : height - (border.width[0] + padding[0] + border.width[2] + padding[2]),
- width: boxSizing === 'border-box' ? width : width - (border.width[1] + padding[1] + border.width[3] + padding[3]),
- padding: padding.map(n => n + 'px').join(' '),
+ height: boxSizing === 'border-box' ? height : height - (border.width[0] + border.width[2]),
+ width: boxSizing === 'border-box' ? width : width - (border.width[1] + border.width[3]),
  position: 'fixed',
  left: 0,
  top: 0,
- transform: `translate(-${padding[3] + border.width[3]}px, -${padding[0] + border.width[0]}px)`,
+ transform: `translate(-${border.width[3]}px, -${border.width[0]}px)`,
  zIndex: -1,
  }
 
@@ -142,9 +142,7 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props})
 
  return <div {...props} style={divStyle} ref={div}>
  {pathIsEmpty ? null : <ShadowRoot>
- <div style={{
- transform: 'scale(1)'
- }}>
+ <div style={{transform: 'scale(1)'}}>
  <div style={{
  ...shapeComponentStyles,
  ...invisibleBorderStyles,
@@ -165,7 +163,7 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props})
  <div style={{
  height: height - (widenedBorderWidth[0] + widenedBorderWidth[2]),
  width: width - (widenedBorderWidth[1] + widenedBorderWidth[3]),
- transform: `translate(-${padding[3] + border.width[3]}px, -${padding[0] + border.width[0]}px)`,
+ transform: `translate(-${border.width[3]}px, -${border.width[0]}px)`,
  clipPath: `path("M0,0V${height}H${width}V0Z${innerPath}")`,
  borderRadius: radius.map(n => (n * .95) + 'px').join(' '),
  borderColor: border.color,
@@ -181,13 +179,14 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props})
  }}/>
  </div>
  <div style={{
- height: height - (border.width[0] + border.width[2]) * 2,
- width: width - (border.width[1] + border.width[3]) * 2,
+ display: 'inline-flex',
  ...invisibleBorderStyles,
- transform: `translate(-${padding[3] + border.width[3]}px, -${padding[0] + border.width[0]}px)`,
+ padding: padding.map(n => n + 'px').join(' '),
  clipPath: overflow === 'hidden' ? `path("${innerPath}")` : null,
- }}>
- <slot style={{overflow: 'visible'}}/>
+ transform: `translate(-${border.width[3]}px, -${border.width[0]}px)`,
+ boxSizing: 'border-box',
+ }} ref={slotWrapper}>
+ <slot/>
  </div>
  </div>
  </ShadowRoot>}

src/updateStates.js

@@ -8,7 +8,7 @@ import ReactDOM from 'react-dom'
 import {lazySetArrayState, lazySetObjectsState} from './utils/react-utils'
 
 export default function updateStates(args) {
- const {div} = args
+ const {div, slotWrapper} = args
  if (!div.current) return
 
  const getNthStyle = (key, n, shorthand) => {
@@ -31,7 +31,7 @@ export default function updateStates(args) {
  ReactDOM.unstable_batchedUpdates(() => {
  states.setPadding(
  ['top', 'right', 'bottom', 'left']
- .map(s => getNthStyle('padding-' + s, 0, 'padding'))
+ .map(s => getNthStyle('padding-' + s, oneIfStylesAreOverridden, 'padding'))
  .map(n => toNumber(n, div.current) || 0)
  )
 
@@ -82,8 +82,8 @@ export default function updateStates(args) {
  border.width = border.width ?? Array(4).fill(0)
  lazySetBorder(border)
 
- const height = div.current?.clientHeight + border.width[0] + border.width[2],
- width = div.current?.clientWidth + border.width[1] + border.width[3]
+ const height = ((slotWrapper.current ?? div.current).clientHeight || 0) + border.width[0] + border.width[2],
+ width = ((slotWrapper.current ?? div.current).clientWidth || 0) + border.width[1] + border.width[3]
  states.setHeight(height)
  states.setWidth(width)
 
@@ -104,7 +104,7 @@ export default function updateStates(args) {
  'source',
  'width',
  ].map(key =>
- [key, getNthStyle('border-image-' + key, oneIfStylesAreOverridden, 'border-image')]
+ [key, getNthStyle('border-image-' + key, 1, 'border-image')]
  ))
  )