css-in-props 2.29.65 → 2.29.67

package/dist/cjs/props/theme.js

@@ -39,7 +39,8 @@ const THEME_PROPS = {
       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) => {
@@ -89,13 +90,13 @@ const THEME_PROPS = {
   textStroke: ({ props }) => ({
     WebkitTextStroke: (0, import_scratch.transformTextStroke)(props.textStroke)
   }),
-  outline: ({ props }) => ({
+  outline: ({ props }) => (0, import_utils.isDefined)(props.outline) && {
     outline: (0, import_scratch.transformBorder)(props.outline)
-  }),
+  },
   outlineOffset: ({ props }) => (0, import_scratch.transformSizeRatio)("outlineOffset", props),
-  border: ({ props }) => ({
+  border: ({ props }) => (0, import_utils.isDefined)(props.border) && {
     border: (0, import_scratch.transformBorder)(props.border)
-  }),
+  },
   borderColor: (element) => {
     const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
@@ -135,7 +136,10 @@ const THEME_PROPS = {
     };
   },
   textShadow: ({ props, context }) => ({
-    textShadow: (0, import_scratch.transformBoxShadow)(props.textShadow, context.designSystem.globalTheme)
+    textShadow: (0, import_scratch.transformBoxShadow)(
+      props.textShadow,
+      context.designSystem.globalTheme
+    )
   }),
   columnRule: ({ props }) => ({
     columnRule: (0, import_scratch.transformBorder)(props.columnRule)

package/package.json

@@ -2,7 +2,7 @@
   "name": "css-in-props",
   "description": "Utilize props as CSS methods",
   "author": "symbo.ls",
-  "version": "2.29.65",
+  "version": "2.29.67",
   "repository": "https://github.com/symbo-ls/smbls",
   "type": "module",
   "module": "src/index.js",
@@ -25,10 +25,10 @@
     "dist"
   ],
   "dependencies": {
-    "@domql/utils": "^2.29.65",
-    "@symbo.ls/atoms": "^2.29.65",
-    "@symbo.ls/emotion": "^2.29.65",
-    "@symbo.ls/scratch": "^2.29.65"
+    "@domql/utils": "^2.29.67",
+    "@symbo.ls/atoms": "^2.29.67",
+    "@symbo.ls/emotion": "^2.29.67",
+    "@symbo.ls/scratch": "^2.29.67"
   },
-  "gitHead": "6f272e3cbc9a4b17ab9821a56130c3bb34ba1de2"
+  "gitHead": "b3ebe3aa391f748a5de3534fac1fe6d36b9771b3"
 }

package/src/props/theme.js

@@ -11,11 +11,13 @@ import {
   transformSizeRatio
 } from '@symbo.ls/scratch'
 
-import { isString } from '@domql/utils'
+import { isDefined, isString } from '@domql/utils'
 
 export const getSystemGlobalTheme = ({ context, state }) => {
   const rootState = state && state.root
-  return rootState && rootState.globalTheme ? rootState.globalTheme : context.designSystem && context.designSystem.globalTheme
+  return rootState && rootState.globalTheme
+    ? rootState.globalTheme
+    : context.designSystem && context.designSystem.globalTheme
 }
 
 export const THEME_PROPS = {
@@ -29,7 +31,8 @@ export const THEME_PROPS = {
       const themeAppliedInVal = props.theme.split(' ')
       themeAppliedInVal.splice(1, 0, globalThemeForced)
       return 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 getMediaTheme(props.theme, `@${props.themeModifier || globalTheme}`)
   },
 
@@ -67,9 +70,9 @@ export const THEME_PROPS = {
     if (!val) return
     const file = ctx.files && ctx.files[val]
     if (file && file.content) val = file.content.src
-    return ({
+    return {
       backgroundImage: transformBackgroundImage(val, globalTheme)
-    })
+    }
   },
 
   backgroundSize: ({ props }) => ({
@@ -88,15 +91,17 @@ export const THEME_PROPS = {
     WebkitTextStroke: transformTextStroke(props.textStroke)
   }),
 
-  outline: ({ props }) => ({
-    outline: transformBorder(props.outline)
-  }),
+  outline: ({ props }) =>
+    isDefined(props.outline) && {
+      outline: transformBorder(props.outline)
+    },
 
   outlineOffset: ({ props }) => transformSizeRatio('outlineOffset', props),
 
-  border: ({ props }) => ({
-    border: transformBorder(props.border)
-  }),
+  border: ({ props }) =>
+    isDefined(props.border) && {
+      border: transformBorder(props.border)
+    },
 
   borderColor: (element) => {
     const { props } = element
@@ -123,9 +128,9 @@ export const THEME_PROPS = {
     const { props } = element
     const globalTheme = getSystemGlobalTheme(element)
     if (!props.backgroundImage) return
-    return ({
+    return {
       boxShadow: transformShadow(props.shadow, globalTheme)
-    })
+    }
   },
 
   boxShadow: (element, state, context) => {
@@ -140,7 +145,10 @@ export const THEME_PROPS = {
   },
 
   textShadow: ({ props, context }) => ({
-    textShadow: transformBoxShadow(props.textShadow, context.designSystem.globalTheme)
+    textShadow: transformBoxShadow(
+      props.textShadow,
+      context.designSystem.globalTheme
+    )
   }),
 
   columnRule: ({ props }) => ({