@tamagui/static 1.0.1-beta.61 → 1.0.1-beta.62

package/dist/jsx/extractor/createExtractor.js

@@ -4,6 +4,7 @@ import { relative } from "path";
 import traverse from "@babel/traverse";
 import * as t from "@babel/types";
 import {
+  expandStyles,
   getSplitStyles,
   mediaQueryConfig,
   normalizeStyleObject,
@@ -342,7 +343,7 @@ function createExtractor() {
                 let keys = [name];
                 let out = null;
                 if (staticConfig.propMapper) {
-                  out = staticConfig.propMapper(name, styleValue, defaultTheme, staticConfig.defaultProps, { resolveVariablesAs: "auto" });
+                  out = staticConfig.propMapper(name, styleValue, defaultTheme, staticConfig.defaultProps, { resolveVariablesAs: "auto" }, void 0, shouldPrintDebug);
                   if (out) {
                     if (!Array.isArray(out)) {
                       console.warn(`Error expected array but got`, out);
@@ -371,7 +372,7 @@ function createExtractor() {
                       attr: path.node
                     };
                   }
-                  if (validHTMLAttributes[key]) {
+                  if (validHTMLAttributes[key] || key.startsWith("aria-") || key.startsWith("data-")) {
                     return attr;
                   }
                   if (shouldPrintDebug) {
@@ -994,35 +995,47 @@ function createExtractor() {
               press: false,
               pressIn: false
             };
-            const completeStaticProps = Object.keys(attrs).reduce((acc, index) => {
-              const cur = attrs[index];
+            let foundStaticProps = {};
+            for (const key in attrs) {
+              const cur = attrs[key];
               if (cur.type === "style") {
                 normalizeStyleObject(cur.value);
-                Object.assign(acc, cur.value);
+                foundStaticProps = {
+                  ...foundStaticProps,
+                  ...expandStyles(cur.value)
+                };
+                continue;
               }
               if (cur.type === "attr") {
                 if (t.isJSXSpreadAttribute(cur.value)) {
-                  return acc;
+                  continue;
                 }
                 if (!t.isJSXIdentifier(cur.value.name)) {
-                  return acc;
+                  continue;
                 }
-                const key = cur.value.name.name;
+                const key2 = cur.value.name.name;
                 const value = attemptEvalSafe(cur.value.value || t.booleanLiteral(true));
-                if (value === FAILED_EVAL) {
-                  return acc;
+                if (value !== FAILED_EVAL) {
+                  foundStaticProps = {
+                    ...foundStaticProps,
+                    [key2]: value
+                  };
                 }
-                acc[key] = value;
               }
-              return acc;
-            }, {});
-            const completeProps = {
-              ...staticConfig.defaultProps,
-              ...completeStaticProps
-            };
+            }
+            const completeProps = {};
+            for (const key in staticConfig.defaultProps) {
+              if (!(key in foundStaticProps)) {
+                completeProps[key] = staticConfig.defaultProps[key];
+              }
+            }
+            for (const key in foundStaticProps) {
+              completeProps[key] = foundStaticProps[key];
+            }
             if (shouldPrintDebug) {
               console.log("  - attrs (combined \u{1F500}): \n", logLines(attrs.map(attrStr).join(", ")));
               console.log("  - defaultProps: \n", logLines(objToStr(staticConfig.defaultProps)));
+              console.log("  - foundStaticProps: \n", logLines(objToStr(foundStaticProps)));
               console.log("  - completeProps: \n", logLines(objToStr(completeProps)));
             }
             const getStyles = /* @__PURE__ */ __name((props2, debugName = "") => {
@@ -1044,7 +1057,7 @@ function createExtractor() {
                 const out = getSplitStyles(props2, staticConfig, defaultTheme, {
                   ...state,
                   fallbackProps: completeProps
-                });
+                }, void 0, props2["debug"]);
                 const outStyle = {
                   ...out.style,
                   ...out.pseudos
@@ -1068,7 +1081,7 @@ function createExtractor() {
             if (!completeStyles) {
               throw new Error(`Impossible, no styles`);
             }
-            const addInitialStyleKeys = shouldFlatten ? difference(Object.keys(completeStyles), Object.keys(completeStaticProps)) : [];
+            const addInitialStyleKeys = shouldFlatten ? difference(Object.keys(completeStyles), Object.keys(foundStaticProps)) : [];
             if (addInitialStyleKeys.length) {
               const toAdd = pick(completeStyles, ...addInitialStyleKeys);
               const firstGroup = attrs.find((x) => x.type === "style");
@@ -1084,14 +1097,11 @@ function createExtractor() {
             }
             if (shouldPrintDebug) {
               console.log("   -- addInitialStyleKeys", addInitialStyleKeys.join(", "), { shouldFlatten });
-              console.log("   -- completeStaticProps:\n", logLines(objToStr(completeStaticProps)));
               console.log("   -- completeStyles:\n", logLines(objToStr(completeStyles)));
             }
             let getStyleError = null;
             for (const attr of attrs) {
               try {
-                if (shouldPrintDebug)
-                  console.log("  *", attrStr(attr));
                 switch (attr.type) {
                   case "ternary":
                     const a = getStyles(attr.value.alternate, "ternary.alternate");
@@ -1105,7 +1115,7 @@ function createExtractor() {
                     continue;
                   case "style":
                     if (shouldPrintDebug)
-                      console.log("  * styles in", logLines(objToStr(attr.value)));
+                      console.log("  * styles in", attr.value);
                     const styles = getStyles(attr.value, "style");
                     if (shouldPrintDebug)
                       console.log("  * styles out", logLines(objToStr(styles)));
@@ -1118,6 +1128,9 @@ function createExtractor() {
                 getStyleError = err;
               }
             }
+            if (shouldPrintDebug) {
+              console.log("  - attrs (ternaries/combined):\n", logLines(attrs.map(attrStr).join(", ")));
+            }
             tm.mark("jsx-element-styles", shouldPrintDebug === "verbose");
             if (getStyleError) {
               console.log(" \u26A0\uFE0F postprocessing error, deopt", getStyleError);

package/dist/jsx/extractor/extractMediaStyle.js

@@ -43,7 +43,7 @@ function extractMediaStyle(ternary, jsxPath, tamaguiConfig, sourcePath, importan
       const screenStr = negate ? "not all" : "screen";
       const mediaQuery = `${screenStr} and ${mediaSelector}`;
       const precendencePrefix = mediaKeyPrecendence[key];
-      const styleInner = style.rules[0].replace(style.identifier, identifier);
+      const styleInner = style.rules.map((rule) => rule.replace(style.identifier, identifier)).join(";");
       let styleRule = "";
       if (styleInner.includes("@media")) {
         styleRule = styleInner.replace("{", ` and ${mediaQuery} {`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/static",
-  "version": "1.0.1-beta.61",
+  "version": "1.0.1-beta.62",
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
@@ -36,11 +36,11 @@
     "@babel/parser": "^7.15.7",
     "@babel/traverse": "^7.15.4",
     "@expo/match-media": "^0.3.0",
-    "@tamagui/build": "^1.0.1-beta.61",
-    "@tamagui/core-node": "^1.0.1-beta.61",
-    "@tamagui/fake-react-native": "^1.0.1-beta.61",
-    "@tamagui/helpers": "^1.0.1-beta.61",
-    "@tamagui/proxy-worm": "^1.0.1-beta.61",
+    "@tamagui/build": "^1.0.1-beta.62",
+    "@tamagui/core-node": "^1.0.1-beta.62",
+    "@tamagui/fake-react-native": "^1.0.1-beta.62",
+    "@tamagui/helpers": "^1.0.1-beta.62",
+    "@tamagui/proxy-worm": "^1.0.1-beta.62",
     "babel-literal-to-ast": "^2.1.0",
     "esbuild": "^0.14.36",
     "esbuild-register": "^3.3.2",
@@ -48,7 +48,7 @@
     "fs-extra": "^9.1.0",
     "invariant": "^2.2.4",
     "lodash": "^4.17.21",
-    "tamagui": "^1.0.1-beta.61"
+    "tamagui": "^1.0.1-beta.62"
   },
   "devDependencies": {
     "@babel/plugin-syntax-typescript": "^7.14.5",

package/src/extractor/createExtractor.ts

@@ -6,6 +6,7 @@ import {
   PseudoStyles,
   StaticConfigParsed,
   TamaguiInternalConfig,
+  expandStyles,
   getSplitStyles,
   mediaQueryConfig,
   normalizeStyleObject,
@@ -735,7 +736,9 @@ export function createExtractor() {
                     styleValue,
                     defaultTheme,
                     staticConfig.defaultProps,
-                    { resolveVariablesAs: 'auto' }
+                    { resolveVariablesAs: 'auto' },
+                    undefined,
+                    shouldPrintDebug
                   )
                   if (out) {
                     if (!Array.isArray(out)) {
@@ -769,7 +772,11 @@ export function createExtractor() {
                       attr: path.node,
                     } as const
                   }
-                  if (validHTMLAttributes[key]) {
+                  if (
+                    validHTMLAttributes[key] ||
+                    key.startsWith('aria-') ||
+                    key.startsWith('data-')
+                  ) {
                     return attr
                   }
                   if (shouldPrintDebug) {
@@ -1404,38 +1411,52 @@ export function createExtractor() {
             }
 
             // evaluates all static attributes into a simple object
-            const completeStaticProps = Object.keys(attrs).reduce((acc, index) => {
-              const cur = attrs[index] as ExtractedAttr
+            let foundStaticProps = {}
+            for (const key in attrs) {
+              const cur = attrs[key]
               if (cur.type === 'style') {
                 normalizeStyleObject(cur.value)
-                Object.assign(acc, cur.value)
+                foundStaticProps = {
+                  ...foundStaticProps,
+                  ...expandStyles(cur.value),
+                }
+                continue
               }
               if (cur.type === 'attr') {
                 if (t.isJSXSpreadAttribute(cur.value)) {
-                  return acc
+                  continue
                 }
                 if (!t.isJSXIdentifier(cur.value.name)) {
-                  return acc
+                  continue
                 }
                 const key = cur.value.name.name
                 // undefined = boolean true
                 const value = attemptEvalSafe(cur.value.value || t.booleanLiteral(true))
-                if (value === FAILED_EVAL) {
-                  return acc
+                if (value !== FAILED_EVAL) {
+                  foundStaticProps = {
+                    ...foundStaticProps,
+                    [key]: value,
+                  }
                 }
-                acc[key] = value
               }
-              return acc
-            }, {})
+            }
 
-            const completeProps = {
-              ...staticConfig.defaultProps,
-              ...completeStaticProps,
+            // must preserve exact order
+            const completeProps = {}
+            for (const key in staticConfig.defaultProps) {
+              if (!(key in foundStaticProps)) {
+                completeProps[key] = staticConfig.defaultProps[key]
+              }
+            }
+            for (const key in foundStaticProps) {
+              completeProps[key] = foundStaticProps[key]
             }
 
             if (shouldPrintDebug) {
               console.log('  - attrs (combined 🔀): \n', logLines(attrs.map(attrStr).join(', ')))
               console.log('  - defaultProps: \n', logLines(objToStr(staticConfig.defaultProps)))
+              // prettier-ignore
+              console.log('  - foundStaticProps: \n', logLines(objToStr(foundStaticProps)))
               console.log('  - completeProps: \n', logLines(objToStr(completeProps)))
             }
 
@@ -1454,10 +1475,17 @@ export function createExtractor() {
                 }
               }
               try {
-                const out = getSplitStyles(props, staticConfig, defaultTheme, {
-                  ...state,
-                  fallbackProps: completeProps,
-                })
+                const out = getSplitStyles(
+                  props,
+                  staticConfig,
+                  defaultTheme,
+                  {
+                    ...state,
+                    fallbackProps: completeProps,
+                  },
+                  undefined,
+                  props['debug']
+                )
                 const outStyle = {
                   ...out.style,
                   ...out.pseudos,
@@ -1503,7 +1531,7 @@ export function createExtractor() {
 
             // any extra styles added in postprocess should be added to first group as they wont be overriden
             const addInitialStyleKeys = shouldFlatten
-              ? difference(Object.keys(completeStyles), Object.keys(completeStaticProps))
+              ? difference(Object.keys(completeStyles), Object.keys(foundStaticProps))
               : []
 
             if (addInitialStyleKeys.length) {
@@ -1525,8 +1553,6 @@ export function createExtractor() {
               // prettier-ignore
               console.log('   -- addInitialStyleKeys', addInitialStyleKeys.join(', '), { shouldFlatten })
               // prettier-ignore
-              console.log('   -- completeStaticProps:\n', logLines(objToStr(completeStaticProps)))
-              // prettier-ignore
               console.log('   -- completeStyles:\n', logLines(objToStr(completeStyles)))
             }
 
@@ -1535,7 +1561,6 @@ export function createExtractor() {
             // fix up ternaries, combine final style values
             for (const attr of attrs) {
               try {
-                if (shouldPrintDebug) console.log('  *', attrStr(attr))
                 switch (attr.type) {
                   case 'ternary':
                     const a = getStyles(attr.value.alternate, 'ternary.alternate')
@@ -1545,8 +1570,7 @@ export function createExtractor() {
                     if (shouldPrintDebug) console.log('     => tern ', attrStr(attr))
                     continue
                   case 'style':
-                    // prettier-ignore
-                    if (shouldPrintDebug) console.log('  * styles in', logLines(objToStr(attr.value)))
+                    if (shouldPrintDebug) console.log('  * styles in', attr.value)
                     // expand variants and such
                     // get the keys we need
                     const styles = getStyles(attr.value, 'style')
@@ -1567,6 +1591,11 @@ export function createExtractor() {
               }
             }
 
+            if (shouldPrintDebug) {
+              // prettier-ignore
+              console.log('  - attrs (ternaries/combined):\n', logLines(attrs.map(attrStr).join(', ')))
+            }
+
             tm.mark('jsx-element-styles', shouldPrintDebug === 'verbose')
 
             if (getStyleError) {

package/src/extractor/extractMediaStyle.ts

@@ -60,7 +60,9 @@ export function extractMediaStyle(
       const screenStr = negate ? 'not all' : 'screen'
       const mediaQuery = `${screenStr} and ${mediaSelector}`
       const precendencePrefix = mediaKeyPrecendence[key]
-      const styleInner = style.rules[0].replace(style.identifier, identifier)
+      const styleInner = style.rules
+        .map((rule) => rule.replace(style.identifier, identifier))
+        .join(';')
       // combines media queries if they already exist
       let styleRule = ''
       if (styleInner.includes('@media')) {

package/types/extractor/createExtractor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createExtractor.d.ts","sourceRoot":"","sources":["../../src/extractor/createExtractor.ts"],"names":[],"mappings":"AAEA,OAAiB,EAAE,QAAQ,EAAW,MAAM,iBAAiB,CAAA;AAC7D,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AACjC,OAAO,EAGL,qBAAqB,EAQtB,MAAM,oBAAoB,CAAA;AAK3B,OAAO,EAIL,mBAAmB,EAEpB,MAAM,UAAU,CAAA;AAqCjB,oBAAY,SAAS,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA;AAI1D,wBAAgB,eAAe;;;;;;;;;;;;;;wBAqBb,SAAS,EAAE,OAAO,CAAC,GAAG,MAAM,0PAkBrC,mBAAmB;;;;;;EAqjD3B"}
+{"version":3,"file":"createExtractor.d.ts","sourceRoot":"","sources":["../../src/extractor/createExtractor.ts"],"names":[],"mappings":"AAEA,OAAiB,EAAE,QAAQ,EAAW,MAAM,iBAAiB,CAAA;AAC7D,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AACjC,OAAO,EAGL,qBAAqB,EAStB,MAAM,oBAAoB,CAAA;AAK3B,OAAO,EAIL,mBAAmB,EAEpB,MAAM,UAAU,CAAA;AAqCjB,oBAAY,SAAS,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA;AAI1D,wBAAgB,eAAe;;;;;;;;;;;;;;wBAqBb,SAAS,EAAE,OAAO,CAAC,GAAG,MAAM,0PAkBrC,mBAAmB;;;;;;EAilD3B"}

package/types/extractor/extractMediaStyle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"extractMediaStyle.d.ts","sourceRoot":"","sources":["../../src/extractor/extractMediaStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC1C,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AACjC,OAAO,EAAE,qBAAqB,EAAwC,MAAM,oBAAoB,CAAA;AAIhG,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAG/C,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,EAC/B,aAAa,EAAE,qBAAqB,EACpC,UAAU,EAAE,MAAM,EAClB,UAAU,SAAI,EACd,gBAAgB,GAAE,OAAO,GAAG,SAAiB;;;SAyE9C;AAiFD,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,EAC/B,IAAI,EAAE,CAAC,CAAC,UAAU,EAClB,UAAU,EAAE,MAAM,WAiBnB"}
+{"version":3,"file":"extractMediaStyle.d.ts","sourceRoot":"","sources":["../../src/extractor/extractMediaStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC1C,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AACjC,OAAO,EAAE,qBAAqB,EAAwC,MAAM,oBAAoB,CAAA;AAIhG,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAG/C,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,EAC/B,aAAa,EAAE,qBAAqB,EACpC,UAAU,EAAE,MAAM,EAClB,UAAU,SAAI,EACd,gBAAgB,GAAE,OAAO,GAAG,SAAiB;;;SA2E9C;AAiFD,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,EAC/B,IAAI,EAAE,CAAC,CAAC,UAAU,EAClB,UAAU,EAAE,MAAM,WAiBnB"}

package/types/extractor/extractToClassNames.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"extractToClassNames.d.ts","sourceRoot":"","sources":["../../src/extractor/extractToClassNames.ts"],"names":[],"mappings":";AAKA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AAKjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAGvC,OAAO,EAAgC,cAAc,EAAW,MAAM,UAAU,CAAA;AAGhF,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAiB7C,oBAAY,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,GAAG,EAAE,CAAC,CAAC,IAAI,CAAA;IACX,GAAG,EAAE,GAAG,CAAA;CACT,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,SAAS,EACT,MAAM,EACN,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,QAAQ,EACR,OAAO,GACR,EAAE;IACD,MAAM,EAAE,aAAa,CAAC,GAAG,CAAC,CAAA;IAC1B,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,SAAS,CAAA;IACpB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,cAAc,CAAA;IACvB,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAA;IACrC,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,iBAAiB,GAAG,IAAI,CAyY3B"}
+{"version":3,"file":"extractToClassNames.d.ts","sourceRoot":"","sources":["../../src/extractor/extractToClassNames.ts"],"names":[],"mappings":";AAKA,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AAKjC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAGvC,OAAO,EAAgC,cAAc,EAAW,MAAM,UAAU,CAAA;AAGhF,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAiB7C,oBAAY,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,GAAG,EAAE,CAAC,CAAC,IAAI,CAAA;IACX,GAAG,EAAE,GAAG,CAAA;CACT,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,SAAS,EACT,MAAM,EACN,UAAU,EACV,OAAO,EACP,gBAAgB,EAChB,aAAa,EACb,QAAQ,EACR,OAAO,GACR,EAAE;IACD,MAAM,EAAE,aAAa,CAAC,GAAG,CAAC,CAAA;IAC1B,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,SAAS,CAAA;IACpB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,cAAc,CAAA;IACvB,gBAAgB,EAAE,OAAO,GAAG,SAAS,CAAA;IACrC,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,iBAAiB,GAAG,IAAI,CA4W3B"}