@css-panda/shared - npm Package Compare versions

Comparing version 0.0.0-dev-20220907182407 to 0.0.0-dev-20220908061242

dist/index.d.ts

@@ -22,2 +22,17 @@ declare function esc(str: string): string;
 
-export { MappedObject, capitalize, esc, filterBaseConditions, toHash, unionType, walkObject, walkStyles };
+declare function getUnit(value?: string): string | undefined;
+declare function toPx(value?: string): string | undefined;
+declare function toEm(value?: string, fontSize?: number): string | undefined;
+declare function toRem(value?: string): string | undefined;
+
+declare type CssVar = {
+    var: `--${string}`;
+    ref: string;
+};
+declare type CssVarOptions = {
+    fallback?: string;
+    prefix?: string;
+};
+declare function cssVar(name: string, options?: CssVarOptions): CssVar;
+
+export { CssVar, CssVarOptions, MappedObject, capitalize, cssVar, esc, filterBaseConditions, getUnit, toEm, toHash, toPx, toRem, unionType, walkObject, walkStyles };

dist/index.js

@@ -24,5 +24,10 @@ "use strict";
   capitalize: () => capitalize,
+  cssVar: () => cssVar,
   esc: () => esc,
   filterBaseConditions: () => filterBaseConditions,
+  getUnit: () => getUnit,
+  toEm: () => toEm,
   toHash: () => toHash,
+  toPx: () => toPx,
+  toRem: () => toRem,
   unionType: () => unionType,
@@ -110,8 +115,81 @@ walkObject: () => walkObject,
 var capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
+
+// src/css-unit.ts
+var BASE_FONT_SIZE = 16;
+var UNIT_PX = "px";
+var UNIT_EM = "em";
+var UNIT_REM = "rem";
+var DIGIT_REGEX = new RegExp(String.raw`-?\d+(?:\.\d+|\d*)`);
+var UNIT_REGEX = new RegExp(`${UNIT_PX}|${UNIT_EM}|${UNIT_REM}`);
+function getUnit(value = "") {
+  const unit = value.match(new RegExp(`${DIGIT_REGEX.source}(${UNIT_REGEX.source})`));
+  return unit == null ? void 0 : unit[1];
+}
+function toPx(value = "") {
+  const unit = getUnit(value);
+  if (!unit)
+    return value;
+  if (unit === UNIT_PX) {
+    return value;
+  }
+  if (unit === UNIT_EM || unit === UNIT_REM) {
+    return `${parseFloat(value) * BASE_FONT_SIZE}${UNIT_PX}`;
+  }
+}
+function toEm(value = "", fontSize = BASE_FONT_SIZE) {
+  const unit = getUnit(value);
+  if (!unit)
+    return value;
+  if (unit === UNIT_EM) {
+    return value;
+  }
+  if (unit === UNIT_PX) {
+    return `${parseFloat(value) / fontSize}${UNIT_EM}`;
+  }
+  if (unit === UNIT_REM) {
+    return `${parseFloat(value) * BASE_FONT_SIZE / fontSize}${UNIT_EM}`;
+  }
+}
+function toRem(value = "") {
+  const unit = getUnit(value);
+  if (!unit)
+    return value;
+  if (unit === UNIT_REM) {
+    return value;
+  }
+  if (unit === UNIT_EM) {
+    return `${parseFloat(value)}${UNIT_REM}`;
+  }
+  if (unit === UNIT_PX) {
+    return `${parseFloat(value) / BASE_FONT_SIZE}${UNIT_REM}`;
+  }
+}
+
+// src/css-var.ts
+function esc2(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function dashCase(string) {
+  return string.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
+function cssVar(name, options = {}) {
+  const { fallback = "", prefix = "" } = options;
+  const variable = dashCase(["-", prefix, esc2(name)].filter(Boolean).join("-"));
+  const result = {
+    var: variable,
+    ref: `var(${variable}${fallback ? `, ${fallback}` : ""})`
+  };
+  return result;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   capitalize,
+  cssVar,
   esc,
   filterBaseConditions,
+  getUnit,
+  toEm,
   toHash,
+  toPx,
+  toRem,
   unionType,
@@ -118,0 +196,0 @@ walkObject,

package.json

 {
   "name": "@css-panda/shared",
-  "version": "0.0.0-dev-20220907182407",
+  "version": "0.0.0-dev-20220908061242",
   "description": "Shared utilities for css panda",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

11593

increased by60.59%

Lines of code

364

increased by78.43%

No dependency changes