Added wave-clip virtual property

Author: msarca

dist/assembler.cjs.js

@@ -1,6 +1,6 @@
 {
   "name": "@asmcss/assembler",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "main": "dist/assembler.cjs.js",
   "module": "dist/assembler.es.js",
   "browser": "dist/assembler.js",

dist/assembler.es.js

@@ -172,7 +172,7 @@ export default class StyleHandler {
             value = DEFAULT_VALUES[original] || '';
         }
         if (VALUE_WRAPPER.hasOwnProperty(original)) {
-            value = VALUE_WRAPPER[original](value, original, media, state);
+            value = VALUE_WRAPPER[original](value, original, media, state, this);
         }
         if (!Array.isArray(value)) {
             value = Array(properties.length).fill(value.replace(VAR_REGEX, "var(--$1)"));

dist/assembler.js

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import type StyleHandler from "./StyleHandler";
+
 const positive_number_regex = /^[0-9]+(\.5)?$/;
 const number_regex = /^-?[0-9]+(\.5)?$/;
 const font_size_regex = /^(xs|sm|base|lg|([2-9])?xl)$/;
@@ -24,6 +26,10 @@ const letter_spacing_regex = /^(tighter|tight|normal|wide|wider|widest)$/;
 const radius_regex = /^(xs|sm|md|lg|xl|pill)$/;
 const order_regex = /^(first|last|none)$/;
 
+// do not match comma inside parenthesis
+// 2px, linear-gradient(blue, red), inline => [2px, linear-gradient(blue, red), inline]
+const args_delimiter = /\s*,\s*(?![^(]*\))/gm;
+
 export const PROPERTY_LIST = [
     "align-content",
     "align-items",
@@ -353,6 +359,7 @@ export const ALIASES = {
     "capitalize": "text-transform",
     "normal-case": "text-transform",
     "variant": "font-variant-numeric",
+    "wave-clip": "clip-path",
 };
 export const DEFAULT_VALUES = {
     "border": ["1px solid transparent"],
@@ -383,7 +390,8 @@ export const DEFAULT_VALUES = {
     "capitalize": "capitalize",
     "normal-case": "none",
     "radius": "sm",
-    "shadow": "1"
+    "shadow": "1",
+    "wave-clip": "50, 2, 50"
 }
 
 const unit = v => number_regex.test(v) ? `calc(${v} * @unit-size)` : v;
@@ -415,6 +423,35 @@ const orderCallback = v => {
     return "0";
 }
 
+const waveClipIds = new Set<string>();
+const generateWave = (value: string, original: string, media: string, state: string, handler: StyleHandler) => {
+    const args = value.split(args_delimiter).map(v => v.trim()).map(v => parseInt(v));
+    let [amplitude, frequency, precision] = args;
+
+    amplitude = amplitude ?? 50;
+    frequency = frequency ?? 2;
+    precision = precision ?? 50;
+
+    const id = amplitude + '-' +  frequency + '-' + precision;
+    if (waveClipIds.has(id)) {
+        return '@wave-clip-' + id;
+    }
+
+    waveClipIds.add(id);
+    const units = Math.PI * 2 * frequency;
+    const factor = precision / 100;
+    amplitude /= 2;
+
+    let polygon = 'polygon(100% 0%, 0% 0%';
+    for (let i = 0; i <= precision; i++) {
+        const val = Math.abs((amplitude * Math.cos((i / precision) * units) - amplitude)).toFixed(2);
+        polygon += ', ' + (i / factor) + '% calc(100% - ' + val + 'px)';
+    }
+    polygon += ')';
+    (handler.style.cssRules[0] as CSSStyleRule).style.setProperty('--wave-clip-' + id, polygon);
+    return '@wave-clip-' + id;
+}
+
 export const VALUE_WRAPPER = {
     "img": v => `url(${v})`,
     "gradient": (value) => `linear-gradient(${value})`,
@@ -481,5 +518,6 @@ export const VALUE_WRAPPER = {
     "min-width": positive_unit,
     "max-width": positive_unit,
     "min-height": positive_unit,
-    "max-height": positive_unit
+    "max-height": positive_unit,
+    "wave-clip": generateWave,
 };

dist/assembler.min.js

@@ -1,3 +1,4 @@
+import type StyleHandler from "./StyleHandler";
 export declare const PROPERTY_LIST: string[];
 export declare const PROPERTY_VARIANTS: {
     animation: string[];
@@ -129,6 +130,7 @@ export declare const ALIASES: {
     capitalize: string;
     "normal-case": string;
     variant: string;
+    "wave-clip": string;
 };
 export declare const DEFAULT_VALUES: {
     border: string[];
@@ -160,6 +162,7 @@ export declare const DEFAULT_VALUES: {
     "normal-case": string;
     radius: string;
     shadow: string;
+    "wave-clip": string;
 };
 export declare const VALUE_WRAPPER: {
     img: (v: any) => string;
@@ -228,4 +231,5 @@ export declare const VALUE_WRAPPER: {
     "max-width": (v: any) => any;
     "min-height": (v: any) => any;
     "max-height": (v: any) => any;
+    "wave-clip": (value: string, original: string, media: string, state: string, handler: StyleHandler) => string;
 };