@tamagui/core 1.0.0-beta.230 → 1.0.0-beta.5

package/dist/jsx/helpers/createPropMapper.js

@@ -4,29 +4,32 @@ import { getConfig } from "../conf";
 import { isWeb } from "../constants/platform";
 import { isVariable } from "../createVariable";
 import { isObj } from "./isObj";
-const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
-  const variants = staticConfig.variants || {};
-  function getVariantFunction(variant, key, value) {
-    for (const cat in tokenCategories) {
-      if (key in tokenCategories[cat]) {
-        const spreadVariant = variant[`...${cat}`];
-        if (spreadVariant) {
-          return spreadVariant;
-        }
+function getVariantFunction(variant, key, value) {
+  if (typeof variant === "function") {
+    return variant;
+  }
+  for (const cat in tokenCategories) {
+    if (key in tokenCategories[cat]) {
+      const spreadVariant = variant[`...${cat}`];
+      if (spreadVariant) {
+        return spreadVariant;
       }
     }
-    let fn;
-    if (typeof value === "number") {
-      fn = variant[":number"];
-    } else if (typeof value === "string") {
-      fn = variant[":string"];
-    } else if (value === true || value === false) {
-      fn = variant[":boolean"];
-    }
-    fn = fn || variant[value];
-    return fn || variant["..."] || variant["...size"];
   }
-  __name(getVariantFunction, "getVariantFunction");
+  let fn;
+  if (typeof value === "number") {
+    fn = variant[":number"];
+  } else if (typeof value === "string") {
+    fn = variant[":string"];
+  } else if (value === true || value === false) {
+    fn = variant[":boolean"];
+  }
+  fn = fn || variant[value];
+  return fn || variant["..."] || variant["...size"];
+}
+__name(getVariantFunction, "getVariantFunction");
+const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
+  const variants = staticConfig.variants || {};
   const defaultProps = staticConfig.defaultProps || {};
   return (key, value, theme, props, returnVariablesAs = !!props.animation ? "value" : "auto", avoidDefaultProps = false) => {
     const conf = getConfig();
@@ -34,13 +37,15 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
       console.trace("no conf! err");
       return;
     }
-    let fontFamily = props.fontFamily || defaultProps.fontFamily || "$body";
+    const fontFamily = props.fontFamily || defaultProps.fontFamily || "$body";
     const variant = variants && variants[key];
     if (variant && value !== void 0) {
       let variantValue = getVariantFunction(variant, key, value);
       if (variantValue) {
         if (typeof variantValue === "function") {
-          variantValue = variantValue(value, {
+          const fn = variantValue;
+          variantValue = fn(value, {
+            fonts: conf.fontsParsed,
             tokens: conf.tokensParsed,
             theme,
             props: avoidDefaultProps ? props : new Proxy(props, {
@@ -48,8 +53,8 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
                 if (Reflect.has(target, key2)) {
                   return Reflect.get(target, key2);
                 }
-                if (staticConfig.defaultProps) {
-                  return Reflect.get(staticConfig.defaultProps, key2);
+                if (defaultProps) {
+                  return Reflect.get(defaultProps, key2);
                 }
               }
             })
@@ -58,7 +63,7 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
         if (isObj(variantValue)) {
           variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs);
         }
-        return variantValue;
+        return expansions(variantValue);
       }
     }
     let shouldReturn = false;
@@ -75,9 +80,9 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
       }
     }
     if (shouldReturn) {
-      return {
+      return expansions({
         [key]: value
-      };
+      });
     }
   };
 }, "createPropMapper");
@@ -107,34 +112,28 @@ const resolveTokens = /* @__PURE__ */ __name((input, conf, theme, fontFamily, re
   }
   return res;
 }, "resolveTokens");
-const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed }, theme, fontFamily = "$body", resolveAs) => {
-  var _a, _b, _c, _d, _e;
+const fontShorthand = {
+  fontSize: "size",
+  fontWeight: "weight"
+};
+const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, fontsParsed }, theme, fontFamily = "$body", resolveAs) => {
+  var _a, _b, _c;
   let valOrVar;
   let hasSet = false;
-  const valueName = value[0] === "$" ? value.slice(1) : value;
-  if (valueName in theme) {
-    valOrVar = theme[valueName];
+  if (value in theme) {
+    valOrVar = theme[value];
     hasSet = true;
   } else {
     switch (key) {
       case "fontFamily":
-        valOrVar = ((_a = tokensParsed.font[value]) == null ? void 0 : _a.family) || value;
+        valOrVar = ((_a = fontsParsed[value]) == null ? void 0 : _a.family) || value;
         hasSet = true;
         break;
       case "fontSize":
-        valOrVar = ((_b = tokensParsed.font[fontFamily]) == null ? void 0 : _b.size[value]) || value;
-        hasSet = true;
-        break;
       case "lineHeight":
-        valOrVar = ((_c = tokensParsed.font[fontFamily]) == null ? void 0 : _c.lineHeight[value]) || value;
-        hasSet = true;
-        break;
       case "letterSpacing":
-        valOrVar = ((_d = tokensParsed.font[fontFamily]) == null ? void 0 : _d.letterSpacing[value]) || value;
-        hasSet = true;
-        break;
       case "fontWeight":
-        valOrVar = ((_e = tokensParsed.font[fontFamily]) == null ? void 0 : _e.weight[value]) || value;
+        valOrVar = ((_c = (_b = fontsParsed[fontFamily]) == null ? void 0 : _b[fontShorthand[key] || key]) == null ? void 0 : _c[value]) || value;
         hasSet = true;
         break;
     }
@@ -160,7 +159,7 @@ const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed }, theme, fo
   }
   if (process.env.NODE_ENV === "development") {
     if (value && value[0] === "$") {
-      console.warn(`\u26A0\uFE0F Missing token in theme:`, value, theme);
+      console.warn(`\u26A0\uFE0F Missing token:`, key, value, fontFamily, theme, fontsParsed);
       return null;
     }
   }
@@ -201,6 +200,37 @@ const tokenCategories = {
     borderRightColor: true
   }
 };
