css-in-props 3.14.1 → 3.14.4

package/dist/cjs/props/position.js

@@ -1,54 +0,0 @@
-"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 position_exports = {};
-__export(position_exports, {
-  POSITION_PROPS: () => POSITION_PROPS
-});
-module.exports = __toCommonJS(position_exports);
-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;
-    return { inset: inset.split(" ").map((v) => (0, import_scratch.getSpacingByKey)(v, "k").k).join(" ") };
-  },
-  left: ({ props }) => (0, import_scratch.getSpacingByKey)(props.left, "left"),
-  top: ({ props }) => (0, import_scratch.getSpacingByKey)(props.top, "top"),
-  right: ({ props }) => (0, import_scratch.getSpacingByKey)(props.right, "right"),
-  bottom: ({ props }) => (0, import_scratch.getSpacingByKey)(props.bottom, "bottom"),
-  verticalInset: ({ props }) => {
-    const { verticalInset } = props;
-    if (typeof verticalInset !== "string") return;
-    const vi = verticalInset.split(" ").map((v) => (0, import_scratch.getSpacingByKey)(v, "k").k);
-    return {
-      top: vi[0],
-      bottom: vi[1] || vi[0]
-    };
-  },
-  horizontalInset: ({ props }) => {
-    const { horizontalInset } = props;
-    if (typeof horizontalInset !== "string") return;
-    const vi = horizontalInset.split(" ").map((v) => (0, import_scratch.getSpacingByKey)(v, "k").k);
-    return {
-      left: vi[0],
-      right: vi[1] || vi[0]
-    };
-  }
-};

package/dist/cjs/props/theme.js

@@ -1,147 +0,0 @@
-"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 theme_exports = {};
-__export(theme_exports, {
-  THEME_PROPS: () => THEME_PROPS,
-  getSystemGlobalTheme: () => getSystemGlobalTheme
-});
-module.exports = __toCommonJS(theme_exports);
-var import_scratch = require("@symbo.ls/scratch");
-var import_utils = require("@domql/utils");
-const getSystemGlobalTheme = ({ context, state }) => {
-  const rootState = state && state.root;
-  return rootState && rootState.globalTheme ? rootState.globalTheme : context.designSystem && context.designSystem.globalTheme;
-};
-const THEME_PROPS = {
-  theme: (element) => {
-    const { props } = element;
-    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: (element) => {
-    const { props } = element;
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!props.color) return;
-    return {
-      color: (0, import_scratch.getMediaColor)(props.color, globalTheme)
-    };
-  },
-  background: (element) => {
-    const { props } = element;
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!props.background) return;
-    return {
-      background: (0, import_scratch.getMediaColor)(props.background, globalTheme)
-    };
-  },
-  backgroundColor: (element) => {
-    const { props } = element;
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!props.backgroundColor) return;
-    return {
-      backgroundColor: (0, import_scratch.getMediaColor)(props.backgroundColor, globalTheme)
-    };
-  },
-  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;
-    return {
-      backgroundImage: (0, import_scratch.transformBackgroundImage)(val, globalTheme)
-    };
-  },
-  backgroundSize: ({ props }) => ({
-    backgroundSize: props.backgroundSize
-  }),
-  backgroundPosition: ({ props }) => ({
-    backgroundPosition: props.backgroundPosition
-  }),
-  backgroundRepeat: ({ props }) => ({
-    backgroundRepeat: props.backgroundRepeat
-  }),
-  textStroke: ({ props }) => ({
-    WebkitTextStroke: (0, import_scratch.transformTextStroke)(props.textStroke)
-  }),
-  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 }) => (0, import_utils.isDefined)(props.border) && {
-    border: (0, import_scratch.transformBorder)(props.border)
-  },
-  borderColor: (element) => {
-    const { props } = element;
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!props.borderColor) return;
-    return {
-      borderColor: (0, import_scratch.getMediaColor)(props.borderColor, globalTheme)
-    };
-  },
-  borderLeft: ({ props }) => ({
-    borderLeft: (0, import_scratch.transformBorder)(props.borderLeft)
-  }),
-  borderTop: ({ props }) => ({
-    borderTop: (0, import_scratch.transformBorder)(props.borderTop)
-  }),
-  borderRight: ({ props }) => ({
-    borderRight: (0, import_scratch.transformBorder)(props.borderRight)
-  }),
-  borderBottom: ({ props }) => ({
-    borderBottom: (0, import_scratch.transformBorder)(props.borderBottom)
-  }),
-  shadow: (element) => {
-    const { props } = element;
-    const globalTheme = getSystemGlobalTheme(element);
-    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;
-    const [val, hasImportant] = props.boxShadow.split("!importan");
-    const globalTheme = getSystemGlobalTheme(element);
-    const important = hasImportant ? " !important" : "";
-    return {
-      boxShadow: (0, import_scratch.transformBoxShadow)(val.trim(), globalTheme) + important
-    };
-  },
-  textShadow: ({ props, context }) => ({
-    textShadow: (0, import_scratch.transformBoxShadow)(
-      props.textShadow,
-      context.designSystem.globalTheme
-    )
-  }),
-  columnRule: ({ props }) => ({
-    columnRule: (0, import_scratch.transformBorder)(props.columnRule)
-  })
-};

