css-in-props 2.25.3 → 2.27.8

package/dist/cjs/index.js

@@ -17,16 +17,16 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   exetuteClassPerComponent: () => exetuteClassPerComponent
 });
-module.exports = __toCommonJS(src_exports);
-__reExport(src_exports, require("./transform"), module.exports);
-__reExport(src_exports, require("./set"), module.exports);
-__reExport(src_exports, require("./emotion"), module.exports);
-__reExport(src_exports, require("./registry"), module.exports);
-__reExport(src_exports, require("./defaults"), module.exports);
+module.exports = __toCommonJS(index_exports);
+__reExport(index_exports, require("./transform"), module.exports);
+__reExport(index_exports, require("./set"), module.exports);
+__reExport(index_exports, require("./emotion"), module.exports);
+__reExport(index_exports, require("./registry"), module.exports);
+__reExport(index_exports, require("./defaults"), module.exports);
 const exetuteClassPerComponent = (component, element) => {
   const classObj = {};
   if (component.class) {

package/dist/cjs/props/animation.js

@@ -27,8 +27,7 @@ var import_scratch = require("@symbo.ls/scratch");
 const applyAnimationProps = (animation, element) => {
   const { emotion: ctxEmotion } = element.context;
   const { keyframes } = ctxEmotion || import_emotion.emotion;
-  if ((0, import_utils.isObject)(animation))
-    return { animationName: keyframes(animation) };
+  if ((0, import_utils.isObject)(animation)) return { animationName: keyframes(animation) };
   const { ANIMATION } = element.context && element.context.designSystem;
   const record = ANIMATION[animation];
   return keyframes(record);

package/dist/cjs/props/block.js

@@ -34,8 +34,7 @@ const BLOCK_PROPS = {
   width: ({ props }) => (0, import_scratch.transformSizeRatio)("width", props),
   boxSizing: ({ props }) => !(0, import_utils.isUndefined)(props.boxSizing) ? { boxSizing: props.boxSizing } : { boxSizing: "border-box" },
   boxSize: ({ props }) => {
-    if (!(0, import_utils.isString)(props.boxSize))
-      return;
+    if (!(0, import_utils.isString)(props.boxSize)) return;
     const [height, width] = props.boxSize.split(" ");
     return {
       ...(0, import_scratch.transformSize)("height", height),
@@ -47,8 +46,7 @@ const BLOCK_PROPS = {
   minWidth: ({ props }) => (0, import_scratch.transformSizeRatio)("minWidth", props),
   maxWidth: ({ props }) => (0, import_scratch.transformSizeRatio)("maxWidth", props),
   widthRange: ({ props }) => {
-    if (!(0, import_utils.isString)(props.widthRange))
-      return;
+    if (!(0, import_utils.isString)(props.widthRange)) return;
     const [minWidth, maxWidth] = props.widthRange.split(" ");
     return {
       ...(0, import_scratch.transformSize)("minWidth", minWidth),
@@ -58,8 +56,7 @@ const BLOCK_PROPS = {
   minHeight: ({ props }) => (0, import_scratch.transformSizeRatio)("minHeight", props),
   maxHeight: ({ props }) => (0, import_scratch.transformSizeRatio)("maxHeight", props),
   heightRange: ({ props }) => {
-    if (!(0, import_utils.isString)(props.heightRange))
-      return;
+    if (!(0, import_utils.isString)(props.heightRange)) return;
     const [minHeight, maxHeight] = props.heightRange.split(" ");
     return {
       ...(0, import_scratch.transformSize)("minHeight", minHeight),
@@ -67,8 +64,7 @@ const BLOCK_PROPS = {
     };
   },
   size: ({ props }) => {
-    if (!(0, import_utils.isString)(props.size))
-      return;
+    if (!(0, import_utils.isString)(props.size)) return;
     const [inlineSize, blockSize] = props.size.split(" ");
     return {
       ...(0, import_scratch.transformSizeRatio)("inlineSize", inlineSize),
@@ -80,8 +76,7 @@ const BLOCK_PROPS = {
   maxBlockSize: ({ props }) => (0, import_scratch.transformSizeRatio)("maxBlockSize", props),
   maxInlineSize: ({ props }) => (0, import_scratch.transformSizeRatio)("maxInlineSize", props),
   minSize: ({ props }) => {
-    if (!(0, import_utils.isString)(props.minSize))
-      return;
+    if (!(0, import_utils.isString)(props.minSize)) return;
     const [minInlineSize, minBlockSize] = props.minSize.split(" ");
     return {
       ...(0, import_scratch.transformSize)("minInlineSize", minInlineSize),
@@ -89,8 +84,7 @@ const BLOCK_PROPS = {
     };
   },
   maxSize: ({ props }) => {
-    if (!(0, import_utils.isString)(props.maxSize))
-      return;
+    if (!(0, import_utils.isString)(props.maxSize)) return;
     const [maxInlineSize, maxBlockSize] = props.maxSize.split(" ");
     return {
       ...(0, import_scratch.transformSize)("maxInlineSize", maxInlineSize),
@@ -101,8 +95,7 @@ const BLOCK_PROPS = {
   padding: ({ props }) => (0, import_scratch.transformSizeRatio)("padding", props),
   scrollPadding: ({ props }) => (0, import_scratch.transformSizeRatio)("scrollPadding", props),
   paddingInline: ({ props }) => {
-    if (!(0, import_utils.isString)(props.paddingInline))
-      return;
+    if (!(0, import_utils.isString)(props.paddingInline)) return;
     const [paddingInlineStart, paddingInlineEnd] = props.paddingInline.split(" ");
     return {
       ...(0, import_scratch.transformSize)("paddingInlineStart", paddingInlineStart),
@@ -110,8 +103,7 @@ const BLOCK_PROPS = {
     };
   },
   paddingBlock: ({ props }) => {
-    if (!(0, import_utils.isString)(props.paddingBlock))
-      return;
+    if (!(0, import_utils.isString)(props.paddingBlock)) return;
     const [paddingBlockStart, paddingBlockEnd] = props.paddingBlock.split(" ");
     return {
       ...(0, import_scratch.transformSize)("paddingBlockStart", paddingBlockStart),
@@ -124,8 +116,7 @@ const BLOCK_PROPS = {
   paddingBlockEnd: ({ props }) => (0, import_scratch.transformSizeRatio)("paddingBlockEnd", props),
   margin: ({ props }) => (0, import_scratch.transformSizeRatio)("margin", props),
   marginInline: ({ props }) => {
-    if (!(0, import_utils.isString)(props.marginInline))
-      return;
+    if (!(0, import_utils.isString)(props.marginInline)) return;
     const [marginInlineStart, marginInlineEnd] = props.marginInline.split(" ");
     return {
       ...(0, import_scratch.transformSize)("marginInlineStart", marginInlineStart),
@@ -133,8 +124,7 @@ const BLOCK_PROPS = {
     };
   },
   marginBlock: ({ props }) => {
-    if (!(0, import_utils.isString)(props.marginBlock))
-      return;
+    if (!(0, import_utils.isString)(props.marginBlock)) return;
     const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(" ");
     return {
       ...(0, import_scratch.transformSize)("marginBlockStart", marginBlockStart),
@@ -156,21 +146,17 @@ const BLOCK_PROPS = {
   }),
   flexFlow: ({ props }) => {
     const { flexFlow, reverse } = props;
-    if (!(0, import_utils.isString)(flexFlow))
-      return;
+    if (!(0, import_utils.isString)(flexFlow)) return;
     let [direction, wrap] = (flexFlow || "row").split(" ");
-    if (flexFlow.startsWith("x") || flexFlow === "row")
-      direction = "row";
-    if (flexFlow.startsWith("y") || flexFlow === "column")
-      direction = "column";
+    if (flexFlow.startsWith("x") || flexFlow === "row") direction = "row";
+    if (flexFlow.startsWith("y") || flexFlow === "column") direction = "column";
     return {
       display: "flex",
       flexFlow: (direction || "") + (!direction.includes("-reverse") && reverse ? "-reverse" : "") + " " + (wrap || "")
     };
   },
   flexAlign: ({ props }) => {
-    if (!(0, import_utils.isString)(props.flexAlign))
-      return;
+    if (!(0, import_utils.isString)(props.flexAlign)) return;
     const [alignItems, justifyContent] = props.flexAlign.split(" ");
     return {
       display: "flex",

package/dist/cjs/props/misc.js

@@ -28,11 +28,9 @@ const MISC_PROPS = {
   },
   cursor: (el, s, ctx) => {
     let val = el.props.cursor;
-    if (!val)
-      return;
+    if (!val) return;
     const file = ctx.files && ctx.files[val];
-    if (file && file.content)
-      val = `url(${file.content.src})`;
+    if (file && file.content) val = `url(${file.content.src})`;
     return { cursor: val };
   }
 };

package/dist/cjs/props/position.js

@@ -25,10 +25,8 @@ var import_scratch = require("@symbo.ls/scratch");
 const POSITION_PROPS = {
   inset: ({ props, context }) => {
     const { inset } = props;
-    if (context.utils.isNumber(inset))
-      return { inset };
-    if (!context.utils.isString(inset))
-      return;
+    if (context.utils.isNumber(inset)) return { inset };
+    if (!context.utils.isString(inset)) return;
     return { inset: inset.split(" ").map((v) => (0, import_scratch.getSpacingByKey)(v, "k").k).join(" ") };
   },
   left: ({ props }) => (0, import_scratch.getSpacingByKey)(props.left, "left"),
@@ -37,8 +35,7 @@ const POSITION_PROPS = {
   bottom: ({ props }) => (0, import_scratch.getSpacingByKey)(props.bottom, "bottom"),
   verticalInset: ({ props }) => {
     const { verticalInset } = props;
-    if (typeof verticalInset !== "string")
-      return;
+    if (typeof verticalInset !== "string") return;
     const vi = verticalInset.split(" ").map((v) => (0, import_scratch.getSpacingByKey)(v, "k").k);
     return {
       top: vi[0],
@@ -47,8 +44,7 @@ const POSITION_PROPS = {
   },
   horizontalInset: ({ props }) => {
     const { horizontalInset } = props;
-    if (typeof horizontalInset !== "string")
-      return;
+    if (typeof horizontalInset !== "string") return;
     const vi = horizontalInset.split(" ").map((v) => (0, import_scratch.getSpacingByKey)(v, "k").k);
     return {
       left: vi[0],

package/dist/cjs/props/theme.js

@@ -32,23 +32,20 @@ const THEME_PROPS = {
   theme: (element) => {
     const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
-    if (!props.theme)
-      return;
+    if (!props.theme) return;
     const hasSubtheme = props.theme.includes(" ") && !props.theme.includes("@");
     const globalThemeForced = `@${props.themeModifier || globalTheme}`;
     if (hasSubtheme) {
       const themeAppliedInVal = props.theme.split(" ");
       themeAppliedInVal.splice(1, 0, globalThemeForced);
       return (0, import_scratch.getMediaTheme)(themeAppliedInVal);
-    } else if (props.theme.includes("@{globalTheme}"))
-      props.theme.replace("@{globalTheme}", globalThemeForced);
+    } else if (props.theme.includes("@{globalTheme}")) props.theme.replace("@{globalTheme}", globalThemeForced);
     return (0, import_scratch.getMediaTheme)(props.theme, `@${props.themeModifier || globalTheme}`);
   },
   color: (element) => {
     const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
-    if (!props.color)
-      return;
+    if (!props.color) return;
     return {
       color: (0, import_scratch.getMediaColor)(props.color, globalTheme)
     };
@@ -56,8 +53,7 @@ const THEME_PROPS = {
   background: (element) => {
     const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
-    if (!props.background)
-      return;
+    if (!props.background) return;
     return {
       background: (0, import_scratch.getMediaColor)(props.background, globalTheme)
     };
@@ -65,8 +61,7 @@ const THEME_PROPS = {
   backgroundColor: (element) => {
     const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
-    if (!props.backgroundColor)
-      return;
+    if (!props.backgroundColor) return;
     return {
       backgroundColor: (0, import_scratch.getMediaColor)(props.backgroundColor, globalTheme)
     };
@@ -75,11 +70,9 @@ const THEME_PROPS = {
     const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
     let val = props.backgroundImage;
-    if (!val)
-      return;
+    if (!val) return;
     const file = ctx.files && ctx.files[val];
-    if (file && file.content)
-      val = file.content.src;
+    if (file && file.content) val = file.content.src;
     return {
       backgroundImage: (0, import_scratch.transformBackgroundImage)(val, globalTheme)
     };
@@ -106,8 +99,7 @@ const THEME_PROPS = {
   borderColor: (element) => {
     const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
-    if (!props.borderColor)
-      return;
+    if (!props.borderColor) return;
     return {
       borderColor: (0, import_scratch.getMediaColor)(props.borderColor, globalTheme)
     };
@@ -127,16 +119,14 @@ const THEME_PROPS = {
   shadow: (element) => {
     const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
-    if (!props.backgroundImage)
-      return;
+    if (!props.backgroundImage) return;
     return {
       boxShadow: (0, import_scratch.transformShadow)(props.shadow, globalTheme)
     };
   },
   boxShadow: (element, state, context) => {
     const { props } = element;
-    if (!(0, import_utils.isString)(props.boxShadow))
-      return;
+    if (!(0, import_utils.isString)(props.boxShadow)) return;
     const [val, hasImportant] = props.boxShadow.split("!importan");
     const globalTheme = getSystemGlobalTheme(element);
     const important = hasImportant ? " !important" : "";

package/dist/cjs/transform.js

@@ -29,13 +29,11 @@ var import_defaults = require("./defaults");
 const transformClassname = (element, restProps = {}) => {
   const classCss = {};
   const { props, class: elementClass } = element;
-  if (!(0, import_utils.isObject)(props))
-    return;
+  if (!(0, import_utils.isObject)(props)) return;
   for (const key in props) {
     const setter = import_atoms.keySetters[key.slice(0, 1)];
     const hasCSS = elementClass[key];
-    if (setter)
-      setter(key, props[key], classCss, element, true);
+    if (setter) setter(key, props[key], classCss, element, true);
     else if ((0, import_utils.isFunction)(hasCSS)) {
       const stack = hasCSS(element, element.state, element.context);
       const exec = (0, import_utils.isArray)(stack) ? stack.reduce((a, c) => {
@@ -44,8 +42,7 @@ const transformClassname = (element, restProps = {}) => {
       (0, import_utils.deepMerge)(classCss, exec);
     } else if (key === "style") {
       (0, import_utils.deepMerge)(classCss, props[key]);
-    } else
-      restProps[key] = props[key];
+    } else restProps[key] = props[key];
   }
   return classCss;
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "css-in-props",
   "description": "Utilize props as CSS methods",
   "author": "symbo.ls",
-  "version": "2.25.3",
+  "version": "2.27.8",
   "repository": "https://github.com/symbo-ls/smbls",
   "type": "module",
   "module": "src/index.js",
@@ -14,9 +14,9 @@
   "publishConfig": {},
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "npx esbuild ./src/*.js ./src/**/*.js --target=es2017 --format=esm --outdir=dist/esm",
-    "build:cjs": "npx esbuild ./src/*.js ./src/**/*.js --target=node16 --format=cjs --outdir=dist/cjs",
-    "build:iife": "npx esbuild ./src/index.js --target=es2017 --format=iife --outdir=dist/iife --bundle --minify",
+    "build:esm": "cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/*.js ./src/**/*.js --target=es2017 --format=esm --outdir=dist/esm",
+    "build:cjs": "cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/*.js ./src/**/*.js --target=node16 --format=cjs --outdir=dist/cjs",
+    "build:iife": "cross-env NODE_ENV=$NODE_ENV npx esbuild ./src/index.js --target=es2017 --format=iife --outdir=dist/iife --bundle --minify",
     "build": "npm run build:cjs",
     "prepublish": "rimraf -I dist && npm run build && npm run copy:package:cjs"
   },
@@ -25,10 +25,10 @@
     "dist"
   ],
   "dependencies": {
-    "@domql/utils": "^2.25.3",
-    "@symbo.ls/atoms": "^2.25.3",
-    "@symbo.ls/emotion": "^2.25.3",
-    "@symbo.ls/scratch": "^2.25.3"
+    "@domql/utils": "^2.27.8",
+    "@symbo.ls/atoms": "^2.27.8",
+    "@symbo.ls/emotion": "^2.27.8",
+    "@symbo.ls/scratch": "^2.27.8"
   },
-  "gitHead": "1e749ee3ef95b5a4a618c4eda1961f7c3011beff"
+  "gitHead": "e783fd54228d5c7aaab9d4b5624199a17a6c4713"
 }