added clipping with svg in css module

Author: abusedmedia

src/modules/styles/index.js

@@ -1,3 +1,5 @@
+import u from '../../utils'
+
 const props = ['opacity', 'blend', 'radius', 'border', 'padding', 'background', 'color', 'clip', 'shadow']
 const upper = (s) => s.charAt(0).toUpperCase() + s.slice(1)
 
@@ -10,7 +12,18 @@ const applyRawProps = (el, config) => {
 }
 
 const styles = function (element, mod, config) {
+  if (config.contextType !== 'block') return
   applyRawProps(element, mod)
+
+  if (mod.svgClip) {
+    const svg = u.div(mod.svgClip)
+    const cpath = svg ? svg.querySelector('clipPath') : null
+    const cid = cpath ? cpath.getAttribute('id') : null
+    if (cid) {
+      element.append(svg)
+      element.style.setProperty('--blockClip', `url(#${cid})`)
+    }
+  }
 }
 
 styles.runBefore = true