add simple transitions

Author: drinking-code

README.md

@@ -11,10 +11,10 @@ Here is a very clear demonstration of these smooth corners:
 
 - [Installation](#installation)
 - [Usage](#usage)
-  - [Options](#options)
-    - [`dontConvertShadow`](#dontconvertshadow)
+    - [Options](#options)
+        - [`dontConvertShadow`](#dontconvertshadow)
 - [Things to note & caveats](#things-to-note--caveats)
-  - [webpack](#webpack)
+    - [webpack](#webpack)
 
 ## Installation
 
@@ -60,8 +60,8 @@ your `box-shadow`s, add the `dontConvertShadow` option:
 
 ## Things to note & caveats
 
-This package is still in the starting blocks, so for now borders are only supported in the `solid` style and transitions
-and animations on the div may not work properly.
+This package is still in the starting blocks, so for now borders are only supported in the `solid` style and some
+transitions, and animations on the div may not work properly.
 
 There are a couple of css properties, that you can't reliably set with `RoundDiv`:
 

src/main.js

@@ -22,6 +22,8 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props})
     const [width, setWidth] = useState(0)
     const [radius, setRadius] = useState(Array(4).fill(0))
 
+    const [transition, setTransition] = useState(Array(4).fill(0))
+
     const [borderColor, setBorderColor] = useState(Array(4).fill('transparent'))
     const [borderOpacity, setBorderOpacity] = useState(Array(4).fill(0))
     const [borderWidth, setBorderWidth] = useState(Array(4).fill(0))
@@ -47,7 +49,8 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props})
             setBorderColor,
             setBorderWidth,
             setBorderOpacity,
-            setShadows
+            setShadows,
+            setTransition,
         })
     }
 
@@ -133,6 +136,7 @@ export default function RoundDiv({style, children, dontConvertShadow, ...props})
                     ...(Object.fromEntries(Object.keys(background).map(key => {
                         return [camelise(key === 'null' ? 'background' : ('background-' + key)), background[key]]
                     }))),
+                    transition,
                 }}/>
                 <svg viewBox={`0 0 ${width} ${height}`} style={{
                     ...shapeComponentStyles,

src/styleSheetWatcher.js

@@ -15,10 +15,10 @@ export function detachCSSWatcher(id) {
 }
 
 function watchCSS(callback, element) {
-    let CSS = getCSSText()
+    let CSS = getCSSText(element)
     let style = {...element.style}
     const interval = setInterval(() => {
-        const newCSS = getCSSText()
+        const newCSS = getCSSText(element)
         const newStyle = {...element.style}
         if (CSS === newCSS && areEqualObjects(style, newStyle)) return
         CSS = newCSS
@@ -30,7 +30,7 @@ function watchCSS(callback, element) {
     const forceUpdate = () => {
         clearTimeout(timeout)
         timeout = setTimeout(() => {
-            CSS = getCSSText()
+            CSS = getCSSText(element)
             style = {...element.style}
             callback()
         }, 0)
@@ -46,10 +46,16 @@ function watchCSS(callback, element) {
     }
 }
 
-function getCSSText() {
+function getCSSText(element) {
     let CSS = ''
-    iterateAllCssRules(rule =>
+    iterateAllCssRules(rule => {
+        try {
+            if (!rule.selectorText || !element.matches(rule.selectorText)) return
+        } catch (e) {
+            return
+        }
+        // console.log(rule.selectorText)
         CSS += rule.cssText
-    )
+    })
     return CSS
 }

src/updateStates.js

@@ -70,6 +70,10 @@ export default function updateStates(args) {
                 ))
         )
 
+        states.setTransition(
+            getNthStyle('transition', 0)
+        )
+
         lazySetBackground(
             Object.fromEntries([
                 'attachment',

src/utils/styles-extractor.js

@@ -42,7 +42,8 @@ export default function getAllCssPropertyDeclarationsForElement(targetProperty,
         } catch (e) {
             return
         }
-        rule.cssParsed = css.parse(rule.cssText)?.stylesheet?.rules[0]?.declarations
+        if (!rule.cssParsed)
+            rule.cssParsed = css.parse(rule.cssText)?.stylesheet?.rules[0]?.declarations
         if (!rule.cssParsed) return
         let foundDeclaration = rule.cssParsed.find(dec => dec.property === targetProperty)
         const foundShorthandDeclaration = rule.cssParsed.find(dec => dec.property === targetPropertyShorthand)