add getting background position

Author: drinking-code

src/css-utils.js

@@ -11,6 +11,10 @@ function _getAttributeFromString(string, method, ...data) {
     }
 }
 
+// eslint-disable-next-line no-extend-native
+String.prototype.matchesValidCSSLength = () =>
+    this.match(/(\d+(\.\d+)?(ch|cm|em|ex|in|mm|pc|pt|px|rem|vh|vmax|vmin|vw)|0)/)
+
 function _getColor(b, i) {
     const val = b[i]
     // color is a hex code
@@ -61,17 +65,50 @@ function _getImageSize(b, i, element) {
         return [val, null]
     }
 
+    return __getTwoNumerics(b, i, element, htmlBackgroundSizeNotSvgError)
+}
+
+function _getPosition(b, i, element) {
+    // "val" is always what is defined in backgrund-size ([i]th argument)
+    const val = b[i]
+    const allWords = ['top', 'bottom', 'left', 'right', 'center']
+
+    if (b.length === 1 && allWords.includes(val)) {
+        if (val === 'center')
+            return ['center', 'center']
+        else if (['left', 'right'].includes(val))
+            return [val, 0]
+        else if (['top', 'bottom'].includes(val))
+            return [0, val]
+    }
+
+    const a = [0, 0]
+
+    if (allWords.includes(val)) {
+        if (b[i + 1].matchesValidCSSLength()) {
+
+        }
+    }
+
+    /*if (['cover', 'contain'].includes(val)) {
+        return [val, null]
+    }*/
+
+    return __getTwoNumerics(b, i, element, htmlBackgroundPositionNotSvgError)
+}
+
+function __getTwoNumerics(b, i, element, err) {
     const returnIfCSSNumeric = (val, throwErr) => {
         if (val?.endsWith('%'))
             return val
-        else if (val?.match(/(\d+(\.\d+)?(ch|cm|em|ex|in|mm|pc|pt|px|rem|vh|vmax|vmin|vw)|0)/)) {
-            unitCheck(val, throwErr ? htmlBackgroundSizeNotSvgError : undefined)
+        else if (val?.matchesValidCSSLength()) {
+            unitCheck(val, throwErr ? err : undefined)
             return toPx(element, val)
         } else
             return null
     }
 
-    const convertedVal = returnIfCSSNumeric(val, true) // has null as fallback already
+    const convertedVal = returnIfCSSNumeric(b[i], true) // has null as fallback already
     // "background-size: 50% 50%" is different to "background-size: 50%"
     return [convertedVal, returnIfCSSNumeric(b[i + 1])]
 }
@@ -108,6 +145,8 @@ const htmlBorderLengthNotSvgError =
     new Error(htmlLengthNotSvgErrorTemplate('border lengths', '"thin", "medium", "thick"'))
 const htmlBackgroundSizeNotSvgError =
     new Error(htmlLengthNotSvgErrorTemplate('background size', '"cover", "contain"'))
+const htmlBackgroundPositionNotSvgError =
+    new Error(htmlLengthNotSvgErrorTemplate('background position', '"top", "bottom", "left", "right", "center"'))
 
 function unitCheck(length, err) {
     if (length?.match(/(cap|ic|lh|rlh|vi|vm|vb|Q|mozmm)/g))
@@ -126,7 +165,7 @@ function _getWidth(border, i, element) {
     if (val.toLowerCase() === 'thick') return 5
     unitCheck(val, htmlBorderLengthNotSvgError)
     // width is <length>
-    if (val.match(/(\d+(\.\d+)?(ch|cm|em|ex|in|mm|pc|pt|px|rem|vh|vmax|vmin|vw)|0)/))
+    if (val.matchesValidCSSLength())
         return toPx(element, val)
     return false
 }
@@ -137,11 +176,13 @@ const getWidth = (s, el) => _getAttributeFromString(s, _getWidth, el),
     getImage = s => _getAttributeFromString(s, _getImage),
     /** @returns {Array<string|number>} */
     getImageSize = (s, el) => _getAttributeFromString(s, _getImageSize, el),
+    /** @returns {Array<string|number>} */
+    getPosition = (s, el) => _getAttributeFromString(s, _getPosition, el),
     /** @returns {string} */
     getColor = s => _getAttributeFromString(s, _getColor),
     /** @returns {Array<string>} */
     getRepeat = s => _getAttributeFromString(s, _getRepeat),
     /** @returns {number} */
     getOpacity = s => _getAttributeFromString(s, _getOpacity)
 
-export {getWidth, getImage, getImageSize, getColor, getRepeat, getOpacity}
+export {getWidth, getImage, getImageSize, getPosition, getColor, getRepeat, getOpacity}

src/main.js

@@ -15,6 +15,7 @@ export default function RoundDiv({clip, style, children, ...props}) {
     const [backgroundImage, setBackgroundImage] = useState('none')
     // todo: background size two values (from css)
     const [backgroundImageSize, setBackgroundImageSize] = useState([null, null])
+    const [backgroundPosition, setBackgroundPosition] = useState([0, 0])
     const [backgroundOpacity, setBackgroundOpacity] = useState(0)
     const [backgroundRepeat, setBackgroundRepeat] = useState(['repeat', 'repeat'])
 
@@ -39,6 +40,7 @@ export default function RoundDiv({clip, style, children, ...props}) {
         setBackground,
         setBackgroundImage,
         setBackgroundImageSize,
+        setBackgroundPosition,
         setBackgroundOpacity,
         setBackgroundRepeat,
         setBorderColor,

src/updateStates.js

@@ -1,4 +1,4 @@
-import {getColor, getImage, getImageSize, getOpacity, getRepeat, getWidth} from "./css-utils";
+import {getColor, getImage, getImageSize, getPosition, getOpacity, getRepeat, getWidth} from "./css-utils";
 import getStyle from "./styles-extractor";
 
 export default function updateStates(args) {
@@ -55,6 +55,9 @@ export default function updateStates(args) {
         states.setBackgroundImageSize(getImageSize(
             getNthStyleAttr('background-size', 1)
         ) || [null, null])
+        states.setBackgroundImageSize(getPosition(
+            getNthStyleAttr('background-size', 1)
+        ) || [null, null])
         states.setBackgroundOpacity(getOpacity(
             getNthStyleAttrOrAlt('background', 'background-color', 1)
         ) || 1)