@tamagui/static 1.0.1-beta.68 → 1.0.1-beta.71

package/dist/jsx/extractor/extractToClassNames.js

@@ -16,7 +16,6 @@ import { isSimpleSpread } from "./extractHelpers";
 import { extractMediaStyle } from "./extractMediaStyle";
 import { getPrefixLogs } from "./getPrefixLogs";
 import { hoistClassNames } from "./hoistClassNames";
-import { literalToAst } from "./literalToAst";
 import { logLines } from "./logLines";
 import { timer } from "./timer";
 const mergeStyleGroups = {
@@ -26,15 +25,11 @@ const mergeStyleGroups = {
   shadowOffset: true
 };
 function extractToClassNames({
-  loader,
   extractor,
   source,
   sourcePath,
   options,
-  shouldPrintDebug,
-  cssLoaderPath,
-  threaded,
-  cssPath
+  shouldPrintDebug
 }) {
   var _a;
   const tm = timer();
@@ -61,6 +56,10 @@ function extractToClassNames({
     shouldPrintDebug,
     ...options,
     target: "html",
+    extractStyledDefinitions: true,
+    onStyleRule(identifier, rules) {
+      cssMap.set(`.${identifier}`, { css: rules.join(";"), commentTexts: [] });
+    },
     getFlattenedNode: ({ tag }) => {
       hasFlattened = true;
       return tag;
@@ -77,6 +76,8 @@ function extractToClassNames({
       isFlattened
     }) => {
       var _a2, _b;
+      const didFlattenThisTag = hasFlattened;
+      hasFlattened = false;
       let finalClassNames = [];
       let finalAttrs = [];
       let finalStyles = [];
@@ -117,26 +118,13 @@ function extractToClassNames({
         switch (attr.type) {
           case "style":
             if (!isFlattened) {
-              const { hoverStyle, pressStyle, focusStyle } = attr.value;
-              const pseudos = [
-                ["hoverStyle", hoverStyle],
-                ["pressStyle", pressStyle],
-                ["focusStyle", focusStyle]
-              ];
               const styles2 = getStylesAtomic(attr.value, {
                 splitTransforms: true
               });
               finalStyles = [...finalStyles, ...styles2];
-              for (const [key, value] of pseudos) {
-                if (value && Object.keys(value).length) {
-                  finalAttrs.push(t.jsxAttribute(t.jsxIdentifier(key), t.jsxExpressionContainer(literalToAst(value))));
-                }
-              }
               for (const style of styles2) {
-                if (style.pseudo) {
-                  continue;
-                }
-                finalAttrs.push(t.jsxAttribute(t.jsxIdentifier(style.property), t.stringLiteral(style.identifier)));
+                const prop = style.pseudo ? `${style.property}-${style.pseudo}` : style.property;
+                finalAttrs.push(t.jsxAttribute(t.jsxIdentifier(prop), t.stringLiteral(style.identifier)));
               }
             } else {
               const styles2 = addStyles(attr.value);
@@ -217,7 +205,7 @@ function extractToClassNames({
         const nameExpr = names ? hoistClassNames(jsxPath, existingHoists, names) : null;
         let expr = nameExpr;
         if (nameExpr && !t.isIdentifier(nameExpr)) {
-          if (!hasFlattened) {
+          if (!didFlattenThisTag) {
           } else {
             ensureImportingConcat(programPath);
             const simpleSpreads = attrs.filter((x) => t.isJSXSpreadAttribute(x.value) && isSimpleSpread(x.value));
@@ -230,7 +218,8 @@ function extractToClassNames({
         node.attributes.push(t.jsxAttribute(t.jsxIdentifier("className"), t.jsxExpressionContainer(expr)));
       }
       const comment = util.format("/* %s:%s (%s) */", filePath, lineNumbers, originalNodeName);
-      for (const { className, rules } of finalStyles) {
+      for (const { identifier, rules } of finalStyles) {
+        const className = `.${identifier}`;
         if (cssMap.has(className)) {
           if (comment) {
             const val = cssMap.get(className);
@@ -250,19 +239,13 @@ function extractToClassNames({
       }
     }
   });
-  if (!res || !res.modified && !res.optimized && !res.flattened) {
+  if (!res || !res.modified && !res.optimized && !res.flattened && !res.styled) {
     if (shouldPrintDebug) {
       console.log("no res or none modified", res);
     }
     return null;
   }
   const styles = Array.from(cssMap.values()).map((x) => x.css).join("\n").trim();
-  if (styles) {
-    const cssQuery = threaded ? `cssData=${Buffer.from(styles).toString("base64")}` : `cssPath=${cssPath}`;
-    const remReq = loader.remainingRequest;
-    const importPath = `${cssPath}!=!${cssLoaderPath}?${cssQuery}!${remReq}`;
-    ast.program.body.unshift(t.importDeclaration([], t.stringLiteral(importPath)));
-  }
   const result = generate(ast, {
     concise: false,
     filename: sourcePath,
@@ -277,6 +260,7 @@ function extractToClassNames({
   if (shouldLogTiming) {
     const memUsed = mem ? Math.round((process.memoryUsage().heapUsed - mem.heapUsed) / 1024 / 1204 * 10) / 10 : 0;
     const path2 = basename(sourcePath).replace(/\.[jt]sx?$/, "").slice(0, 22).trim().padStart(24);
+    const numStyled = `${res.styled}`.padStart(3);
     const numOptimized = `${res.optimized}`.padStart(3);
     const numFound = `${res.found}`.padStart(3);
     const numFlattened = `${res.flattened}`.padStart(3);
@@ -284,7 +268,9 @@ function extractToClassNames({
     const timing = Date.now() - start;
     const timingWarning = timing > 50 ? "\u26A0\uFE0F" : timing > 150 ? "\u2622\uFE0F" : "";
     const timingStr = `${timing}ms${timingWarning}`.padStart(6);
-    console.log(`${getPrefixLogs(options)} ${path2}  ${numFound}   \xB7 ${numOptimized}   \xB7 ${numFlattened}  ${timingStr} ${memory ? `(${memory})` : ""}`);
+    const pre = getPrefixLogs(options);
+    const memStr = memory ? `(${memory})` : "";
+    console.log(`${pre} ${path2}  ${numFound} \xB7 ${numOptimized} \xB7 ${numFlattened} \xB7 ${numStyled}  ${timingStr} ${memStr}`);
   }
   return {
     ast,

package/dist/jsx/index.js

@@ -5,7 +5,7 @@ import { literalToAst } from "./extractor/literalToAst";
 export * from "./constants";
 export * from "./extractor/extractToClassNames";
 export * from "./extractor/extractHelpers";
-export * from "./patchReactNativeWeb";
+export * from "@tamagui/patch-rnw";
 export {
   TamaguiOptions,
   createExtractor,

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@tamagui/static",
-  "version": "1.0.1-beta.68",
+  "version": "1.0.1-beta.71",
   "source": "src/index.ts",
   "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "patches",
     "src",
     "types",
     "dist"
@@ -17,7 +18,8 @@
     "clean": "tamagui-build clean",
     "clean:build": "tamagui-build clean:build",
     "test": "NODE_ENV=test TAMAGUI_COMPILE_PROCESS=1 jest --forceExit",
-    "test:babel": "yarn test tests/babel-test.tsx",
+    "test:output": "TAMAGUI_TARGET=web node -r esbuild-register test-output.tsx",
+    "test:babel": "DISABLE_PRE_TEST=true yarn test tests/babel-test.tsx",
     "test:debug": "NODE_ENV=test TAMAGUI_COMPILE_PROCESS=1 DEBUG_FILE=extract-specs.tsx DEBUG=1 yarn test",
     "test:watch": "NODE_ENV=test TAMAGUI_COMPILE_PROCESS=1 yarn test --watch",
     "test:update-snapshots": "NODE_ENV=test jest --updateSnapshot"
@@ -36,11 +38,11 @@
     "@babel/parser": "^7.15.7",
     "@babel/traverse": "^7.15.4",
     "@expo/match-media": "^0.3.0",
-    "@tamagui/build": "^1.0.1-beta.68",
-    "@tamagui/core-node": "^1.0.1-beta.68",
-    "@tamagui/fake-react-native": "^1.0.1-beta.68",
-    "@tamagui/helpers": "^1.0.1-beta.68",
-    "@tamagui/proxy-worm": "^1.0.1-beta.68",
+    "@tamagui/build": "^1.0.1-beta.71",
+    "@tamagui/core-node": "^1.0.1-beta.71",
+    "@tamagui/fake-react-native": "^1.0.1-beta.71",
+    "@tamagui/helpers": "^1.0.1-beta.71",
+    "@tamagui/proxy-worm": "^1.0.1-beta.71",
     "babel-literal-to-ast": "^2.1.0",
     "esbuild": "^0.14.36",
     "esbuild-register": "^3.3.2",
@@ -48,13 +50,15 @@
     "fs-extra": "^9.1.0",
     "invariant": "^2.2.4",
     "lodash": "^4.17.21",
-    "tamagui": "^1.0.1-beta.68"
+    "tamagui": "^1.0.1-beta.71"
   },
   "devDependencies": {
     "@babel/plugin-syntax-typescript": "^7.14.5",
     "@babel/types": "^7.15.6",
     "@dish/babel-preset": "^0.0.6",
-    "@testing-library/react": "13.0.0-alpha.4",
+    "@tamagui/config-base": "^1.0.1-beta.71",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
     "@types/jest": "*",
     "@types/node": "^16.11.9",
     "@types/react-native": "^0.67.3",
@@ -62,15 +66,17 @@
     "babel-loader": "^8.2.5",
     "css-loader": "^5.2.4",
     "esbuild-loader": "^2.18.0",
-    "jest": "^27.3.1",
+    "jest": "^28.1.1",
+    "jest-dom": "^4.0.0",
+    "jest-environment-jsdom": "^28.1.1",
     "null-loader": "^4.0.1",
     "react": "*",
     "react-dom": "*",
     "react-native-web": "^0.17.5",
-    "react-test-renderer": "^18.1.0",
-    "style-loader": "^3.3.0",
+    "react-test-renderer": "^18.2.0",
+    "style-loader": "^3.3.1",
     "typescript": "^4.7.2",
-    "webpack": "^5.72.0"
+    "webpack": "^5.73.0"
   },
   "peerDependencies": {
     "react-native-web": "*"

package/src/extractor/createEvaluator.ts

@@ -21,7 +21,7 @@ export function createEvaluator({
   tamaguiConfig: TamaguiConfig
   staticNamespace: Record<string, any>
   sourcePath: string
-  traversePath: NodePath<t.JSXElement>
+  traversePath?: NodePath<t.JSXElement>
   shouldPrintDebug: boolean | 'verbose'
 }) {
   // called when evaluateAstNode encounters a dynamic-looking prop
@@ -30,6 +30,7 @@ export function createEvaluator({
     if (
       t.isMemberExpression(n) &&
       t.isIdentifier(n.property) &&
+      traversePath &&
       isValidThemeHook(traversePath, n, sourcePath)
     ) {
       const key = n.property.name