css-in-props 2.11.453 → 2.11.455

package/dist/cjs/defaults.js

@@ -0,0 +1,340 @@
+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 defaults_exports = {};
+__export(defaults_exports, {
+  DEFAULT_CSS_PROPERTIES_LIST: () => DEFAULT_CSS_PROPERTIES_LIST
+});
+module.exports = __toCommonJS(defaults_exports);
+const DEFAULT_CSS_PROPERTIES_LIST = [
+  "accentColor",
+  "alignContent",
+  "alignItems",
+  "alignSelf",
+  "alignmentBaseline",
+  "all",
+  "animation",
+  "animationDelay",
+  "animationDirection",
+  "animationDuration",
+  "animationFillMode",
+  "animationIterationCount",
+  "animationName",
+  "animationPlayState",
+  "animationTimingFunction",
+  "appearance",
+  "aspectRatio",
+  "backdropFilter",
+  "backfaceVisibility",
+  "background",
+  "backgroundAttachment",
+  "backgroundBlendMode",
+  "backgroundClip",
+  "backgroundColor",
+  "backgroundImage",
+  "backgroundOrigin",
+  "backgroundPosition",
+  "backgroundPositionX",
+  "backgroundPositionY",
+  "backgroundRepeat",
+  "backgroundRepeatX",
+  "backgroundRepeatY",
+  "backgroundSize",
+  "baselineShift",
+  "blockSize",
+  "border",
+  "borderBlock",
+  "borderBlockColor",
+  "borderBlockEnd",
+  "borderBlockEndColor",
+  "borderBlockEndStyle",
+  "borderBlockEndWidth",
+  "borderBlockStart",
+  "borderBlockStartColor",
+  "borderBlockStartStyle",
+  "borderBlockStartWidth",
+  "borderBlockStyle",
+  "borderBlockWidth",
+  "borderBottom",
+  "borderBottomColor",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+  "borderBottomStyle",
+  "borderBottomWidth",
+  "borderCollapse",
+  "borderColor",
+  "borderImage",
+  "borderImageOutset",
+  "borderImageRepeat",
+  "borderImageSlice",
+  "borderImageSource",
+  "borderImageWidth",
+  "borderLeft",
+  "borderLeftColor",
+  "borderLeftStyle",
+  "borderLeftWidth",
+  "borderRadius",
+  "borderRight",
+  "borderRightColor",
+  "borderRightStyle",
+  "borderRightWidth",
+  "borderSpacing",
+  "borderStyle",
+  "borderTop",
+  "borderTopColor",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderTopStyle",
+  "borderTopWidth",
+  "borderWidth",
+  "bottom",
+  "boxDecorationBreak",
+  "boxShadow",
+  "boxSizing",
+  "breakAfter",
+  "breakBefore",
+  "breakInside",
+  "captionSide",
+  "caretColor",
+  "clear",
+  "clip",
+  "clipPath",
+  "color",
+  "colorAdjust",
+  "colorInterpolation",
+  "colorInterpolationFilters",
+  "colorRendering",
+  "columnCount",
+  "columnFill",
+  "columnGap",
+  "columnRule",
+  "columnRuleColor",
+  "columnRuleStyle",
+  "columnRuleWidth",
+  "columnSpan",
+  "columnWidth",
+  "columns",
+  "contain",
+  "content",
+  "counterIncrement",
+  "counterReset",
+  "cursor",
+  "direction",
+  "display",
+  "emptyCells",
+  "filter",
+  "flex",
+  "flexBasis",
+  "flexDirection",
+  "flexFlow",
+  "flexGrow",
+  "flexShrink",
+  "flexWrap",
+  "float",
+  "font",
+  "fontFamily",
+  "fontFeatureSettings",
+  "fontKerning",
+  "fontLanguageOverride",
+  "fontSize",
+  "fontSizeAdjust",
+  "fontStretch",
+  "fontStyle",
+  "fontVariant",
+  "fontVariantAlternates",
+  "fontVariantCaps",
+  "fontVariantEastAsian",
+  "fontVariantNumeric",
+  "fontVariantPosition",
+  "fontWeight",
+  "fontVariationSettings",
+  "fontSynthesis",
+  "forcedColorAdjust",
+  "gap",
+  "grid",
+  "gridArea",
+  "gridAutoColumns",
+  "gridAutoFlow",
+  "gridAutoRows",
+  "gridColumn",
+  "gridColumnEnd",
+  "gridColumnGap",
+  "gridColumnStart",
+  "gridGap",
+  "gridRow",
+  "gridRowEnd",
+  "gridRowGap",
+  "gridRowStart",
+  "gridTemplate",
+  "gridTemplateAreas",
+  "gridTemplateColumns",
+  "gridTemplateRows",
+  "height",
+  "hyphens",
+  "imageOrientation",
+  "imageRendering",
+  "imeMode",
+  "inset",
+  "insetBlock",
+  "insetBlockEnd",
+  "insetBlockStart",
+  "insetInline",
+  "insetInlineEnd",
+  "insetInlineStart",
+  "initialLetter",
+  "isolation",
+  "justifyContent",
+  "justifyItems",
+  "justifySelf",
+  "left",
+  "letterSpacing",
+  "lineBreak",
+  "lineClamp",
+  "lineHeight",
+  "listStyle",
+  "listStyleImage",
+  "listStylePosition",
+  "listStyleType",
+  "margin",
+  "marginBottom",
+  "marginLeft",
+  "marginRight",
+  "marginTop",
+  "marginBlock",
+  "marginBlockEnd",
+  "marginBlockStart",
+  "marginInline",
+  "marginInlineEnd",
+  "marginInlineStart",
+  "mask",
+  "maskBorder",
+  "maskBorderImage",
+  "maskBorderOutset",
+  "maskBorderRepeat",
+  "maskBorderSlice",
+  "maskBorderSource",
+  "maskBorderWidth",
+  "maskClip",
+  "maskComposite",
+  "maskImage",
+  "maskOrigin",
+  "maskPosition",
+  "maskRepeat",
+  "maskSize",
+  "maskType",
+  "maxBlockSize",
+  "maxHeight",
+  "maxInlineSize",
+  "maxWidth",
+  "minBlockSize",
+  "minHeight",
+  "minInlineSize",
+  "minWidth",
+  "mixBlendMode",
+  "objectFit",
+  "objectPosition",
+  "objectViewBox",
+  "offset",
+  "offsetDistance",
+  "offsetPath",
+  "offsetRotate",
+  "opacity",
+  "order",
+  "orientation",
+  "outline",
+  "outlineColor",
+  "outlineOffset",
+  "outlineStyle",
+  "outlineWidth",
+  "overflow",
+  "overflowAnchor",
+  "overflowClip",
+  "overflowScrolling",
+  "overflowWrap",
+  "overflowX",
+  "overflowY",
+  "padding",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingRight",
+  "paddingTop",
+  "pageBreakAfter",
+  "pageBreakBefore",
+  "pageBreakInside",
+  "paintOrder",
+  "perspective",
+  "perspectiveOrigin",
+  "placeContent",
+  "placeItems",
+  "placeSelf",
+  "pointerEvents",
+  "position",
+  "resize",
+  "right",
+  "rotate",
+  "rowGap",
+  "scrollBehavior",
+  "scrollPadding",
+  "scrollSnapAlign",
+  "scrollSnapType",
+  "scrollbarColor",
+  "scrollbarWidth",
+  "shapeImageThreshold",
+  "shapeMargin",
+  "shapeOutside",
+  "tabSize",
+  "tableLayout",
+  "textAlign",
+  "textAlignLast",
+  "textDecoration",
+  "textDecorationColor",
+  "textDecorationLine",
+  "textDecorationSkipInk",
+  "textDecorationStyle",
+  "textDecorationThickness",
+  "textIndent",
+  "textOverflow",
+  "textShadow",
+  "textTransform",
+  "textUnderlineOffset",
+  "top",
+  "transform",
+  "transformOrigin",
+  "transformStyle",
+  "transition",
+  "transitionDelay",
+  "transitionDuration",
+  "transitionProperty",
+  "transitionTimingFunction",
+  "translate",
+  "translateX",
+  "translateY",
+  "translateZ",
+  "unicodeBidi",
+  "userSelect",
+  "verticalAlign",
+  "visibility",
+  "whiteSpace",
+  "widows",
+  "width",
+  "willChange",
+  "wordBreak",
+  "wordSpacing",
+  "wordWrap",
+  "writingMode",
+  "zIndex"
+];