+const sidesX = ["Left", "Right"];
+const sidesY = ["Top", "Bottom"];
+const sidesXY = [...sidesX, ...sidesY];
+const expand = {
+  padding: sidesXY.map((x) => `padding${x}`),
+  paddingHorizontal: sidesX.map((x) => `padding${x}`),
+  paddingVertical: sidesY.map((x) => `padding${x}`),
+  margin: sidesXY.map((x) => `margin${x}`),
+  marginHorizontal: sidesX.map((x) => `margin${x}`),
+  marginVertical: sidesY.map((x) => `margin${x}`)
+};
+function expansions(styleObj) {
+  var _a, _b;
+  for (const key in expand) {
+    if (key in styleObj) {
+      for (const expandKey of expand[key]) {
+        styleObj[expandKey] = styleObj[key];
+      }
+      delete styleObj[key];
+    }
+  }
+  if ("flex" in styleObj) {
+    if (typeof styleObj.flex === "number") {
+      styleObj.flexGrow = (_a = styleObj.flexGrow) != null ? _a : styleObj.flex;
+      styleObj.flexShrink = (_b = styleObj.flexShrink) != null ? _b : 1;
+      delete styleObj.flex;
+    }
+  }
+  return styleObj;
+}
+__name(expansions, "expansions");
 export {
   createPropMapper
 };

package/dist/jsx/helpers/extendStaticConfig.js

@@ -2,12 +2,9 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { stylePropsView } from "@tamagui/helpers";
 import { createPropMapper } from "./createPropMapper";
