@uxf/styles 2.0.1 → 2.1.1

package/README.md

@@ -123,6 +123,25 @@ const example1 = rem(320) /* returns "20rem" */
 const example2 = rem(320, 10) /* returns "32rem" */
 ```
 
+### `emToPx` and `remToPx`
+
+- parse em or rem units to pixels (as number) by specified base (defaults `16`)
+
+```tsx
+import { emToPx } from "@uxf/styles/units/em-to-px";
+
+const example1 = emToPx("20em") /* 320 */
+const example2 = emToPx("20em", 10) /* 200 */
+const example3 = emToPx("20rem", 10) /* "20rem" */
+```
+```tsx
+import { remToPx } from "@uxf/styles/units/rem-to-px";
+
+const example1 = remToPx("20rem") /* 320 */
+const example2 = remToPx("20rem", 10) /* 200 */
+const example3 = remToPx("20%", 10) /* "20%" */
+```
+
 ### `formatCssValue`
 
 - returns normalized css value: pass string as string or input to rem or zero as string or optionally forced input as string

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/styles",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -20,22 +20,22 @@
     "url": "git+https://gitlab.com/uxf-npm/styles.git"
   },
   "devDependencies": {
-    "@types/node": "^18.8.2",
+    "@types/node": "^18.11.18",
     "@types/react": "^17.0.2",
     "@types/react-dom": "^17.0.2",
-    "@uxf/core": "^3.1.0",
+    "@uxf/core": "^4.1.1",
     "@uxf/eslint-config": "^1.2.3",
     "csstype": "^3.1.1",
     "color2k": "^2.0.0",
-    "eslint": "^8.8.0",
-    "parcel": "^2.7.0",
-    "prettier": "^2.7.1",
+    "eslint": "^8.31.0",
+    "parcel": "^2.8.2",
+    "prettier": "^2.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "typescript": "^4.8.4"
+    "typescript": "^4.9.4"
   },
   "peerDependencies": {
-    "@uxf/core": "^3.1.0",
+    "@uxf/core": "^4.1.1",
     "color2k": "^2.0.0",
     "react": "^16 || ^17 || ^18",
     "react-dom": "^16 || ^17 || ^18"

package/types/index.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from "react";
-export declare type CssTimeUnits = "ms" | "s";
-export declare type CssAbsoluteLengthsUnits = "cm" | "mm" | "in" | "px" | "pt" | "pc" | "deg" | "rad";
-export declare type CssRelativeLengthsUnits = "em" | "ex" | "ch" | "rem" | "vw" | "vh" | "vmin" | "vmax" | "%";
-export declare type CssUnits = CssTimeUnits | CssAbsoluteLengthsUnits | CssRelativeLengthsUnits;
-export declare type TransitionProperty = keyof CSSProperties;
-export declare type TransitionProperties = TransitionProperty | TransitionProperty[];
+export type CssTimeUnits = "ms" | "s";
+export type CssAbsoluteLengthsUnits = "cm" | "mm" | "in" | "px" | "pt" | "pc" | "deg" | "rad";
+export type CssRelativeLengthsUnits = "em" | "ex" | "ch" | "rem" | "vw" | "vh" | "vmin" | "vmax" | "%";
+export type CssUnits = CssTimeUnits | CssAbsoluteLengthsUnits | CssRelativeLengthsUnits;
+export type TransitionProperty = keyof CSSProperties;
+export type TransitionProperties = TransitionProperty | TransitionProperty[];

package/units/em-to-px.d.ts

@@ -0,0 +1 @@
+export declare function emToPx(value: string, size?: number): string | number;

package/units/em-to-px.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.emToPx = void 0;
+function emToPx(value, size) {
+    if (size === void 0) { size = 16; }
+    if (/\d*\.?\d+em/.test(value)) {
+        return parseFloat(value) * size;
+    }
+    return value;
+}
+exports.emToPx = emToPx;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZW0tdG8tcHguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvdW5pdHMvZW0tdG8tcHgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7O0FBQUEsU0FBZ0IsTUFBTSxDQUFDLEtBQWEsRUFBRSxJQUFTO0lBQVQscUJBQUEsRUFBQSxTQUFTO0lBQzNDLElBQUksYUFBYSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRTtRQUMzQixPQUFPLFVBQVUsQ0FBQyxLQUFLLENBQUMsR0FBRyxJQUFJLENBQUM7S0FDbkM7SUFDRCxPQUFPLEtBQUssQ0FBQztBQUNqQixDQUFDO0FBTEQsd0JBS0MifQ==

package/units/rem-to-px.d.ts

@@ -0,0 +1 @@
+export declare function remToPx(value: string, size?: number): string | number;

package/units/rem-to-px.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.remToPx = void 0;
+function remToPx(value, size) {
+    if (size === void 0) { size = 16; }
+    if (/\d*\.?\d+rem/.test(value)) {
+        return parseFloat(value) * size;
+    }
+    return value;
+}
+exports.remToPx = remToPx;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVtLXRvLXB4LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3VuaXRzL3JlbS10by1weC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7QUFBQSxTQUFnQixPQUFPLENBQUMsS0FBYSxFQUFFLElBQVM7SUFBVCxxQkFBQSxFQUFBLFNBQVM7SUFDNUMsSUFBSSxjQUFjLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFO1FBQzVCLE9BQU8sVUFBVSxDQUFDLEtBQUssQ0FBQyxHQUFHLElBQUksQ0FBQztLQUNuQztJQUNELE9BQU8sS0FBSyxDQUFDO0FBQ2pCLENBQUM7QUFMRCwwQkFLQyJ9