package/dist/cjs/registry.js

@@ -1,7 +1,9 @@
 "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)
@@ -15,13 +17,23 @@ var __copyProps = (to, from, except, desc) => {
   }
   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.Shape,
@@ -37,3 +49,4 @@ const CSS_PROPS_REGISTRY = (0, import_utils.mergeArray)([
   import_atoms.XYZ,
   import_atoms.Animation
 ]).class;
+const CSS_PREPROCS_DEFAULTS = (0, import_utils.mergeArray)(Object.values(preprocs));

package/dist/cjs/transform.js

@@ -18,35 +18,66 @@ var __copyProps = (to, from, except, desc) => {
 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");
-const transformClassname = (props, context = {}, registry = import_registry.CSS_PROPS_REGISTRY, excludedProps = {}, element) => {
-  const CLASS_NAMES = {};
+var import_defaults = require("./defaults");
+const transformClassname = (element, restProps = {}) => {
+  const classCss = {};
+  const { props, class: elementClass } = element;
   if (!(0, import_utils.isObject)(props))
     return;
-  (0, import_utils.merge)(element.class, registry);
-  if (Object.keys(registry)[0] !== Object.keys(import_registry.CSS_PROPS_REGISTRY)[0]) {
-    (0, import_utils.merge)(element.class, import_registry.CSS_PROPS_REGISTRY);
-  }
   for (const key in props) {
     const setter = import_atoms.keySetters[key.slice(0, 1)];
-    const hasCSS = registry[key];
+    const hasCSS = elementClass[key];
     if (setter)
-      setter(key, props[key], CLASS_NAMES, element, true);
+      setter(key, props[key], classCss, element, true);
     else if ((0, import_utils.isFunction)(hasCSS)) {
-      const stack = hasCSS({ ...element, props, context });
+      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)(CLASS_NAMES, exec);
+      (0, import_utils.deepMerge)(classCss, exec);
     } else if (key === "style") {
-      (0, import_utils.deepMerge)(CLASS_NAMES, props[key]);
+      (0, import_utils.deepMerge)(classCss, props[key]);
     } else
-      excludedProps[key] = props[key];
+      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 CLASS_NAMES;
+  return { css, props };
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "css-in-props",
   "description": "Utilize props as CSS methods",
   "author": "symbo.ls",
-  "version": "2.11.453",
+  "version": "2.11.455",
   "repository": "https://github.com/symbo-ls/smbls",
   "type": "module",
   "module": "src/index.js",
@@ -26,9 +26,9 @@
   ],
   "dependencies": {
     "@domql/utils": "^2.5.0",
-    "@symbo.ls/atoms": "^2.11.453",
+    "@symbo.ls/atoms": "^2.11.455",
     "@symbo.ls/emotion": "^2.11.453",
     "@symbo.ls/scratch": "^2.11.453"
   },
-  "gitHead": "8e5458a957b9d2c75944023e2c31bab157034314"
+  "gitHead": "2ec12ac36ba08a2d424a3806dba7ccb6f7bddfba"
 }

package/src/defaults.js

@@ -0,0 +1,318 @@
+export const DEFAULT_CSS_PROPERTIES_LIST = [
+  'accentColor',
+  'alignContent',
+  'alignItems',
+  'alignSelf',
+  'alignmentBaseline',
+  'all',
+  'animation',
+  'animationDelay',
+  'animationDirection',
+  'animationDuration',
+  'animationFillMode',
+  'animationIterationCount',
+  'animationName',
+  'animationPlayState',
+  'animationTimingFunction',
+  'appearance',
+  'aspectRatio',
+  'backdropFilter',
+  'backfaceVisibility',
+  'background',
+  'backgroundAttachment',
+  'backgroundBlendMode',
+  'backgroundClip',
+  'backgroundColor',
+  'backgroundImage',
+  'backgroundOrigin',
+  'backgroundPosition',
+  'backgroundPositionX',
+  'backgroundPositionY',
+  'backgroundRepeat',
+  'backgroundRepeatX',
+  'backgroundRepeatY',
+  'backgroundSize',
+  'baselineShift',
+  'blockSize',
+  'border',
+  'borderBlock',
+  'borderBlockColor',
+  'borderBlockEnd',
+  'borderBlockEndColor',
+  'borderBlockEndStyle',
+  'borderBlockEndWidth',
+  'borderBlockStart',
+  'borderBlockStartColor',
+  'borderBlockStartStyle',
+  'borderBlockStartWidth',
+  'borderBlockStyle',
+  'borderBlockWidth',
+  'borderBottom',
+  'borderBottomColor',
+  'borderBottomLeftRadius',
+  'borderBottomRightRadius',
+  'borderBottomStyle',
+  'borderBottomWidth',
+  'borderCollapse',
+  'borderColor',
+  'borderImage',
+  'borderImageOutset',
+  'borderImageRepeat',
+  'borderImageSlice',
+  'borderImageSource',
+  'borderImageWidth',
+  'borderLeft',
+  'borderLeftColor',
+  'borderLeftStyle',
+  'borderLeftWidth',
+  'borderRadius',
+  'borderRight',
+  'borderRightColor',
+  'borderRightStyle',
+  'borderRightWidth',
+  'borderSpacing',
+  'borderStyle',
+  'borderTop',
+  'borderTopColor',
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderTopStyle',
+  'borderTopWidth',
+  'borderWidth',
+  'bottom',
+  'boxDecorationBreak',
+  'boxShadow',
+  'boxSizing',
+  'breakAfter',
+  'breakBefore',
+  'breakInside',
+  'captionSide',
+  'caretColor',
+  'clear',
+  'clip',
+  'clipPath',
+  'color',
+  'colorAdjust',
+  'colorInterpolation',
+  'colorInterpolationFilters',
+  'colorRendering',
+  'columnCount',
+  'columnFill',
+  'columnGap',
+  'columnRule',
+  'columnRuleColor',
+  'columnRuleStyle',
+  'columnRuleWidth',
+  'columnSpan',
+  'columnWidth',
+  'columns',
+  'contain',
+  'content',
+  'counterIncrement',
+  'counterReset',
+  'cursor',
+  'direction',
+  'display',
+  'emptyCells',
+  'filter',
+  'flex',
+  'flexBasis',
+  'flexDirection',
+  'flexFlow',
+  'flexGrow',
+  'flexShrink',
+  'flexWrap',
+  'float',
+  'font',
+  'fontFamily',
+  'fontFeatureSettings',
+  'fontKerning',
+  'fontLanguageOverride',
+  'fontSize',
+  'fontSizeAdjust',
+  'fontStretch',
+  'fontStyle',
+  'fontVariant',
+  'fontVariantAlternates',
+  'fontVariantCaps',
+  'fontVariantEastAsian',
+  'fontVariantNumeric',
+  'fontVariantPosition',
+  'fontWeight',
+  'fontVariationSettings',
+  'fontSynthesis',
+  'forcedColorAdjust',
+  'gap',
+  'grid',
+  'gridArea',
+  'gridAutoColumns',
+  'gridAutoFlow',
+  'gridAutoRows',
+  'gridColumn',
+  'gridColumnEnd',
+  'gridColumnGap',
+  'gridColumnStart',
+  'gridGap',
+  'gridRow',
+  'gridRowEnd',
+  'gridRowGap',
+  'gridRowStart',
+  'gridTemplate',
+  'gridTemplateAreas',
+  'gridTemplateColumns',
+  'gridTemplateRows',
+  'height',
+  'hyphens',
+  'imageOrientation',
+  'imageRendering',
+  'imeMode',
+  'inset',
+  'insetBlock',
+  'insetBlockEnd',
+  'insetBlockStart',
+  'insetInline',
+  'insetInlineEnd',
+  'insetInlineStart',
+  'initialLetter',
+  'isolation',
+  'justifyContent',
+  'justifyItems',
+  'justifySelf',
+  'left',
+  'letterSpacing',
+  'lineBreak',
+  'lineClamp',
+  'lineHeight',
+  'listStyle',
+  'listStyleImage',
+  'listStylePosition',
+  'listStyleType',
+  'margin',
+  'marginBottom',
+  'marginLeft',
+  'marginRight',
+  'marginTop',
+  'marginBlock',
+  'marginBlockEnd',
+  'marginBlockStart',
+  'marginInline',
+  'marginInlineEnd',
+  'marginInlineStart',
+  'mask',
+  'maskBorder',
+  'maskBorderImage',
+  'maskBorderOutset',
+  'maskBorderRepeat',
+  'maskBorderSlice',
+  'maskBorderSource',
+  'maskBorderWidth',
+  'maskClip',
+  'maskComposite',
+  'maskImage',
+  'maskOrigin',
+  'maskPosition',
+  'maskRepeat',
+  'maskSize',
+  'maskType',
+  'maxBlockSize',
+  'maxHeight',
+  'maxInlineSize',
+  'maxWidth',
+  'minBlockSize',
+  'minHeight',
+  'minInlineSize',
+  'minWidth',
+  'mixBlendMode',
+  'objectFit',
+  'objectPosition',
+  'objectViewBox',
+  'offset',
+  'offsetDistance',
+  'offsetPath',
+  'offsetRotate',
+  'opacity',
+  'order',
+  'orientation',
+  'outline',
+  'outlineColor',
+  'outlineOffset',
+  'outlineStyle',
+  'outlineWidth',
+  'overflow',
+  'overflowAnchor',
+  'overflowClip',
+  'overflowScrolling',
+  'overflowWrap',
+  'overflowX',
+  'overflowY',
+  'padding',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingRight',
+  'paddingTop',
+  'pageBreakAfter',
+  'pageBreakBefore',
+  'pageBreakInside',
+  'paintOrder',
+  'perspective',
+  'perspectiveOrigin',
+  'placeContent',
+  'placeItems',
+  'placeSelf',
+  'pointerEvents',
+  'position',
+  'resize',
+  'right',
+  'rotate',
+  'rowGap',
+  'scrollBehavior',
+  'scrollPadding',
+  'scrollSnapAlign',
+  'scrollSnapType',
+  'scrollbarColor',
+  'scrollbarWidth',
+  'shapeImageThreshold',
+  'shapeMargin',
+  'shapeOutside',
+  'tabSize',
+  'tableLayout',
+  'textAlign',
+  'textAlignLast',
+  'textDecoration',
+  'textDecorationColor',
+  'textDecorationLine',
+  'textDecorationSkipInk',
+  'textDecorationStyle',
+  'textDecorationThickness',
+  'textIndent',
+  'textOverflow',
+  'textShadow',
+  'textTransform',
+  'textUnderlineOffset',
+  'top',
+  'transform',
+  'transformOrigin',
+  'transformStyle',
+  'transition',
+  'transitionDelay',
+  'transitionDuration',
+  'transitionProperty',
+  'transitionTimingFunction',
+  'translate',
+  'translateX',
+  'translateY',
+  'translateZ',
+  'unicodeBidi',
+  'userSelect',
+  'verticalAlign',
+  'visibility',
+  'whiteSpace',
+  'widows',
+  'width',
+  'willChange',
+  'wordBreak',
+  'wordSpacing',
+  'wordWrap',
+  'writingMode',
+  'zIndex'
+]

package/src/props/animation.js

@@ -0,0 +1,38 @@
+'use strict'
+
+import { isObject } from '@domql/utils'
+import { emotion } from '@symbo.ls/emotion'
+import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch'
+
+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)
+}
+
+export const ANIMATION_PROPS = {
+  animation: (el) => ({
+    animationName: applyAnimationProps(el.props.animation, 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',
+    animationPlayState: el.props.animationPlayState,
+    animationDirection: el.props.animationDirection
+  }),
+  animationName: (el) => ({
+    animationName: applyAnimationProps(el.props.animationName, el)
+  }),
+  animationDuration: ({ props, deps }) => ({
+    animationDuration: deps.getTimingByKey(props.animationDuration).timing
+  }),
+  animationDelay: ({ props, deps }) => ({
+    animationDelay: deps.getTimingByKey(props.animationDelay).timing
+  }),
+  animationTimingFunction: ({ props, deps }) => ({
+    animationTimingFunction: deps.getTimingFunction(props.animationTimingFunction)
+  })
+}

package/src/props/block.js

@@ -0,0 +1,174 @@
+'use strict'
+
+import { isUndefined, isString } from '@domql/utils'
+
+import {
+  getSpacingBasedOnRatio,
+  transformSize,
+  transformSizeRatio,
+  transfromGap
+} from '@symbo.ls/scratch'
+
+export const BLOCK_PROPS = {
+  show: (el, s, ctx) => !!(ctx.utils.exec(el.props.show, el, s) === false) && ({
+    display: 'none !important'
+  }),
+
+  hide: (el, s, ctx) => !!ctx.utils.exec(el.props.hide, el, s) && ({
+    display: 'none !important'
+  }),
+
+  height: ({ props }) => transformSizeRatio('height', props),
+  width: ({ props }) => transformSizeRatio('width', props),
+
+  boxSizing: ({ props }) => !isUndefined(props.boxSizing)
+    ? ({ boxSizing: props.boxSizing })
+    : { boxSizing: 'border-box' },
+
+  boxSize: ({ props }) => {
+    if (!isString(props.boxSize)) return
+    const [height, width] = props.boxSize.split(' ')
+    return {
+      ...transformSize('height', height),
+      ...transformSize('width', width || height)
+    }
+  },
+
+  inlineSize: ({ props }) => transformSizeRatio('inlineSize', props),
+  blockSize: ({ props }) => transformSizeRatio('blockSize', props),
+
+  minWidth: ({ props }) => transformSizeRatio('minWidth', props),
+  maxWidth: ({ props }) => transformSizeRatio('maxWidth', props),
+  widthRange: ({ props }) => {
+    if (!isString(props.widthRange)) return
+    const [minWidth, maxWidth] = props.widthRange.split(' ')
+    return {
+      ...transformSize('minWidth', minWidth),
+      ...transformSize('maxWidth', maxWidth || minWidth)
+    }
+  },
+
+  minHeight: ({ props }) => transformSizeRatio('minHeight', props),
+  maxHeight: ({ props }) => transformSizeRatio('maxHeight', props),
+  heightRange: ({ props }) => {
+    if (!isString(props.heightRange)) return
+    const [minHeight, maxHeight] = props.heightRange.split(' ')
+    return {
+      ...transformSize('minHeight', minHeight),
+      ...transformSize('maxHeight', maxHeight || minHeight)
+    }
+  },
+
+  size: ({ props }) => {
+    if (!isString(props.size)) return
+    const [inlineSize, blockSize] = props.size.split(' ')
+    return {
+      ...transformSizeRatio('inlineSize', inlineSize),
+      ...transformSizeRatio('blockSize', blockSize || inlineSize)
+    }
+  },
+
+  minBlockSize: ({ props }) => transformSizeRatio('minBlockSize', props),
+  minInlineSize: ({ props }) => transformSizeRatio('minInlineSize', props),
+
+  maxBlockSize: ({ props }) => transformSizeRatio('maxBlockSize', props),
+  maxInlineSize: ({ props }) => transformSizeRatio('maxInlineSize', props),
+
+  minSize: ({ props }) => {
+    if (!isString(props.minSize)) return
+    const [minInlineSize, minBlockSize] = props.minSize.split(' ')
+    return {
+      ...transformSize('minInlineSize', minInlineSize),
+      ...transformSize('minBlockSize', minBlockSize || minInlineSize)
+    }
+  },
+
+  maxSize: ({ props }) => {
+    if (!isString(props.maxSize)) return
+    const [maxInlineSize, maxBlockSize] = props.maxSize.split(' ')
+    return {
+      ...transformSize('maxInlineSize', maxInlineSize),
+      ...transformSize('maxBlockSize', maxBlockSize || maxInlineSize)
+    }
+  },
+
+  borderWidth: ({ props }) => transformSizeRatio('borderWidth', props),
+
+  padding: ({ props }) => transformSizeRatio('padding', props),
+  scrollPadding: ({ props }) => transformSizeRatio('scrollPadding', props),
+  paddingInline: ({ props }) => {
+    if (!isString(props.paddingInline)) return
+    const [paddingInlineStart, paddingInlineEnd] = props.paddingInline.split(' ')
+    return {
+      ...transformSize('paddingInlineStart', paddingInlineStart),
+      ...transformSize('paddingInlineEnd', paddingInlineEnd || paddingInlineStart)
+    }
+  },
+  paddingBlock: ({ props }) => {
+    if (!isString(props.paddingBlock)) return
+    const [paddingBlockStart, paddingBlockEnd] = props.paddingBlock.split(' ')
+    return {
+      ...transformSize('paddingBlockStart', paddingBlockStart),
+      ...transformSize('paddingBlockEnd', paddingBlockEnd || paddingBlockStart)
+    }
+  },
+  paddingInlineStart: ({ props }) => transformSizeRatio('paddingInlineStart', props),
+  paddingInlineEnd: ({ props }) => transformSizeRatio('paddingInlineEnd', props),
+  paddingBlockStart: ({ props }) => transformSizeRatio('paddingBlockStart', props),
+  paddingBlockEnd: ({ props }) => transformSizeRatio('paddingBlockEnd', props),
+
+  margin: ({ props }) => transformSizeRatio('margin', props),
+  marginInline: ({ props }) => {
+    if (!isString(props.marginInline)) return
+    const [marginInlineStart, marginInlineEnd] = props.marginInline.split(' ')
+    return {
+      ...transformSize('marginInlineStart', marginInlineStart),
+      ...transformSize('marginInlineEnd', marginInlineEnd || marginInlineStart)
+    }
+  },
+  marginBlock: ({ props }) => {
+    if (!isString(props.marginBlock)) return
+    const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(' ')
+    return {
+      ...transformSize('marginBlockStart', marginBlockStart),
+      ...transformSize('marginBlockEnd', marginBlockEnd || marginBlockStart)
+    }
+  },
+  marginInlineStart: ({ props }) => transformSizeRatio('marginInlineStart', props),
+  marginInlineEnd: ({ props }) => transformSizeRatio('marginInlineEnd', props),
+  marginBlockStart: ({ props }) => transformSizeRatio('marginBlockStart', props),
+  marginBlockEnd: ({ props }) => transformSizeRatio('marginBlockEnd', props),
+
+  gap: ({ props }) => ({
+    gap: transfromGap(props.gap)
+  }),
+
+  columnGap: ({ props }) => getSpacingBasedOnRatio(props, 'columnGap'),
+  rowGap: ({ props }) => getSpacingBasedOnRatio(props, 'rowGap'),
+
+  flexWrap: ({ props }) => ({
+    display: 'flex',
+    flexFlow: (props.flexFlow || 'row').split(' ')[0] + ' ' + props.flexWrap
+  }),
+  flexFlow: ({ props }) => {
+    const { flexFlow, reverse } = props
+    if (!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'
+    return {
+      display: 'flex',
+      flexFlow: (direction || '') + (!direction.includes('-reverse') && reverse ? '-reverse' : '') + ' ' + (wrap || '')
+    }
+  },
+  flexAlign: ({ props }) => {
+    if (!isString(props.flexAlign)) return
+    const [alignItems, justifyContent] = props.flexAlign.split(' ')
+    return {
+      display: 'flex',
+      alignItems,
+      justifyContent
+    }
+  }
+
+}

package/src/props/font.js

@@ -0,0 +1,17 @@
+'use strict'
+
+import { getFontSizeByKey, getFontFamily } from '@symbo.ls/scratch'
+
+export const FONT_PROPS = {
+  fontSize: (el) => {
+    const { props } = el
+    return props.fontSize ? getFontSizeByKey(props.fontSize) : null
+  },
+  fontFamily: ({ props }) => ({
+    fontFamily: getFontFamily(props.fontFamily) || props.fontFamily
+  }),
+  fontWeight: ({ props }) => ({
+    fontWeight: props.fontWeight,
+    fontVariationSettings: '"wght" ' + props.fontWeight
+  })
+}

package/src/props/index.js

@@ -0,0 +1,9 @@
+'use strict'
+
+export * from './animation'
+export * from './block'
+export * from './font'
+export * from './misc'
+export * from './position'
+export * from './theme'
+export * from './timing'

package/src/props/misc.js

@@ -0,0 +1,17 @@
+'use strict'
+
+export const MISC_PROPS = {
+  overflow: ({ props, deps }) => !deps.isUndefined(props.overflow) && ({
+    overflow: props.overflow,
+    scrollBehavior: 'smooth'
+  }),
+  cursor: (el, s, ctx) => {
+    let val = el.props.cursor
+    if (!val) return
+
+    const file = ctx.files && ctx.files[val]
+    if (file && file.content) val = `url(${file.content.src})`
+
+    return ({ cursor: val })
+  }
+}

package/src/props/position.js

@@ -0,0 +1,37 @@
+'use strict'
+
+import { getSpacingByKey } from '@symbo.ls/scratch'
+
+export 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 => getSpacingByKey(v, 'k').k).join(' ') }
+  },
+
+  left: ({ props }) => getSpacingByKey(props.left, 'left'),
+  top: ({ props }) => getSpacingByKey(props.top, 'top'),
+  right: ({ props }) => getSpacingByKey(props.right, 'right'),
+  bottom: ({ props }) => getSpacingByKey(props.bottom, 'bottom'),
+
+  verticalInset: ({ props }) => {
+    const { verticalInset } = props
+    if (typeof verticalInset !== 'string') return
+    const vi = verticalInset.split(' ').map(v => 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 => getSpacingByKey(v, 'k').k)
+    return {
+      left: vi[0],
+      right: vi[1] || vi[0]
+    }
+  }
+}

