Merge pull request #1 from drinking-code/clip-path

Use clip path

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.

package-lock.json

@@ -1,188 +1,63 @@
-import CSS_COLOR_NAMES from "./html-colors";
-import toPx from "./css-length-converter";
+import CSS_COLOR_NAMES from "./external/bobspace:html-colors";
+import toPx from "./external/heygrady:units:length";
 
-function _getAttributeFromString(string, method, ...data) {
-    if (!string) return false
-    string = string.split(' ')
-    for (let i in string) {
-        if (!string.hasOwnProperty(i)) continue
-        const res = method(string, Number(i), ...data)
-        if (res) return res
-    }
-}
-
-// 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]
+/** @returns {string} */
+function convertPlainColor(val) {
+    if (!val) return '#000'
+    val = val?.toLowerCase()
     // color is a hex code
-    if (val.toLowerCase().match(/#([0-9a-f]{3}){1,2}/)) return val
+    if (val?.match(/#([0-9a-f]{3}){1,2}/)) return val
     // color is a function (rgb, rgba, hsl, hsla)
-    if (val.startsWith('rgb') || val.startsWith('hsl')) {
-        let color = val;
-        if (!val.endsWith(')'))
-            for (let j = 1; !b[i + j - 1].endsWith(')'); j++) {
-                color += b[i + j]
-            }
-        if (color[3] === 'a')
-            color = color.replace('a', '').replace(/,[^),]+\)/, ')')
-        return color
-    }
+    else if (val?.match(/^(rgb|hsl)a?\(([^,]{1,3},? *){3}(\d*\.?\d+)?\)/))
+        return val
+            .replace('a', '')
+            .replace(/\((([\d%]{1,3}, *){2}([\d%]{1,3}))(, *\d*\.?\d+)?\)/, '($1)')
     // color is a html color name
-    if (CSS_COLOR_NAMES.map(color => color.toLowerCase())
+    else if (CSS_COLOR_NAMES.map(color => color.toLowerCase())
         .includes(val.toLowerCase()))
         return val
-    if (val === 'currentcolor') {
+    else if (val === 'currentcolor') {
         return 'currentcolor'
-    }
-    return false
-}
-
-function _getImage(b, i) {
-    const val = b[i]
-
-    if (val.startsWith('url')) {
-        let url = val;
-        for (let j = 1; b[i + j]; j++) {
-            url += b[i + j]
-        }
-        url = /url\(("[^"]+"|'[^']+'|[^)]+)\)/g.exec(url)
-        url = url ? url[1] : false
-        url = url?.startsWith('"') || url?.startsWith("'")
-            ? url.substr(1, url.length - 2)
-            : url
-        return url
-    }
-}
-
-function _getImageSize(b, i, element) {
-    // "val" is always what is defined in backgrund-size ([i]th argument)
-    const val = b[i]
-
-    if (['cover', 'contain'].includes(val)) {
-        return [val, null]
-    }
-
-    return __getTwoNumerics(b, i, element, htmlBackgroundSizeNotSvgError)
+    } else return '#000'
 }
 
-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?.matchesValidCSSLength()) {
-            unitCheck(val, throwErr ? err : undefined)
-            return toPx(element, val)
-        } else
-            return null
-    }
-
-    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])]
-}
-
-function _getOpacity(b, i) {
-    let val = b[i]
-    if (val.startsWith('rgba') || val.startsWith('hsla')) {
-        if (!val.endsWith(')'))
-            for (let j = 1; !b[i + j - 1].endsWith(')'); j++) {
-                val += b[i + j]
-            }
-        return val.replace(/(rgb|hsl)a?\(([^,)]+,){3}/, '').replace(/\)$/, '')
-    }
-    if (b.length - 1 === i)
-        return 1
-}
-
-function _getRepeat(b, i) {
-    let val = b[i]
-    if (val === 'repeat-x')
-        return ['repeat', 'no-repeat']
-    else if (val === 'repeat-y')
-        return ['no-repeat', 'repeat']
-    else if (['repeat', 'space', 'round', 'no-repeat'].includes(val)) {
-        if (['repeat', 'space', 'round', 'no-repeat'].includes(b[i + 1] || ''))
-            return [val, b[i + 1]]
-        else
-            return [val, val]
-    }
+/** @returns {number} */
+function convertColorOpacity(val) {
+    if (val?.startsWith('rgba') || val?.startsWith('hsla')) {
+        return Number(val.match(/(\d*\.?\d+)?\)$/)[1])
+    } else return 1
 }
 
 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.`
 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))
+const htmlBorderRadiusNotSvgError =
+    new Error(htmlLengthNotSvgErrorTemplate('border radii'))
+
+function toNumber(length, element, err) {
+    if (!length) return false
+    if (typeof length === 'number' || !length.match(/\D+/))
+        return Number(length);
+    else if (length?.match(/(cap|ic|lh|rlh|vi|vm|vb|Q|mozmm)/g))
         if (err) throw err
         else return false
-    return length
+    else if (length?.match(/(\d+(\.\d+)?(ch|cm|em|ex|in|mm|pc|pt|px|rem|vh|vmax|vmin|vw)|0)/))
+        return toPx(element, length)
 }
 
-function _getWidth(border, i, element) {
-    const val = border[i]
-    // width is 0
-    if (val === '0') return 0
+/** @returns {number} */
+function convertBorderWidth(val, element) {
+    if (!val) return 0
     // width is a word
-    if (val.toLowerCase() === 'thin') return 1
-    if (val.toLowerCase() === 'medium') return 3
-    if (val.toLowerCase() === 'thick') return 5
-    unitCheck(val, htmlBorderLengthNotSvgError)
+    if (val?.toLowerCase() === 'thin')
+        return 1
+    else if (val?.toLowerCase() === 'medium')
+        return 3
+    else if (val?.toLowerCase() === 'thick')
+        return 5
     // width is <length>
-    if (val.matchesValidCSSLength())
-        return toPx(element, val)
-    return false
+    else
+        return toNumber(val, element, htmlBorderLengthNotSvgError) || 0
 }
 
-/** @returns {number} */
-const getWidth = (s, el) => _getAttributeFromString(s, _getWidth, el),
-    /** @returns {string} */
-    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, getPosition, getColor, getRepeat, getOpacity}
+export {convertPlainColor, convertColorOpacity, convertBorderWidth, toNumber, htmlBorderRadiusNotSvgError}