-function extendStaticConfig(parent, config = {}) {
+function extendStaticConfig(config, parent) {
   var _a;
-  if (!parent) {
-    throw new Error("no parent");
-  }
-  if (!("staticConfig" in parent)) {
+  if (!parent || !("staticConfig" in parent)) {
     return parseStaticConfig(config);
   }
   const variants = {
@@ -38,9 +35,15 @@ function extendStaticConfig(parent, config = {}) {
       ...parent.staticConfig.validStyles,
       ...config.validStyles
     } : parent.staticConfig.validStyles || stylePropsView,
+    defaultVariants: {
+      ...parent.staticConfig.defaultVariants,
+      ...config.defaultVariants
+    },
     defaultProps: {
       ...parent.staticConfig.defaultProps,
-      ...config.defaultProps
+      ...parent.staticConfig.defaultVariants,
+      ...config.defaultProps,
+      ...config.defaultVariants
     }
   });
 }

package/dist/jsx/helpers/fixNativeShadow.native.js

@@ -1,30 +1,34 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 const matchRgbaHsla = /(rgba|hsla)\(\s*([\d\.]{1,}%?)\s*,\s*([\d\.]{1,}%?)\s*,\s*([\d\.]{1,}%?)\s*,\s*([\d\.]{1,})\s*\)$/;
-function fixNativeShadow(props) {
-  if (!props.shadowColor) {
+function fixNativeShadow(styles) {
+  const color = styles.find((x) => x[0] === "shadowColor");
+  if (!color) {
     return;
   }
-  if (!props.shadowOffset) {
-    props.shadowOffset = {
-      width: 0,
-      height: 0
-    };
+  if (!styles.find((x) => x[0] === "shadowOffset")) {
+    styles.push([
+      "shadowOffset",
+      {
+        width: 0,
+        height: 0
+      }
+    ]);
   }
-  if ("shadowOpacity" in props) {
+  if (styles.find((x) => x[0] === "shadowOpacity")) {
     return;
   }
-  const c = `${props.shadowColor}`;
+  const c = `${color[1]}`;
   if ((c[0] === "r" || c[0] === "h") && c[3] === "a") {
     const [_, type, _1, _2, _3, a] = c.match(matchRgbaHsla) || [];
     if (typeof a !== "string") {
-      console.warn("invalid", c, type);
-      return;
+      console.trace("invalid", c, type);
+      throw new Error(`invalid style`);
     }
-    props.shadowColor = `${type.replace("a", "")}(${_1},${_2},${_3})`;
-    props.shadowOpacity = +a;
+    styles.push(["shadowColor", `${type.replace("a", "")}(${_1},${_2},${_3})`]);
+    styles.push(["shadowOpacity", +a]);
   } else {
-    props.shadowOpacity = 1;
+    styles.push(["shadowOpacity", 1]);
   }
 }
 __name(fixNativeShadow, "fixNativeShadow");

package/dist/jsx/helpers/getSize.js

@@ -0,0 +1,12 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { getTokens } from "../conf";
+const getSize = /* @__PURE__ */ __name((size, sizeUpOrDownBy = 0) => {
+  const sizes = getTokens().size;
+  const sizeNames = Object.keys(sizes);
+  const key = sizeNames[Math.max(0, sizeNames.indexOf(String(size || "$4")) + sizeUpOrDownBy)];
+  return sizes[key] || sizes["$4"];
+}, "getSize");
+export {
+  getSize
+};

package/dist/jsx/helpers/getSplitStyles.js

@@ -7,33 +7,31 @@ import {
   validPseudoKeys,
   validStyles
 } from "@tamagui/helpers";
-import { isWeb } from "../constants/platform";
+import { useInsertionEffect } from "react";
+import { getConfig } from "../conf";
+import { isClient, isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
 import { mediaQueryConfig, mediaState } from "../hooks/useMedia";
 import { createMediaStyle } from "./createMediaStyle";
 import { fixNativeShadow } from "./fixNativeShadow";
 import { getStylesAtomic } from "./getStylesAtomic";
-import { insertStyleRule, insertedTransforms, updateInserted } from "./insertStyleRule";
-const skipKeys = {
+import {
+  insertStyleRule,
+  insertedTransforms,
+  updateInserted,
+  updateInsertedCache
+} from "./insertStyleRule";
+const skipProps = {
   animation: true,
-  animated: true,
-  children: true,
-  key: true,
-  ref: true
+  animateOnly: true,
+  debug: true
 };
-function normalizeStyleObject(style) {
-  var _a, _b;
-  if (typeof style.flex === "number") {
-    const val = style.flex;
-    delete style.flex;
-    style.flexGrow = (_a = style.flexGrow) != null ? _a : val;
-    style.flexShrink = (_b = style.flexShrink) != null ? _b : 1;
-  }
-  if (!isWeb) {
-    fixNativeShadow(style);
-  }
-}
-__name(normalizeStyleObject, "normalizeStyleObject");
+let conf;
 const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames) => {
+  var _a;
+  if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+    console.log("  \xBB getSplitStyles", { props, state, defaultClassNames });
+  }
+  conf = conf || getConfig();
   const validStyleProps = staticConfig.isText ? stylePropsText : validStyles;
   const viewProps = {};
   const style = {};
@@ -42,27 +40,51 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
   };
   const pseudos = {};
   const medias = {};
+  const rulesToInsert = [];
+  function addStyle(prop, rule) {
+    rulesToInsert.push([prop, rule]);
+    updateInsertedCache(prop, rule);
+  }
+  __name(addStyle, "addStyle");
   let cur = null;
   let transforms = {};
   function mergeClassName(key, val) {
-    if (!val)
+    if (!val) {
       return;
+    }
     if (val.startsWith("_transform-")) {
       const isMediaOrPseudo = key !== "transform";
       const isMedia = isMediaOrPseudo && key[11] === "_";
-      const isPsuedo = isMediaOrPseudo && key[11] === "0";
+      const isPsuedo = isMediaOrPseudo && key[11] === "0" || key.endsWith("Style");
       const namespace = isMedia ? key.split("_")[2] : isPsuedo ? key.split("-")[1] : "transform";
-      if (!insertedTransforms[val]) {
-        updateInserted();
-      }
-      const transform = insertedTransforms[val];
-      if (!transform || transform === "undefined") {
-        console.trace("NO TRANSFORM", { key, val }, state);
-        return;
+      let transform = insertedTransforms[val];
+      if (isClient) {
+        if (!transform) {
+          updateInserted();
+          transform = insertedTransforms[val];
+        }
+        if (!transform) {
+          if (isWeb && val[0] !== "_") {
+            transform = val;
+          } else {
+            console.trace("?", key, val, cur, props, state);
+          }
+        }
+        if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+          console.log("  \xBB getSplitStyles mergeClassName transform", { key, val, namespace, transform, insertedTransforms });
+        }
+        if (process.env.NODE_ENV === "development") {
+          if (!transform) {
+            console.trace("NO TRANSFORM?", { key, val, transform });
+          }
+        }
       }
       transforms[namespace] = transforms[namespace] || ["", ""];
-      transforms[namespace][0] += val.replace("_transform", "");
-      transforms[namespace][1] += transform;
+      const identifier = val.replace("_transform", "");
+      transforms[namespace][0] += identifier;
+      if (transform) {
+        transforms[namespace][1] += transform;
+      }
     } else {
       classNames[key] = val;
     }
@@ -72,18 +94,21 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
     if (!cur)
       return;
     normalizeStyleObject(cur);
+    if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+      console.log("  \xBB getSplitStyles push", cur, state);
+    }
     if (isWeb && !state.noClassNames) {
       const atomic = getStylesAtomic(cur);
       for (const atomicStyle of atomic) {
         if (!state.noClassNames) {
+          addStyle(atomicStyle.identifier, atomicStyle.rules[0]);
           mergeClassName(atomicStyle.property, atomicStyle.identifier);
-          insertStyleRule(atomicStyle.identifier, atomicStyle.rules[0]);
         } else {
           style[atomicStyle.property] = atomicStyle.value;
         }
       }
     }
-    if (state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both") {
+    if (!isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both") {
       for (const key in cur) {
         if (key in stylePropsTransform) {
           mergeTransform(style, key, cur[key]);
@@ -96,27 +121,34 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
   }
   __name(push, "push");
   for (const keyInit in props) {
+    if (skipProps[keyInit]) {
+      continue;
+    }
     const valInit = props[keyInit];
-    if (skipKeys[keyInit]) {
-      viewProps[keyInit] = valInit;
+    if (keyInit === "style" || keyInit.startsWith("_style")) {
+      push();
+      cur = valInit;
+      push();
       continue;
     }
     if (keyInit === "className" || validStyleProps[keyInit] && valInit && valInit[0] === "_") {
       push();
       mergeClassName(keyInit, valInit);
-      if (cur) {
-        if (cur[keyInit])
-          console.warn("just want to see how used");
-        delete cur[keyInit];
-      }
       continue;
     }
+    if (state.keepVariantsAsProps && staticConfig.defaultVariants && keyInit in staticConfig.defaultVariants) {
+      viewProps[keyInit] = valInit;
+    }
     let isMedia = keyInit[0] === "$";
     let isPseudo = validPseudoKeys[keyInit];
+    if (!isMedia && !isPseudo && !((_a = staticConfig.variants) == null ? void 0 : _a[keyInit]) && !validStyleProps[keyInit] && !conf.shorthands[keyInit]) {
+      viewProps[keyInit] = valInit;
+      continue;
+    }
     const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, state.fallbackProps || props, state.resolveVariablesAs);
     const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out);
     if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
-      console.log("split style", keyInit, expanded);
+      console.log("  \xBB getSplitStyles", keyInit, expanded);
     }
     for (const [key, val] of expanded) {
       if (val === void 0) {
@@ -142,41 +174,42 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
         if (isWeb && !state.noClassNames) {
           const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] });
           for (const style2 of pseudoStyles) {
+            addStyle(style2.identifier, style2.rules[0]);
             mergeClassName(`${style2.property}-${key}`, style2.identifier);
-            insertStyleRule(style2.identifier, style2.rules[0]);
           }
         }
         continue;
       }
       if (isMedia) {
-        const mediaKey = key.slice(1);
-        if (!mediaQueryConfig[mediaKey]) {
+        const mediaKey = key;
+        const mediaKeyShort = mediaKey.slice(1);
+        if (!mediaQueryConfig[mediaKeyShort]) {
           viewProps[key] = val;
           continue;
         }
-        const mediaStyle = getSubStyle(val, staticConfig, theme, props, state, true);
-        if (isWeb) {
+        const mediaStyle = getSubStyle(val, staticConfig, theme, props, state);
+        if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+          console.log("  \xBB getSplitStyles mediaStyle", mediaKey, mediaStyle, props);
+        }
+        const shouldDoClasses = isWeb && !state.noClassNames;
+        if (shouldDoClasses) {
           const mediaStyles = getStylesAtomic(mediaStyle);
           for (const style2 of mediaStyles) {
-            const out2 = createMediaStyle(style2, mediaKey, mediaQueryConfig);
+            const out2 = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig);
+            addStyle(out2.identifier, out2.styleRule);
             mergeClassName(`${out2.identifier}-${mediaKey}`, out2.identifier);
-            insertStyleRule(out2.identifier, out2.styleRule);
-          }
-          if (mediaState[mediaKey]) {
-            Object.assign(medias, mediaStyle);
           }
         } else {
           if (mediaState[mediaKey]) {
-            Object.assign(style, mediaStyle);
+            push();
+            if (process.env.NODE_ENV === "development" && props["debug"]) {
+              console.log("apply media style", mediaKey, mediaState);
+            }
+            Object.assign(shouldDoClasses ? medias : style, mediaStyle);
           }
         }
         continue;
       }
-      if (key === "style" || key.startsWith("_style")) {
-        push();
-        Object.assign(style, val);
-        continue;
-      }
       if (!isWeb && key === "pointerEvents") {
         viewProps[key] = val;
         continue;
@@ -199,24 +232,44 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
     for (const namespace in transforms) {
       const [hash, val] = transforms[namespace];
       const identifier = `_transform${hash}`;
-      if (!insertedTransforms[identifier]) {
-        const rule = `.${identifier} { transform: ${val}; }`;
-        insertStyleRule(identifier, rule);
+      if (isClient) {
+        if (!insertedTransforms[identifier]) {
+          const rule = `.${identifier} { transform: ${val}; }`;
+          addStyle(identifier, rule);
+        }
       }
       classNames[namespace] = identifier;
     }
   }
   if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
-    console.log("out", pseudos);
+    console.log("  \xBB getSplitStyles out", { style, pseudos, medias, classNames, viewProps, state });
   }
   return {
     viewProps,
     style,
     medias,
     pseudos,
-    classNames
+    classNames,
+    rulesToInsert
   };
 }, "getSplitStyles");
+const insertSplitStyles = /* @__PURE__ */ __name((...args) => {
+  const res = getSplitStyles(...args);
+  for (const [prop, rule] of res.rulesToInsert) {
+    insertStyleRule(prop, rule);
+  }
+  return res;
+}, "insertSplitStyles");
+const effect = useInsertionEffect || useIsomorphicLayoutEffect;
+const useSplitStyles = /* @__PURE__ */ __name((...args) => {
+  const res = getSplitStyles(...args);
+  effect(() => {
+    for (const [prop, rule] of res.rulesToInsert) {
+      insertStyleRule(prop, rule);
+    }
+  });
+  return res;
+}, "useSplitStyles");
 const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, state, avoidDefaultProps) => {
   const styleOut = {};
   for (const key in styleIn) {
@@ -234,7 +287,16 @@ const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props,
   normalizeStyleObject(styleOut);
   return styleOut;
 }, "getSubStyle");
+function normalizeStyleObject(style) {
+  if (!isWeb) {
+    fixNativeShadow(style);
+  }
+}
+__name(normalizeStyleObject, "normalizeStyleObject");
 export {
   getSplitStyles,
-  getSubStyle
+  getSubStyle,
+  insertSplitStyles,
+  normalizeStyleObject,
+  useSplitStyles
 };

package/dist/jsx/helpers/getStylesAtomic.js

@@ -5,6 +5,7 @@ import {
   mergeTransform,
   stylePropsTransform
 } from "@tamagui/helpers";
+import { getConfig } from "../conf";
 import { rnw } from "../constants/rnw";
 import { isVariable } from "../createVariable";
 function getStylesAtomic(stylesIn, options = {}) {
@@ -33,6 +34,7 @@ __name(getStylesAtomic, "getStylesAtomic");
 const generateAtomicStyles = /* @__PURE__ */ __name((style) => {
   return rnw.atomic(rnw.createCompileableStyle(rnw.createReactDOMStyle(style)));
 }, "generateAtomicStyles");
+let reversedShorthands = null;
 function getAtomicStyle(style, pseudo, options) {
   var _a;
   if (style == null || typeof style !== "object") {
@@ -56,16 +58,26 @@ function getAtomicStyle(style, pseudo, options) {
         ...out[key],
         transformProperty
       };
-      console.log("got", JSON.stringify({ t, tKey, out, key, atomicStyles }, null, 2));
     }
   } else {
     atomicStyles = generateAtomicStyles(style);
   }
+  if (!reversedShorthands) {
+    reversedShorthands = {};
+    const conf = getConfig();
+    if (conf.shorthands) {
+      for (const key in conf.shorthands) {
+        reversedShorthands[conf.shorthands[key]] = key;
+      }
+    }
+  }
   return Object.keys(atomicStyles).map((key) => {
     const val = atomicStyles[key];
-    const [_, ogProperty, hash] = val.identifier.split("-");
+    const [_, a, b] = val.identifier.split("-");
+    const hash = b || a;
     const psuedoPrefix = pseudo ? `0${pseudo.name}-` : "";
-    const identifier = `_${ogProperty}-${psuedoPrefix}${hash}`;
+    const shortProp = reversedShorthands[val.property] || val.property;
+    const identifier = `_${shortProp}-${psuedoPrefix}${hash}`;
     const className = `.${identifier}`;
     const rules = val.rules.map((rule) => {
       if (pseudo) {