package/src/props/theme.js

@@ -0,0 +1,149 @@
+'use strict'
+
+import {
+  getMediaTheme,
+  getMediaColor,
+  transformTextStroke,
+  transformShadow,
+  transformBoxShadow,
+  transformBorder,
+  transformBackgroundImage,
+  transformSizeRatio
+} from '@symbo.ls/scratch'
+
+import { 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
+}
+
+export 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 getMediaTheme(themeAppliedInVal)
+    } else if (props.theme.includes('@{globalTheme}')) props.theme.replace('@{globalTheme}', globalThemeForced)
+    return getMediaTheme(props.theme, `@${props.themeModifier || globalTheme}`)
+  },
+
+  color: (element) => {
+    const { props } = element
+    const globalTheme = getSystemGlobalTheme(element)
+    if (!props.color) return
+    return {
+      color: getMediaColor(props.color, globalTheme)
+    }
+  },
+
+  background: (element) => {
+    const { props } = element
+    const globalTheme = getSystemGlobalTheme(element)
+    if (!props.background) return
+    return {
+      background: getMediaColor(props.background, globalTheme)
+    }
+  },
+
+  backgroundColor: (element) => {
+    const { props } = element
+    const globalTheme = getSystemGlobalTheme(element)
+    if (!props.backgroundColor) return
+    return {
+      backgroundColor: 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: transformBackgroundImage(val, globalTheme)
+    })
+  },
+
+  backgroundSize: ({ props }) => ({
+    backgroundSize: props.backgroundSize
+  }),
+
+  backgroundPosition: ({ props }) => ({
+    backgroundPosition: props.backgroundPosition
+  }),
+
+  backgroundRepeat: ({ props }) => ({
+    backgroundRepeat: props.backgroundRepeat
+  }),
+
+  textStroke: ({ props }) => ({
+    WebkitTextStroke: transformTextStroke(props.textStroke)
+  }),
+
+  outline: ({ props }) => ({
+    outline: transformBorder(props.outline)
+  }),
+
+  outlineOffset: ({ props }) => transformSizeRatio('outlineOffset', props),
+
+  border: ({ props }) => ({
+    border: transformBorder(props.border)
+  }),
+
+  borderColor: (element) => {
+    const { props } = element
+    const globalTheme = getSystemGlobalTheme(element)
+    if (!props.borderColor) return
+    return {
+      borderColor: getMediaColor(props.borderColor, globalTheme)
+    }
+  },
+  borderLeft: ({ props }) => ({
+    borderLeft: transformBorder(props.borderLeft)
+  }),
+  borderTop: ({ props }) => ({
+    borderTop: transformBorder(props.borderTop)
+  }),
+  borderRight: ({ props }) => ({
+    borderRight: transformBorder(props.borderRight)
+  }),
+  borderBottom: ({ props }) => ({
+    borderBottom: transformBorder(props.borderBottom)
+  }),
+
+  shadow: (element) => {
+    const { props } = element
+    const globalTheme = getSystemGlobalTheme(element)
+    if (!props.backgroundImage) return
+    return ({
+      boxShadow: transformShadow(props.shadow, globalTheme)
+    })
+  },
+
+  boxShadow: (element, state, context) => {
+    const { props } = element
+    if (!isString(props.boxShadow)) return
+    const [val, hasImportant] = props.boxShadow.split('!importan')
+    const globalTheme = getSystemGlobalTheme(element)
+    const important = hasImportant ? ' !important' : ''
+    return {
+      boxShadow: transformBoxShadow(val.trim(), globalTheme) + important
+    }
+  },
+
+  textShadow: ({ props, context }) => ({
+    textShadow: transformBoxShadow(props.textShadow, context.designSystem.globalTheme)
+  }),
+
+  columnRule: ({ props }) => ({
+    columnRule: transformBorder(props.columnRule)
+  })
+}

