css-in-props 3.8.9 → 3.14.1

package/dist/cjs/props/theme.js

@@ -25,44 +25,52 @@ module.exports = __toCommonJS(theme_exports);
 var import_scratch = require("@symbo.ls/scratch");
 var import_utils = require("@domql/utils");
 const getSystemGlobalTheme = ({ context, state }) => {
-  const theme = state?.root?.globalTheme || context.designSystem?.globalTheme;
-  return theme === "auto" ? null : theme;
+  const rootState = state && state.root;
+  return rootState && rootState.globalTheme ? rootState.globalTheme : context.designSystem && context.designSystem.globalTheme;
 };
 const THEME_PROPS = {
-  theme: (val, element) => {
+  theme: (element) => {
     const { props } = element;
-    if (!val) return;
-    if (props.themeModifier) {
-      return (0, import_scratch.getMediaTheme)(val, `@${props.themeModifier}`);
-    }
-    return (0, import_scratch.getMediaTheme)(val);
+    const globalTheme = getSystemGlobalTheme(element);
+    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);
+    return (0, import_scratch.getMediaTheme)(props.theme, `@${props.themeModifier || globalTheme}`);
   },
-  color: (val, element) => {
+  color: (element) => {
+    const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
+    if (!props.color) return;
     return {
-      color: (0, import_scratch.getMediaColor)(val, globalTheme)
+      color: (0, import_scratch.getMediaColor)(props.color, globalTheme)
     };
   },
-  background: (val, element) => {
+  background: (element) => {
+    const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    if ((0, import_utils.isString)(val) && val.includes("gradient")) {
-      return { background: (0, import_scratch.resolveColorsInGradient)(val, globalTheme) };
-    }
+    if (!props.background) return;
     return {
-      background: (0, import_scratch.getMediaColor)(val, globalTheme)
+      background: (0, import_scratch.getMediaColor)(props.background, globalTheme)
     };
   },
-  backgroundColor: (val, element) => {
+  backgroundColor: (element) => {
+    const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
+    if (!props.backgroundColor) return;
     return {
-      backgroundColor: (0, import_scratch.getMediaColor)(val, globalTheme)
+      backgroundColor: (0, import_scratch.getMediaColor)(props.backgroundColor, globalTheme)
     };
   },
-  backgroundImage: (val, element, s, ctx) => {
+  backgroundImage: (element, s, ctx) => {
+    const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
+    let val = props.backgroundImage;
     if (!val) return;
     const file = ctx.files && ctx.files[val];
     if (file && file.content) val = file.content.src;
@@ -70,75 +78,70 @@ const THEME_PROPS = {
       backgroundImage: (0, import_scratch.transformBackgroundImage)(val, globalTheme)
     };
   },
-  textStroke: (val) => ({
-    WebkitTextStroke: (0, import_scratch.transformTextStroke)(val)
+  backgroundSize: ({ props }) => ({
+    backgroundSize: props.backgroundSize
   }),
-  outline: (val) => ({
-    outline: (0, import_scratch.transformBorder)(val)
+  backgroundPosition: ({ props }) => ({
+    backgroundPosition: props.backgroundPosition
   }),
-  outlineOffset: (val, { props }) => (0, import_scratch.transformSizeRatio)("outlineOffset", val, props),
-  border: (val) => ({
-    border: (0, import_scratch.transformBorder)(val)
+  backgroundRepeat: ({ props }) => ({
+    backgroundRepeat: props.backgroundRepeat
   }),
-  borderColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return {
-      borderColor: (0, import_scratch.getMediaColor)(val, globalTheme)
-    };
-  },
-  borderTopColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return { borderTopColor: (0, import_scratch.getMediaColor)(val, globalTheme) };
-  },
-  borderBottomColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return { borderBottomColor: (0, import_scratch.getMediaColor)(val, globalTheme) };
+  textStroke: ({ props }) => ({
+    WebkitTextStroke: (0, import_scratch.transformTextStroke)(props.textStroke)
+  }),
+  outline: ({ props }) => (0, import_utils.isDefined)(props.outline) && {
+    outline: (0, import_scratch.transformBorder)(props.outline)
   },
-  borderLeftColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return { borderLeftColor: (0, import_scratch.getMediaColor)(val, globalTheme) };
+  outlineOffset: ({ props }) => (0, import_scratch.transformSizeRatio)("outlineOffset", props),
+  border: ({ props }) => (0, import_utils.isDefined)(props.border) && {
+    border: (0, import_scratch.transformBorder)(props.border)
   },
-  borderRightColor: (val, element) => {
+  borderColor: (element) => {
+    const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return { borderRightColor: (0, import_scratch.getMediaColor)(val, globalTheme) };
+    if (!props.borderColor) return;
+    return {
+      borderColor: (0, import_scratch.getMediaColor)(props.borderColor, globalTheme)
+    };
   },
-  borderLeft: (val) => ({
-    borderLeft: (0, import_scratch.transformBorder)(val)
+  borderLeft: ({ props }) => ({
+    borderLeft: (0, import_scratch.transformBorder)(props.borderLeft)
   }),
-  borderTop: (val) => ({
-    borderTop: (0, import_scratch.transformBorder)(val)
+  borderTop: ({ props }) => ({
+    borderTop: (0, import_scratch.transformBorder)(props.borderTop)
   }),
-  borderRight: (val) => ({
-    borderRight: (0, import_scratch.transformBorder)(val)
+  borderRight: ({ props }) => ({
+    borderRight: (0, import_scratch.transformBorder)(props.borderRight)
   }),
-  borderBottom: (val) => ({
-    borderBottom: (0, import_scratch.transformBorder)(val)
+  borderBottom: ({ props }) => ({
+    borderBottom: (0, import_scratch.transformBorder)(props.borderBottom)
   }),
-  shadow: (val, element) => {
+  shadow: (element) => {
+    const { props } = element;
     const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
+    if (!props.backgroundImage) return;
     return {
-      boxShadow: (0, import_scratch.transformShadow)(val, globalTheme)
+      boxShadow: (0, import_scratch.transformShadow)(props.shadow, globalTheme)
     };
   },
-  boxShadow: (val, element) => {
-    if (!(0, import_utils.isString)(val)) return;
-    const [value, hasImportant] = val.split("!importan");
+  boxShadow: (element, state, context) => {
+    const { props } = element;
+    if (!(0, import_utils.isString)(props.boxShadow)) return;
+    const [val, hasImportant] = props.boxShadow.split("!importan");
     const globalTheme = getSystemGlobalTheme(element);
     const important = hasImportant ? " !important" : "";
     return {
-      boxShadow: (0, import_scratch.transformBoxShadow)(value.trim(), globalTheme) + important
+      boxShadow: (0, import_scratch.transformBoxShadow)(val.trim(), globalTheme) + important
     };
   },
-  textShadow: (val, { context }) => ({
-    textShadow: (0, import_scratch.transformBoxShadow)(val, context.designSystem.globalTheme)
+  textShadow: ({ props, context }) => ({
+    textShadow: (0, import_scratch.transformBoxShadow)(
+      props.textShadow,
+      context.designSystem.globalTheme
+    )
   }),
-  columnRule: (val) => ({
-    columnRule: (0, import_scratch.transformBorder)(val)
+  columnRule: ({ props }) => ({
+    columnRule: (0, import_scratch.transformBorder)(props.columnRule)
   })
 };

package/dist/cjs/props/timing.js

@@ -23,20 +23,20 @@ __export(timing_exports, {
 module.exports = __toCommonJS(timing_exports);
 var import_scratch = require("@symbo.ls/scratch");
 const TIMING_PROPS = {
-  transition: (val) => ({
-    transition: (0, import_scratch.splitTransition)(val)
+  transition: ({ props }) => ({
+    transition: (0, import_scratch.splitTransition)(props.transition)
   }),
-  transitionDuration: (val) => ({
-    transitionDuration: (0, import_scratch.transformDuration)(val)
+  transitionDuration: ({ props }) => ({
+    transitionDuration: (0, import_scratch.transformDuration)(props.transitionDuration)
   }),
-  transitionDelay: (val) => ({
-    transitionDelay: (0, import_scratch.transformDuration)(val)
+  transitionDelay: ({ props }) => ({
+    transitionDelay: (0, import_scratch.transformDuration)(props.transitionDelay)
   }),
-  transitionTimingFunction: (val) => ({
-    transitionTimingFunction: (0, import_scratch.getTimingFunction)(val)
+  transitionTimingFunction: ({ props }) => ({
+    transitionTimingFunction: (0, import_scratch.getTimingFunction)(props.transitionTimingFunction)
   }),
-  transitionProperty: (val) => ({
-    transitionProperty: val,
-    willChange: val
+  transitionProperty: ({ props }) => ({
+    transitionProperty: props.transitionProperty,
+    willChange: props.transitionProperty
   })
 };

package/dist/cjs/registry.js

@@ -0,0 +1,39 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var registry_exports = {};
+__export(registry_exports, {
+  CSS_PREPROCS_DEFAULTS: () => CSS_PREPROCS_DEFAULTS,
+  CSS_PROPS_REGISTRY: () => CSS_PROPS_REGISTRY
+});
+module.exports = __toCommonJS(registry_exports);
+var import_utils = require("@domql/utils");
+var preprocs = __toESM(require("./props"), 1);
+var import_atoms = require("@symbo.ls/atoms");
+const CSS_PROPS_REGISTRY = (0, import_utils.mergeArray)([import_atoms.Text]).class;
+const CSS_PREPROCS_DEFAULTS = (0, import_utils.mergeArray)(Object.values(preprocs));

package/dist/cjs/set.js

@@ -21,7 +21,7 @@ __export(set_exports, {
   setClassname: () => setClassname
 });
 module.exports = __toCommonJS(set_exports);
-var import_transform = require("./_transform");
+var import_transform = require("./transform");
 var import_emotion = require("./emotion");
 const setClassname = (props, emotionCss) => {
   const transform = (0, import_transform.transformClassname)(props);

package/dist/cjs/transform.js

@@ -0,0 +1,80 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var transform_exports = {};
+__export(transform_exports, {
+  extractCSSfromProps: () => extractCSSfromProps,
+  transformClassname: () => transformClassname
+});
+module.exports = __toCommonJS(transform_exports);
+var import_utils = require("@domql/utils");
+var import_atoms = require("@symbo.ls/atoms");
+var import_registry = require("./registry");
+var import_defaults = require("./defaults");
+const transformClassname = (element, restProps = {}) => {
+  const classCss = {};
+  const { props, class: elementClass } = element;
+  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);
+    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) => {
+        return (0, import_utils.merge)(a, c);
+      }, {}) : stack;
+      (0, import_utils.deepMerge)(classCss, exec);
+    } else if (key === "style") {
+      (0, import_utils.deepMerge)(classCss, props[key]);
+    } else restProps[key] = props[key];
+  }
+  return classCss;
+};
+const extractCSSfromProps = (element) => {
+  const { props: defProps } = element;
+  const css = {};
+  const props = {};
+  for (const key in defProps) {
+    const val = defProps[key];
+    const mediaProp = import_atoms.keySetters[key.slice(0, 1)];
+    if (mediaProp) {
+      mediaProp(key, defProps[key], css, element, true);
+      continue;
+    }
+    const preprop = import_registry.CSS_PREPROCS_DEFAULTS[key];
+    if (preprop) {
+      const stack = preprop(element, element.state, element.context);
+      const exec = (0, import_utils.isArray)(stack) ? stack.reduce((a, c) => {
+        return (0, import_utils.merge)(a, c);
+      }, {}) : stack;
+      (0, import_utils.deepMerge)(css, exec);
+      continue;
+    }
+    if (key === "style") {
+      (0, import_utils.deepMerge)(css, defProps[key]);
+      continue;
+    }
+    if (import_defaults.DEFAULT_CSS_PROPERTIES_LIST.includes(key)) {
+      css[key] = val;
+      continue;
+    }
+    props[key] = val;
+  }
+  return { css, props };
+};

package/index.js

@@ -0,0 +1 @@
+export * from './src/index.js'

package/package.json

@@ -2,20 +2,18 @@
   "name": "css-in-props",
   "description": "Utilize props as CSS methods",
   "author": "symbo.ls",
-  "version": "3.8.9",
+  "version": "3.14.1",
   "repository": "https://github.com/symbo-ls/smbls",
   "type": "module",
-  "module": "./dist/esm/index.js",
+  "module": "./index.js",
   "unpkg": "./dist/iife/index.js",
   "jsdelivr": "./dist/iife/index.js",
-  "main": "./dist/cjs/index.js",
+  "main": "./index.js",
   "exports": {
-    ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
-    },
+    ".": "./index.js",
     "./src/*": "./src/*.js",
-    "./src/props": "./src/props/index.js"
+    "./src/props": "./src/props/index.js",
+    "./package.json": "./package.json"
   },
   "source": "src/index.js",
   "publishConfig": {
@@ -23,9 +21,9 @@
   },
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "cross-env NODE_ENV=$NODE_ENV esbuild $(find src -name '*.js') --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
-    "build:cjs": "cross-env NODE_ENV=$NODE_ENV esbuild $(find src -name '*.js') --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
-    "build:iife": "cross-env NODE_ENV=$NODE_ENV esbuild src/index.js --bundle --target=es2020 --format=iife --global-name=CssInProps --outfile=dist/iife/index.js --define:process.env.NODE_ENV=process.env.NODE_ENV --external:@symbo.ls/* --external:@domql/* --external:smbls",
+    "build:esm": "NODE_ENV=$NODE_ENV esbuild $(find src -name '*.js') --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:cjs": "NODE_ENV=$NODE_ENV esbuild $(find src -name '*.js') --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:iife": "NODE_ENV=$NODE_ENV esbuild src/index.js --bundle --target=es2020 --format=iife --global-name=CssInProps --outfile=dist/iife/index.js --define:process.env.NODE_ENV=process.env.NODE_ENV --external:@symbo.ls/* --external:@symbo.ls/* --external:smbls",
     "build": "node ../../build/build.js",
     "prepublish": "npm run build && npm run copy:package:cjs"
   },
@@ -35,12 +33,12 @@
     "src"
   ],
   "dependencies": {
-    "@domql/utils": "^3.8.9",
-    "@symbo.ls/emotion": "^3.8.9",
-    "@symbo.ls/scratch": "^3.8.9"
+    "@symbo.ls/css": "^3.14.0",
+    "@symbo.ls/utils": "^3.14.0",
+    "@symbo.ls/scratch": "^3.14.0"
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
-  "browser": "./dist/esm/index.js",
+  "browser": "./index.js",
   "sideEffects": false,
   "devDependencies": {
     "@babel/core": "^7.29.0"

package/src/index.js

@@ -1,6 +1,6 @@
 'use strict'
 
-export * from './transform'
-export * from './emotion'
-export * from './props'
-export * from './props/defaults'
+export * from './transform/index.js'
+export * from './set.js'
+export * from './props/index.js'
+export * from './props/defaults.js'

package/src/props/animation.js

@@ -1,7 +1,7 @@
 'use strict'
 
-import { isObject, isString } from '@domql/utils'
-import { emotion } from '@symbo.ls/emotion'
+import { isObject, isString } from '@symbo.ls/utils'
+import { keyframes as cssKeyframes } from '@symbo.ls/css'
 import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch'
 
 const TIMING_FUNCTIONS = ['ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out', 'step-start', 'step-end']
@@ -10,13 +10,18 @@ const DIRECTIONS = ['normal', 'reverse', 'alternate', 'alternate-reverse']
 const PLAY_STATES = ['running', 'paused']
 const isDuration = v => /^[\d.]+m?s$/.test(v)
 
+let _animCounter = 0
 const applyAnimationProps = (animation, element) => {
-  const { emotion: ctxEmotion } = element.context
-  const { keyframes } = ctxEmotion || emotion
-  if (isObject(animation)) return { animationName: keyframes(animation) }
-  const { ANIMATION } = element.context && element.context.designSystem
-  const record = ANIMATION[animation]
-  return keyframes(record)
+  const { animation: ANIMATION } = (element.context && element.context.designSystem) || {}
+  if (isObject(animation)) {
+    const name = `smbls-anim-${_animCounter++}`
+    return { animationName: cssKeyframes(name, animation) }
+  }
+  const record = ANIMATION && ANIMATION[animation]
+  if (isObject(record)) {
+    return cssKeyframes(animation, record)
+  }
+  return animation
 }
 
 /**
@@ -25,7 +30,7 @@ const applyAnimationProps = (animation, element) => {
  * Other tokens are classified by type: duration, timing-function, iteration-count, etc.
  */
 const parseAnimationShorthand = (val, el) => {
-  const { ANIMATION } = el.context && el.context.designSystem || {}
+  const { animation: ANIMATION } = el.context && el.context.designSystem || {}
   const tokens = val.split(/\s+/)
   let name = null
   const durations = []
@@ -66,25 +71,25 @@ export const ANIMATION_PROPS = {
       const parsed = parseAnimationShorthand(val, el)
       return {
         animationName: applyAnimationProps(parsed.name || val, el),
-        animationDuration: parsed.durations[0] || getTimingByKey(el.props.animationDuration || 'A').timing,
-        animationDelay: parsed.durations[1] || getTimingByKey(el.props.animationDelay || '0s').timing,
-        animationTimingFunction: parsed.timingFunction || getTimingFunction(el.props.animationTimingFunction || 'ease'),
-        animationFillMode: parsed.fillMode || el.props.animationFillMode || 'both',
-        animationIterationCount: parsed.iterationCount != null ? parsed.iterationCount : (el.props.animationIterationCount || 1),
-        animationPlayState: parsed.playState || el.props.animationPlayState,
-        animationDirection: parsed.direction || el.props.animationDirection
+        animationDuration: parsed.durations[0] || getTimingByKey(el.animationDuration || 'A').timing,
+        animationDelay: parsed.durations[1] || getTimingByKey(el.animationDelay || '0s').timing,
+        animationTimingFunction: parsed.timingFunction || getTimingFunction(el.animationTimingFunction || 'ease'),
+        animationFillMode: parsed.fillMode || el.animationFillMode || 'both',
+        animationIterationCount: parsed.iterationCount != null ? parsed.iterationCount : (el.animationIterationCount || 1),
+        animationPlayState: parsed.playState || el.animationPlayState,
+        animationDirection: parsed.direction || el.animationDirection
       }
     }
     // Single name (no spaces) — original behavior
     return {
       animationName: applyAnimationProps(val, el),
-      animationDuration: getTimingByKey(el.props.animationDuration || 'A').timing,
-      animationDelay: getTimingByKey(el.props.animationDelay || '0s').timing,
-      animationTimingFunction: getTimingFunction(el.props.animationTimingFunction || 'ease'),
-      animationFillMode: el.props.animationFillMode || 'both',
-      animationIterationCount: el.props.animationIterationCount || 1,
-      animationPlayState: el.props.animationPlayState,
-      animationDirection: el.props.animationDirection
+      animationDuration: getTimingByKey(el.animationDuration || 'A').timing,
+      animationDelay: getTimingByKey(el.animationDelay || '0s').timing,
+      animationTimingFunction: getTimingFunction(el.animationTimingFunction || 'ease'),
+      animationFillMode: el.animationFillMode || 'both',
+      animationIterationCount: el.animationIterationCount || 1,
+      animationPlayState: el.animationPlayState,
+      animationDirection: el.animationDirection
     }
   },
   animationName: (val, el) => ({