css-transform-builder - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

dist/index.d.ts

 type TupleOfNumbers<Num extends number, Acc extends number[] = []> = Acc["length"] extends Num ? Acc : TupleOfNumbers<Num, [...Acc, number]> | (Acc["length"] extends 0 ? never : Acc);
-type TranslateUnit = "px" | "em" | "rem" | "vw" | "vh" | "%" | "svh" | "svw" | "lvh" | "lvw" | "vmax" | "vmin" | "lh" | "rlh" | "in" | "pt";
-type RotateUnit = "deg" | "rad" | "grad" | "turn";
+type PrimitiveTranslateUnit = "px" | "em" | "rem" | "vw" | "vh" | "%" | "svh" | "svw" | "lvh" | "lvw" | "vmax" | "vmin" | "lh" | "rlh" | "in" | "pt";
+type PrimitiveRotateUnit = "deg" | "rad" | "grad" | "turn";
+type PrimitiveUnit = PrimitiveTranslateUnit | PrimitiveRotateUnit;
+type NumWithUnit<T extends PrimitiveUnit = PrimitiveUnit> = `${number}${T}`;
+export type CustomUnit<T extends PrimitiveUnit = PrimitiveUnit> = (num: number) => NumWithUnit<T>;
+type CssTransformProps<T extends PrimitiveUnit> = number | NumWithUnit<T>;
+type Operator = "+" | "-" | "*" | "/";
+type CalcArray<T extends PrimitiveUnit = PrimitiveUnit> = [
+    CssTransformProps<T> | CalcArray<T>,
+    Operator,
+    CssTransformProps<T> | CalcArray<T>
+];
+type CommonProps<T extends PrimitiveUnit = PrimitiveUnit> = CssTransformProps<T> | CalcArray<T>;
+type TupleOfNumberHasUnit<Num extends number, Unit extends PrimitiveUnit, Acc extends CommonProps<Unit>[] = []> = Acc["length"] extends Num ? [...Acc, (Unit | CustomUnit<Unit>)?] : TupleOfNumberHasUnit<Num, Unit, [...Acc, CommonProps<Unit>]>;
+type PropsHasUnitFn<Num extends number, Unit extends PrimitiveUnit> = (...props: TupleOfNumberHasUnit<Num, Unit>) => CSSTransformBuilder;
 export default class CSSTransformBuilder {
@@ -14,15 +27,15 @@ private readonly queue;
     scale3d(x: number, y: number, z: number): CSSTransformBuilder;
-    translate(x: number, y: number, unit?: TranslateUnit): CSSTransformBuilder;
-    translateX(x: number, unit?: TranslateUnit): CSSTransformBuilder;
-    translateY(y: number, unit?: TranslateUnit): CSSTransformBuilder;
-    translateZ(z: number, unit?: TranslateUnit): CSSTransformBuilder;
-    translate3d(x: number, y: number, z: number, unit?: TranslateUnit): CSSTransformBuilder;
-    rotate(num: number, unit?: RotateUnit): CSSTransformBuilder;
-    rotate3d(x: number, y: number, z: number, deg: number, unit?: RotateUnit): CSSTransformBuilder;
-    rotateX(num: number, unit?: RotateUnit): CSSTransformBuilder;
-    rotateY(num: number, unit?: RotateUnit): CSSTransformBuilder;
-    rotateZ(num: number, unit?: RotateUnit): CSSTransformBuilder;
-    skew(x: number, y: number, unit?: RotateUnit): CSSTransformBuilder;
-    skewX(num: number, unit?: RotateUnit): CSSTransformBuilder;
-    skewY(num: number, unit?: RotateUnit): CSSTransformBuilder;
+    translate: PropsHasUnitFn<2, PrimitiveTranslateUnit>;
+    translateX: PropsHasUnitFn<1, PrimitiveTranslateUnit>;
+    translateY: PropsHasUnitFn<1, PrimitiveTranslateUnit>;
+    translateZ: PropsHasUnitFn<1, PrimitiveTranslateUnit>;
+    translate3d: PropsHasUnitFn<3, PrimitiveTranslateUnit>;
+    rotate: PropsHasUnitFn<1, PrimitiveRotateUnit>;
+    rotate3d: PropsHasUnitFn<4, PrimitiveRotateUnit>;
+    rotateX: PropsHasUnitFn<1, PrimitiveRotateUnit>;
+    rotateY: PropsHasUnitFn<1, PrimitiveRotateUnit>;
+    rotateZ: PropsHasUnitFn<1, PrimitiveRotateUnit>;
+    skew: PropsHasUnitFn<2, PrimitiveRotateUnit>;
+    skewX: PropsHasUnitFn<1, PrimitiveRotateUnit>;
+    skewY: PropsHasUnitFn<1, PrimitiveRotateUnit>;
     perspective(num: number): CSSTransformBuilder;
@@ -29,0 +42,0 @@ toString(): string;

dist/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildTransform = void 0;
+const calcSolver = (calc) => {
+    const calcArraySolver = (calc) => calc
+        .map((c) => (Array.isArray(c) ? `(${calcArraySolver(c)})` : c))
+        .join(" ");
+    return `calc(${calcArraySolver(calc)})`;
+};
 class CSSTransformBuilder {
     constructor(queue = []) {
+        this.translate = (x, y, unit = "px") => this.addOperationNumbers("translate", [x, y], unit);
+        this.translateX = (x, unit = "px") => this.addOperationNumbers("translateX", [x], unit);
+        this.translateY = (y, unit = "px") => this.addOperationNumbers("translateY", [y], unit);
+        this.translateZ = (z, unit = "px") => this.addOperationNumbers("translateZ", [z], unit);
+        this.translate3d = (x, y, z, unit = "px") => this.addOperationNumbers("translate3d", [x, y, z], unit);
+        this.rotate = (num, unit = "deg") => this.addOperationNumbers("rotate", [num], unit);
+        this.rotate3d = (x, y, z, deg, unit = "deg") => this.addOperation("rotate3d", [x, y, z, `${deg}${unit}`].join(","));
+        this.rotateX = (num, unit = "deg") => this.addOperationNumbers("rotateX", [num], unit);
+        this.rotateY = (num, unit = "deg") => this.addOperationNumbers("rotateY", [num], unit);
+        this.rotateZ = (num, unit = "deg") => this.addOperationNumbers("rotateZ", [num], unit);
+        this.skew = (x, y, unit = "deg") => this.addOperationNumbers("skew", [x, y], unit);
+        this.skewX = (num, unit = "deg") => this.addOperationNumbers("skewX", [num], unit);
+        this.skewY = (num, unit = "deg") => this.addOperationNumbers("skewY", [num], unit);
         this.queue = queue;
@@ -12,3 +31,11 @@ }
     addOperationNumbers(fn, nums, unit = "") {
-        return this.addOperation(fn, nums.map((n) => `${n}${unit}`).join(","));
+        return this.addOperation(fn, nums
+            .map((n) => typeof n === "string"
+            ? n
+            : Array.isArray(n)
+                ? calcSolver(n)
+                : typeof unit === "string"
+                    ? `${n}${unit}`
+                    : unit(n))
+            .join(","));
     }
@@ -32,41 +59,2 @@ // matrix(数値, 数値, 数値, 数値, 数値, 数値)
     }
-    translate(x, y, unit = "px") {
-        return this.addOperationNumbers("translate", [x, y], unit);
-    }
-    translateX(x, unit = "px") {
-        return this.addOperationNumbers("translateX", [x], unit);
-    }
-    translateY(y, unit = "px") {
-        return this.addOperationNumbers("translateY", [y], unit);
-    }
-    translateZ(z, unit = "px") {
-        return this.addOperationNumbers("translateZ", [z], unit);
-    }
-    translate3d(x, y, z, unit = "px") {
-        return this.addOperationNumbers("translate3d", [x, y, z], unit);
-    }
-    rotate(num, unit = "deg") {
-        return this.addOperationNumbers("rotate", [num], unit);
-    }
-    rotate3d(x, y, z, deg, unit = "deg") {
-        return this.addOperation("rotate3d", [x, y, z, `${deg}${unit}`].join(","));
-    }
-    rotateX(num, unit = "deg") {
-        return this.addOperationNumbers("rotateX", [num], unit);
-    }
-    rotateY(num, unit = "deg") {
-        return this.addOperationNumbers("rotateY", [num], unit);
-    }
-    rotateZ(num, unit = "deg") {
-        return this.addOperationNumbers("rotateZ", [num], unit);
-    }
-    skew(x, y, unit = "deg") {
-        return this.addOperationNumbers("skew", [x, y], unit);
-    }
-    skewX(num, unit = "deg") {
-        return this.addOperationNumbers("skewX", [num], unit);
-    }
-    skewY(num, unit = "deg") {
-        return this.addOperationNumbers("skewY", [num], unit);
-    }
     perspective(num) {
@@ -73,0 +61,0 @@ return this.addOperationNumbers("perspective", [num]);

package.json

 {
   "name": "css-transform-builder",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "make css transform format string.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -1,3 +0,2 @@
-css-transform-builder
-----
+# css-transform-builder
 
@@ -22,2 +21,15 @@ [![master-build](https://github.com/fnobi/css-transform-builder/actions/workflows/masterBuild.yml/badge.svg?branch=master)](https://github.com/fnobi/css-transform-builder/actions/workflows/masterBuild.yml)
 // => "rotate(20deg) translateY(10%)"
+
+const customFunc: CustomUnit<"vw"> = (n) => `${n * 2}vw`;
+const transform4 = new CSSTransformBuilder().translate(10, 10, customFunc);
+console.log(transform4.toString());
+// => "translate(20vw,20vw)"
+
+const transform5 = new CSSTransformBuilder().translateY("10%");
+console.log(transform5.toString());
+// => "translateY(10%)"
+
+const transform6 = new CSSTransformBuilder().translateX([["20px", "+", "10px"], "+", ["20px", "+", "10px"]]);
+console.log(transform6.toString());
+// => "translateX(calc((20px + 10px) + (20px + 10px)))"
 ```
@@ -36,5 +48,14 @@
 
-const transform3 = new CSSTransformBuilder();
 console.log(buildTransform(t => t.rotate(20).translateY(10, "%")));
 // => "rotate(20deg) translateY(10%)"
-```
+
+const customFunc: CustomUnit<"px"> = (n) => `${n * 2}px`;
+console.log(buildTransform(t => t.translate(10, 10, customFunc)));
+// => "translate(20px,20px)"
+
+console.log(buildTransform(t => t.translateY("10%")));
+// => "translateY(10%)"
+
+console.log(buildTransform(t => t.translateX([["20px", "+", "10px"], "+", ["20px", "+", "10px"]])));
+// => "translateX(calc((20px + 10px) + (20px + 10px)))"
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

17500

increased by17.44%

Lines of code

176

increased by0.57%

Number of lines in readme file

60

increased by57.89%

No dependency changes