package/src/props/timing.js

@@ -0,0 +1,26 @@
+'use strict'
+
+import {
+  getTimingFunction,
+  splitTransition,
+  transformDuration
+} from '@symbo.ls/scratch'
+
+export const TIMING_PROPS = {
+  transition: ({ props }) => ({
+    transition: splitTransition(props.transition)
+  }),
+  transitionDuration: ({ props }) => ({
+    transitionDuration: transformDuration(props.transitionDuration)
+  }),
+  transitionDelay: ({ props }) => ({
+    transitionDelay: transformDuration(props.transitionDelay)
+  }),
+  transitionTimingFunction: ({ props }) => ({
+    transitionTimingFunction: getTimingFunction(props.transitionTimingFunction)
+  }),
+  transitionProperty: ({ props }) => ({
+    transitionProperty: props.transitionProperty,
+    willChange: props.transitionProperty
+  })
+}

package/src/registry.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import { mergeArray } from '@domql/utils'
+import * as preprocs from './props'
 
 import {
   Shape,
@@ -31,3 +32,5 @@ export const CSS_PROPS_REGISTRY = mergeArray([
   XYZ,
   Animation
 ]).class
+
+export const CSS_PREPROCS_DEFAULTS = mergeArray(Object.values(preprocs))

package/src/transform.js

@@ -3,35 +3,84 @@
 import { merge, deepMerge, isFunction, isObject, isArray } from '@domql/utils'
 import { keySetters } from '@symbo.ls/atoms'
 
-import { CSS_PROPS_REGISTRY } from './registry'
+import { CSS_PREPROCS_DEFAULTS } from './registry'
+import { DEFAULT_CSS_PROPERTIES_LIST } from './defaults'
+
+export const transformClassname = (
+  element,
+  restProps = {}
+) => {
+  const classCss = {}
+  const { props, class: elementClass } = element
 
-export const transformClassname = (props, context = {}, registry = CSS_PROPS_REGISTRY, excludedProps = {}, element) => {
-  const CLASS_NAMES = {}
   if (!isObject(props)) return
 
-  merge(element.class, registry)
-  if (Object.keys(registry)[0] !== Object.keys(CSS_PROPS_REGISTRY)[0]) {
-    merge(element.class, CSS_PROPS_REGISTRY)
-  }
+  // merge(elementClass, registry)
+  // if (registry && Object.keys(registry)[0] !== Object.keys(CSS_PROPS_REGISTRY)[0]) {
+  //   merge(elementClass, CSS_PROPS_REGISTRY)
+  // }
 
   for (const key in props) {
     const setter = keySetters[key.slice(0, 1)]
-    const hasCSS = registry[key]
+    const hasCSS = elementClass[key]
 
-    if (setter) setter(key, props[key], CLASS_NAMES, element, true)
+    if (setter) setter(key, props[key], classCss, element, true)
     else if (isFunction(hasCSS)) {
       // const stack = hasCSS(element)
-      const stack = hasCSS({ ...element, props, context })
+      const stack = hasCSS(element, element.state, element.context)
       const exec = isArray(stack)
         ? stack.reduce((a, c) => {
           return merge(a, c)
         }, {})
         : stack
-      deepMerge(CLASS_NAMES, exec)
+      deepMerge(classCss, exec)
     } else if (key === 'style') {
-      deepMerge(CLASS_NAMES, props[key])
-    } else excludedProps[key] = props[key]
+      deepMerge(classCss, props[key])
+    } else restProps[key] = props[key]
+  }
+
+  return classCss
+}
+
+export const extractCSSfromProps = (element) => {
+  const { props: defProps } = element
+  const css = {}
+  const props = {}
+
+  for (const key in defProps) {
+    const val = defProps[key]
+
+    const mediaProp = keySetters[key.slice(0, 1)]
+    if (mediaProp) {
+      mediaProp(key, defProps[key], css, element, true)
+      continue
+    }
+
+    const preprop = CSS_PREPROCS_DEFAULTS[key]
+    if (preprop) {
+      // const stack = hasCSS(element)
+      const stack = preprop(element, element.state, element.context)
+      const exec = isArray(stack)
+        ? stack.reduce((a, c) => {
+          return merge(a, c)
+        }, {})
+        : stack
+      deepMerge(css, exec)
+      continue
+    }
+
+    if (key === 'style') {
+      deepMerge(css, defProps[key])
+      continue
+    }
+
+    if (DEFAULT_CSS_PROPERTIES_LIST.includes(key)) {
+      css[key] = val
+      continue
+    }
+
+    props[key] = val
   }
 
-  return CLASS_NAMES
+  return { css, props }
 }