package/dist/cjs/props/timing.js

@@ -1,42 +0,0 @@
-"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 timing_exports = {};
-__export(timing_exports, {
-  TIMING_PROPS: () => TIMING_PROPS
-});
-module.exports = __toCommonJS(timing_exports);
-var import_scratch = require("@symbo.ls/scratch");
-const TIMING_PROPS = {
-  transition: ({ props }) => ({
-    transition: (0, import_scratch.splitTransition)(props.transition)
-  }),
-  transitionDuration: ({ props }) => ({
-    transitionDuration: (0, import_scratch.transformDuration)(props.transitionDuration)
-  }),
-  transitionDelay: ({ props }) => ({
-    transitionDelay: (0, import_scratch.transformDuration)(props.transitionDelay)
-  }),
-  transitionTimingFunction: ({ props }) => ({
-    transitionTimingFunction: (0, import_scratch.getTimingFunction)(props.transitionTimingFunction)
-  }),
-  transitionProperty: ({ props }) => ({
-    transitionProperty: props.transitionProperty,
-    willChange: props.transitionProperty
-  })
-};

package/dist/cjs/registry.js

@@ -1,39 +0,0 @@
-"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

@@ -1,29 +0,0 @@
-"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 set_exports = {};
-__export(set_exports, {
-  setClassname: () => setClassname
-});
-module.exports = __toCommonJS(set_exports);
-var import_transform = require("./transform");
-var import_emotion = require("./emotion");
-const setClassname = (props, emotionCss) => {
-  const transform = (0, import_transform.transformClassname)(props);
-  return (0, import_emotion.transformEmotion)(transform, emotionCss);
-};

package/dist/cjs/transform.js

@@ -1,80 +0,0 @@
-"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

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

package/src/index.js

@@ -1,6 +0,0 @@
-'use strict'
-
-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,119 +0,0 @@
-'use strict'
-
-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']
-const FILL_MODES = ['none', 'forwards', 'backwards', 'both']
-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 { 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
-}
-
-/**
- * Parse CSS animation shorthand string into individual properties.
- * Identifies the animation name by looking it up in the ANIMATION registry.
- * Other tokens are classified by type: duration, timing-function, iteration-count, etc.
- */
-const parseAnimationShorthand = (val, el) => {
-  const { animation: ANIMATION } = el.context && el.context.designSystem || {}
-  const tokens = val.split(/\s+/)
-  let name = null
-  const durations = []
-  let timingFunction = null
-  let iterationCount = null
-  let direction = null
-  let fillMode = null
-  let playState = null
-
-  for (const token of tokens) {
-    if (ANIMATION && ANIMATION[token]) {
-      name = token
-    } else if (isDuration(token)) {
-      durations.push(token)
-    } else if (TIMING_FUNCTIONS.includes(token) || token.startsWith('cubic-bezier') || token.startsWith('steps(')) {
-      timingFunction = token
-    } else if (token === 'infinite' || /^\d+$/.test(token)) {
-      iterationCount = token === 'infinite' ? token : Number(token)
-    } else if (DIRECTIONS.includes(token)) {
-      direction = token
-    } else if (FILL_MODES.includes(token)) {
-      fillMode = token
-    } else if (PLAY_STATES.includes(token)) {
-      playState = token
-    } else if (!name) {
-      // Fallback: treat unknown token as animation name
-      name = token
-    }
-  }
-
-  return { name, durations, timingFunction, iterationCount, direction, fillMode, playState }
-}
-
-export const ANIMATION_PROPS = {
-  animation: (val, el) => {
-    // Support CSS shorthand: 'animationName 2s linear infinite'
-    if (isString(val) && val.includes(' ')) {
-      const parsed = parseAnimationShorthand(val, el)
-      return {
-        animationName: applyAnimationProps(parsed.name || val, el),
-        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.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) => ({
-    animationName: applyAnimationProps(val, el)
-  }),
-  animationDuration: (val) => ({
-    animationDuration: getTimingByKey(val).timing
-  }),
-  animationDelay: (val) => ({
-    animationDelay: getTimingByKey(val).timing
-  }),
-  animationTimingFunction: (val) => ({
-    animationTimingFunction: getTimingFunction(val)
-  }),
-  animationIterationCount: (val) => ({
-    animationIterationCount: val
-  }),
-  animationFillMode: (val) => ({
-    animationFillMode: val
-  }),
-  animationPlayState: (val) => ({
-    animationPlayState: val
-  }),
-  animationDirection: (val) => ({
-    animationDirection: val
-  })
-}