tamagui-loader 1.0.1-beta.21 → 1.0.1-beta.210

package/dist/cjs/css.js

@@ -1,22 +1,8 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -39,9 +25,9 @@ __export(css_exports, {
 module.exports = __toCommonJS(css_exports);
 const extractedInfoByFile = /* @__PURE__ */ new Map();
 const stylePathToFilePath = /* @__PURE__ */ new Map();
-function loader(source) {
+function loader() {
   this.async();
-  const options = __spreadValues({}, this.getOptions());
+  const options = { ...this.getOptions() };
   const sourcePath = `${this.resourcePath}`;
   let out = "";
   if (options.cssPath) {
@@ -54,12 +40,11 @@ function loader(source) {
   } else if (options.cssData) {
     out = Buffer.from(options.cssData, "base64").toString("utf-8");
   }
-  if (options.cssData || options.cssPath) {
+  if (out) {
     return this.callback(null, out || "");
   }
   this.callback({ message: `No CSS found`, name: "missing_css" });
 }
-__name(loader, "loader");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   extractedInfoByFile,

package/dist/cjs/css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/css.ts"],
-  "sourcesContent": ["import { ExtractedResponse, TamaguiOptions } from '@tamagui/static'\nimport { LoaderContext } from 'webpack'\n\nexport const extractedInfoByFile = new Map<string, ExtractedResponse>()\nexport const stylePathToFilePath = new Map<string, string>()\n\nexport default function loader(this: LoaderContext<any>, source: string) {\n  this.async()\n  const options: TamaguiOptions = { ...this.getOptions() }\n  const sourcePath = `${this.resourcePath}`\n  let out = ''\n  if (options.cssPath) {\n    // get in memory info\n    const pathKey = stylePathToFilePath.get(sourcePath) ?? sourcePath\n    const info = extractedInfoByFile.get(pathKey)\n    // clear memory\n    stylePathToFilePath.delete(sourcePath)\n    extractedInfoByFile.delete(pathKey)\n    const out = info?.styles\n    return this.callback(null, out || '')\n  } else if (options.cssData) {\n    // get output CSS\n    out = Buffer.from(options.cssData, 'base64').toString('utf-8')\n  }\n  if (options.cssData || options.cssPath) {\n    // use original JS sourcemap\n    return this.callback(null, out || '')\n  }\n  this.callback({ message: `No CSS found`, name: 'missing_css' })\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,MAAM,sBAAsB,oBAAI,IAA+B;AAC/D,MAAM,sBAAsB,oBAAI,IAAoB;AAE5C,gBAA0C,QAAgB;AACvE,OAAK,MAAM;AACX,QAAM,UAA0B,mBAAK,KAAK,WAAW;AACrD,QAAM,aAAa,GAAG,KAAK;AAC3B,MAAI,MAAM;AACV,MAAI,QAAQ,SAAS;AAEnB,UAAM,UAAU,oBAAoB,IAAI,UAAU,KAAK;AACvD,UAAM,OAAO,oBAAoB,IAAI,OAAO;AAE5C,wBAAoB,OAAO,UAAU;AACrC,wBAAoB,OAAO,OAAO;AAClC,UAAM,OAAM,6BAAM;AAClB,WAAO,KAAK,SAAS,MAAM,QAAO,EAAE;AAAA,EACtC,WAAW,QAAQ,SAAS;AAE1B,UAAM,OAAO,KAAK,QAAQ,SAAS,QAAQ,EAAE,SAAS,OAAO;AAAA,EAC/D;AACA,MAAI,QAAQ,WAAW,QAAQ,SAAS;AAEtC,WAAO,KAAK,SAAS,MAAM,OAAO,EAAE;AAAA,EACtC;AACA,OAAK,SAAS,EAAE,SAAS,gBAAgB,MAAM,cAAc,CAAC;AAChE;AAvBwB;",
-  "names": []
+  "sourcesContent": ["import { ExtractedResponse, TamaguiOptions } from '@tamagui/static'\nimport { LoaderContext } from 'webpack'\n\nexport const extractedInfoByFile = new Map<string, ExtractedResponse>()\nexport const stylePathToFilePath = new Map<string, string>()\n\nexport default function loader(this: LoaderContext<any>) {\n  this.async()\n  const options: TamaguiOptions = { ...this.getOptions() }\n  const sourcePath = `${this.resourcePath}`\n  let out = ''\n  if (options.cssPath) {\n    // get in memory info\n    const pathKey = stylePathToFilePath.get(sourcePath) ?? sourcePath\n    const info = extractedInfoByFile.get(pathKey)\n    // clear memory\n    stylePathToFilePath.delete(sourcePath)\n    extractedInfoByFile.delete(pathKey)\n    const out = info?.styles\n    return this.callback(null, out || '')\n  } else if (options.cssData) {\n    // get output CSS\n    out = Buffer.from(options.cssData, 'base64').toString('utf-8')\n  }\n  if (out) {\n    // use original JS sourcemap\n    return this.callback(null, out || '')\n  }\n  this.callback({ message: `No CSS found`, name: 'missing_css' })\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,MAAM,sBAAsB,oBAAI,IAA+B;AAC/D,MAAM,sBAAsB,oBAAI,IAAoB;AAE5C,SAAR,SAAkD;AACvD,OAAK,MAAM;AACX,QAAM,UAA0B,EAAE,GAAG,KAAK,WAAW,EAAE;AACvD,QAAM,aAAa,GAAG,KAAK;AAC3B,MAAI,MAAM;AACV,MAAI,QAAQ,SAAS;AAEnB,UAAM,UAAU,oBAAoB,IAAI,UAAU,KAAK;AACvD,UAAM,OAAO,oBAAoB,IAAI,OAAO;AAE5C,wBAAoB,OAAO,UAAU;AACrC,wBAAoB,OAAO,OAAO;AAClC,UAAMA,OAAM,6BAAM;AAClB,WAAO,KAAK,SAAS,MAAMA,QAAO,EAAE;AAAA,EACtC,WAAW,QAAQ,SAAS;AAE1B,UAAM,OAAO,KAAK,QAAQ,SAAS,QAAQ,EAAE,SAAS,OAAO;AAAA,EAC/D;AACA,MAAI,KAAK;AAEP,WAAO,KAAK,SAAS,MAAM,OAAO,EAAE;AAAA,EACtC;AACA,OAAK,SAAS,EAAE,SAAS,gBAAgB,MAAM,cAAc,CAAC;AAChE;",
+  "names": ["out"]
 }

package/dist/cjs/index.js

@@ -1,8 +1,10 @@
+"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 __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -15,6 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
 __export(src_exports, {
@@ -22,15 +28,20 @@ __export(src_exports, {
   shouldExclude: () => shouldExclude
 });
 module.exports = __toCommonJS(src_exports);
+var import_path = __toESM(require("path"));
 process.env.TAMAGUI_TARGET = process.env.TAMAGUI_TARGET || "web";
 process.env.TAMAGUI_COMPILE_PROCESS = "1";
+process.env.IS_STATIC = "is_static";
 var src_default = require("./loader").loader;
-const shouldExclude = /* @__PURE__ */ __name((path, projectRoot, tamaguiOptions) => {
-  if (path.includes("react-native-reanimated") || path.includes("react-native-gesture-handler") || path.includes("@gorhom/portal") || path.includes(projectRoot) || path.includes("/dist/jsx/")) {
+const shouldExclude = (filePath, projectRoot) => {
+  if (filePath.includes("react-native-web") || filePath.includes("react-native-gesture-handler") || filePath.includes("@gorhom") || filePath.includes(projectRoot) || isTamaguiDistJSX(filePath)) {
     return false;
   }
   return true;
-}, "shouldExclude");
+};
+function isTamaguiDistJSX(filePath) {
+  return filePath.includes("/dist/jsx/".replace(/\//g, import_path.default.sep));
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   shouldExclude

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["process.env.TAMAGUI_TARGET = process.env.TAMAGUI_TARGET || 'web'\nprocess.env.TAMAGUI_COMPILE_PROCESS = '1'\n\nexport default require('./loader').loader\n\n// helper for webpack exclude specific to tamagui\n\nexport const shouldExclude = (path: string, projectRoot: string, tamaguiOptions: any) => {\n  if (\n    path.includes('react-native-reanimated') ||\n    path.includes('react-native-gesture-handler') ||\n    path.includes('@gorhom/portal') ||\n    path.includes(projectRoot) ||\n    path.includes('/dist/jsx/')\n  ) {\n    return false\n  }\n  return true\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAAQ,IAAI,iBAAiB,QAAQ,IAAI,kBAAkB;AAC3D,QAAQ,IAAI,0BAA0B;AAEtC,IAAO,cAAQ,QAAQ,UAAU,EAAE;AAI5B,MAAM,gBAAgB,wBAAC,MAAc,aAAqB,mBAAwB;AACvF,MACE,KAAK,SAAS,yBAAyB,KACvC,KAAK,SAAS,8BAA8B,KAC5C,KAAK,SAAS,gBAAgB,KAC9B,KAAK,SAAS,WAAW,KACzB,KAAK,SAAS,YAAY,GAC1B;AACA,WAAO;AAAA,EACT;AACA,SAAO;AACT,GAX6B;",
-  "names": []
+  "sourcesContent": ["import path from 'path'\n\nprocess.env.TAMAGUI_TARGET = process.env.TAMAGUI_TARGET || 'web'\nprocess.env.TAMAGUI_COMPILE_PROCESS = '1'\nprocess.env.IS_STATIC = 'is_static'\n\nexport default require('./loader').loader\n\n// helper for webpack exclude specific to tamagui\n\nexport const shouldExclude = (filePath: string, projectRoot: string) => {\n  if (\n    filePath.includes('react-native-web') ||\n    filePath.includes('react-native-gesture-handler') ||\n    filePath.includes('@gorhom') ||\n    filePath.includes(projectRoot) ||\n    isTamaguiDistJSX(filePath)\n  ) {\n    return false\n  }\n  return true\n}\n\nfunction isTamaguiDistJSX(filePath: string) {\n  return filePath.includes('/dist/jsx/'.replace(/\\//g, path.sep))\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AAEjB,QAAQ,IAAI,iBAAiB,QAAQ,IAAI,kBAAkB;AAC3D,QAAQ,IAAI,0BAA0B;AACtC,QAAQ,IAAI,YAAY;AAExB,IAAO,cAAQ,QAAQ,UAAU,EAAE;AAI5B,MAAM,gBAAgB,CAAC,UAAkB,gBAAwB;AACtE,MACE,SAAS,SAAS,kBAAkB,KACpC,SAAS,SAAS,8BAA8B,KAChD,SAAS,SAAS,SAAS,KAC3B,SAAS,SAAS,WAAW,KAC7B,iBAAiB,QAAQ,GACzB;AACA,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEA,SAAS,iBAAiB,UAAkB;AAC1C,SAAO,SAAS,SAAS,aAAa,QAAQ,OAAO,YAAAA,QAAK,GAAG,CAAC;AAChE;",
+  "names": ["path"]
 }

package/dist/cjs/loader.js

@@ -1,24 +1,10 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -31,54 +17,58 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var loader_exports = {};
 __export(loader_exports, {
   loader: () => loader
 });
 module.exports = __toCommonJS(loader_exports);
+var import_cli_color = require("@tamagui/cli-color");
 var import_static = require("@tamagui/static");
 var import_css = require("./css");
 Error.stackTraceLimit = Infinity;
+const CSS_LOADER_PATH = require.resolve("./css");
+Error.stackTraceLimit = Infinity;
 const extractor = (0, import_static.createExtractor)();
 let index = 0;
-let hasLogged = false;
-let hasPatched = false;
 process.env.TAMAGUI_TARGET = "web";
-function loader(source) {
-  this.cacheable();
-  this.async();
-  if (!process.env.TAMAGUI_DISABLE_RNW_PATCH && !hasPatched) {
-    (0, import_static.patchReactNativeWeb)();
-    hasPatched = true;
-  }
+const loader = async function loader2(sourceIn) {
+  this.cacheable(true);
+  const callback = this.async();
+  const source = sourceIn.toString();
   try {
     const threaded = this.emitFile === void 0;
-    const options = __spreadValues({}, this.getOptions());
+    const options = { ...this.getOptions() };
     const sourcePath = `${this.resourcePath}`;
-    const startsWithComment = source[0] === "/" && source[1] === "/";
-    let shouldPrintDebug = !!process.env.DEBUG && (process.env.DEBUG_FILE ? sourcePath.includes(process.env.DEBUG_FILE) : true) || startsWithComment && (source.startsWith("// debug") || source.startsWith("//! debug"));
-    if (shouldPrintDebug && source.startsWith("// debug-verbose")) {
-      shouldPrintDebug = "verbose";
-    }
-    if (startsWithComment && (source.startsWith("// tamagui-ignore") || source.startsWith("//! tamagui-ignore"))) {
-      return this.callback(null, source);
+    const { shouldDisable, shouldPrintDebug } = (0, import_static.getPragmaOptions)({ source, path: sourcePath });
+    if (shouldDisable) {
+      if (shouldPrintDebug) {
+        console.log(`Disabling on file via pragma`);
+      }
+      return callback(null, source);
     }
     const cssPath = threaded ? `${sourcePath}.module.css` : `${sourcePath}.${index++}.module.css`;
-    const extracted = (0, import_static.extractToClassNames)({
-      loader: this,
+    const extracted = await (0, import_static.extractToClassNames)({
       extractor,
-      cssLoaderPath: require.resolve("./css"),
       source,
-      threaded,
       sourcePath,
-      cssPath,
       options,
       shouldPrintDebug
     });
     if (!extracted) {
-      return this.callback(null, source);
+      return callback(null, source);
+    }
+    if (extracted.styles) {
+      const cssQuery = threaded ? `cssData=${Buffer.from(extracted.styles).toString("base64")}` : `cssPath=${cssPath}`;
+      const remReq = this.remainingRequest;
+      const importPath = `${cssPath}!=!${CSS_LOADER_PATH}?${cssQuery}!${remReq}`;
+      extracted.js = `${extracted.js}
+
+require(${JSON.stringify(importPath)})`;
     }
     import_css.extractedInfoByFile.set(sourcePath, extracted);
     if (!threaded) {
@@ -86,13 +76,21 @@ function loader(source) {
         import_css.stylePathToFilePath.set(extracted.stylesPath, sourcePath);
       }
     }
-    this.callback(null, extracted.js, extracted.map);
+    callback(null, extracted.js, extracted.map);
   } catch (err) {
-    console.error("ERROR", err);
+    const message = err instanceof Error ? `${err.message}
+${err.stack}` : String(err);
+    console.error("Tamagui Webpack Loader Error:\n", `  ${message}
+`);
+    if (message.includes(`Cannot create proxy`)) {
+      console.log(
+        `This is usually due to components not loading at build-time. Check for logs just below the line above:`
+      );
+      (0, import_cli_color.colorLog)(import_cli_color.Color.FgYellow, `"Tamagui built config and components"`);
+    }
     return this.callback(null, source);
   }
-}
-__name(loader, "loader");
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   loader

package/dist/cjs/loader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/loader.ts"],
-  "sourcesContent": ["import {\n  ExtractedResponse,\n  TamaguiOptions,\n  createExtractor,\n  extractToClassNames,\n  patchReactNativeWeb,\n} from '@tamagui/static'\nimport { LoaderContext } from 'webpack'\n\nimport { extractedInfoByFile, stylePathToFilePath } from './css'\n\nError.stackTraceLimit = Infinity\nconst extractor = createExtractor()\n\nlet index = 0\nlet hasLogged = false\nlet hasPatched = false\n\nprocess.env.TAMAGUI_TARGET = 'web'\n\nexport function loader(this: LoaderContext<any>, source: string) {\n  this.cacheable()\n  this.async()\n\n  if (!process.env.TAMAGUI_DISABLE_RNW_PATCH && !hasPatched) {\n    patchReactNativeWeb()\n    hasPatched = true\n  }\n\n  try {\n    const threaded = this.emitFile === undefined\n    const options: TamaguiOptions = { ...this.getOptions() }\n    const sourcePath = `${this.resourcePath}`\n    const startsWithComment = source[0] === '/' && source[1] === '/'\n\n    let shouldPrintDebug: boolean | 'verbose' =\n      (!!process.env.DEBUG &&\n        (process.env.DEBUG_FILE ? sourcePath.includes(process.env.DEBUG_FILE) : true)) ||\n      // supports esbuild style //! comments\n      (startsWithComment && (source.startsWith('// debug') || source.startsWith('//! debug')))\n\n    if (shouldPrintDebug && source.startsWith('// debug-verbose')) {\n      shouldPrintDebug = 'verbose'\n    }\n\n    // check if should ignore\n    if (\n      startsWithComment &&\n      (source.startsWith('// tamagui-ignore') || source.startsWith('//! tamagui-ignore'))\n    ) {\n      return this.callback(null, source)\n    }\n\n    const cssPath = threaded ? `${sourcePath}.module.css` : `${sourcePath}.${index++}.module.css`\n\n    const extracted = extractToClassNames({\n      loader: this,\n      extractor,\n      cssLoaderPath: require.resolve('./css'),\n      source,\n      threaded,\n      sourcePath,\n      cssPath,\n      options,\n      shouldPrintDebug,\n    })\n\n    if (!extracted) {\n      return this.callback(null, source)\n    }\n\n    extractedInfoByFile.set(sourcePath, extracted)\n\n    if (!threaded) {\n      if (extracted.stylesPath) {\n        stylePathToFilePath.set(extracted.stylesPath, sourcePath)\n      }\n    }\n\n    this.callback(null, extracted.js, extracted.map)\n  } catch (err) {\n    console.error('ERROR', err)\n    return this.callback(null, source)\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMO;AAGP,iBAAyD;AAEzD,MAAM,kBAAkB;AACxB,MAAM,YAAY,mCAAgB;AAElC,IAAI,QAAQ;AACZ,IAAI,YAAY;AAChB,IAAI,aAAa;AAEjB,QAAQ,IAAI,iBAAiB;AAEtB,gBAA0C,QAAgB;AAC/D,OAAK,UAAU;AACf,OAAK,MAAM;AAEX,MAAI,CAAC,QAAQ,IAAI,6BAA6B,CAAC,YAAY;AACzD,2CAAoB;AACpB,iBAAa;AAAA,EACf;AAEA,MAAI;AACF,UAAM,WAAW,KAAK,aAAa;AACnC,UAAM,UAA0B,mBAAK,KAAK,WAAW;AACrD,UAAM,aAAa,GAAG,KAAK;AAC3B,UAAM,oBAAoB,OAAO,OAAO,OAAO,OAAO,OAAO;AAE7D,QAAI,mBACD,CAAC,CAAC,QAAQ,IAAI,SACZ,SAAQ,IAAI,aAAa,WAAW,SAAS,QAAQ,IAAI,UAAU,IAAI,SAEzE,qBAAsB,QAAO,WAAW,UAAU,KAAK,OAAO,WAAW,WAAW;AAEvF,QAAI,oBAAoB,OAAO,WAAW,kBAAkB,GAAG;AAC7D,yBAAmB;AAAA,IACrB;AAGA,QACE,qBACC,QAAO,WAAW,mBAAmB,KAAK,OAAO,WAAW,oBAAoB,IACjF;AACA,aAAO,KAAK,SAAS,MAAM,MAAM;AAAA,IACnC;AAEA,UAAM,UAAU,WAAW,GAAG,0BAA0B,GAAG,cAAc;AAEzE,UAAM,YAAY,uCAAoB;AAAA,MACpC,QAAQ;AAAA,MACR;AAAA,MACA,eAA+B;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,QAAI,CAAC,WAAW;AACd,aAAO,KAAK,SAAS,MAAM,MAAM;AAAA,IACnC;AAEA,mCAAoB,IAAI,YAAY,SAAS;AAE7C,QAAI,CAAC,UAAU;AACb,UAAI,UAAU,YAAY;AACxB,uCAAoB,IAAI,UAAU,YAAY,UAAU;AAAA,MAC1D;AAAA,IACF;AAEA,SAAK,SAAS,MAAM,UAAU,IAAI,UAAU,GAAG;AAAA,EACjD,SAAS,KAAP;AACA,YAAQ,MAAM,SAAS,GAAG;AAC1B,WAAO,KAAK,SAAS,MAAM,MAAM;AAAA,EACnC;AACF;AAhEgB;",
-  "names": []
+  "sourcesContent": ["import { Color, colorLog } from '@tamagui/cli-color'\nimport {\n  TamaguiOptions,\n  createExtractor,\n  extractToClassNames,\n  getPragmaOptions,\n} from '@tamagui/static'\n\nimport { extractedInfoByFile, stylePathToFilePath } from './css'\n\nError.stackTraceLimit = Infinity\n\n// pass loader as path\nconst CSS_LOADER_PATH = require.resolve('./css')\n\nError.stackTraceLimit = Infinity\nconst extractor = createExtractor()\n\nlet index = 0\n\nprocess.env.TAMAGUI_TARGET = 'web'\n\nexport const loader = async function loader(this, sourceIn: Buffer | string) {\n  this.cacheable(true)\n  const callback = this.async()\n  const source = sourceIn.toString()\n\n  try {\n    const threaded = this.emitFile === undefined\n    const options: TamaguiOptions = { ...this.getOptions() }\n    const sourcePath = `${this.resourcePath}`\n    const { shouldDisable, shouldPrintDebug } = getPragmaOptions({ source, path: sourcePath })\n\n    if (shouldDisable) {\n      if (shouldPrintDebug) {\n        // eslint-disable-next-line no-console\n        console.log(`Disabling on file via pragma`)\n      }\n      return callback(null, source)\n    }\n\n    const cssPath = threaded ? `${sourcePath}.module.css` : `${sourcePath}.${index++}.module.css`\n\n    const extracted = await extractToClassNames({\n      extractor,\n      source,\n      sourcePath,\n      options,\n      shouldPrintDebug,\n    })\n\n    if (!extracted) {\n      return callback(null, source)\n    }\n\n    // add import to css\n    if (extracted.styles) {\n      const cssQuery = threaded\n        ? `cssData=${Buffer.from(extracted.styles).toString('base64')}`\n        : `cssPath=${cssPath}`\n      const remReq = this.remainingRequest\n      const importPath = `${cssPath}!=!${CSS_LOADER_PATH}?${cssQuery}!${remReq}`\n      extracted.js = `${extracted.js}\\n\\nrequire(${JSON.stringify(importPath)})`\n    }\n\n    extractedInfoByFile.set(sourcePath, extracted)\n\n    if (!threaded) {\n      if (extracted.stylesPath) {\n        stylePathToFilePath.set(extracted.stylesPath, sourcePath)\n      }\n    }\n\n    callback(null, extracted.js, extracted.map)\n  } catch (err) {\n    const message = err instanceof Error ? `${err.message}\\n${err.stack}` : String(err)\n\n    // eslint-disable-next-line no-console\n    console.error('Tamagui Webpack Loader Error:\\n', `  ${message}\\n`)\n\n    if (message.includes(`Cannot create proxy`)) {\n      // eslint-disable-next-line no-console\n      console.log(\n        `This is usually due to components not loading at build-time. Check for logs just below the line above:`\n      )\n      colorLog(Color.FgYellow, `\"Tamagui built config and components\"`)\n    }\n\n    return this.callback(null, source)\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAgC;AAChC,oBAKO;AAEP,iBAAyD;AAEzD,MAAM,kBAAkB;AAGxB,MAAM,kBAAkC;AAExC,MAAM,kBAAkB;AACxB,MAAM,gBAAY,+BAAgB;AAElC,IAAI,QAAQ;AAEZ,QAAQ,IAAI,iBAAiB;AAEtB,MAAM,SAAS,eAAeA,QAAa,UAA2B;AAC3E,OAAK,UAAU,IAAI;AACnB,QAAM,WAAW,KAAK,MAAM;AAC5B,QAAM,SAAS,SAAS,SAAS;AAEjC,MAAI;AACF,UAAM,WAAW,KAAK,aAAa;AACnC,UAAM,UAA0B,EAAE,GAAG,KAAK,WAAW,EAAE;AACvD,UAAM,aAAa,GAAG,KAAK;AAC3B,UAAM,EAAE,eAAe,iBAAiB,QAAI,gCAAiB,EAAE,QAAQ,MAAM,WAAW,CAAC;AAEzF,QAAI,eAAe;AACjB,UAAI,kBAAkB;AAEpB,gBAAQ,IAAI,8BAA8B;AAAA,MAC5C;AACA,aAAO,SAAS,MAAM,MAAM;AAAA,IAC9B;AAEA,UAAM,UAAU,WAAW,GAAG,0BAA0B,GAAG,cAAc;AAEzE,UAAM,YAAY,UAAM,mCAAoB;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,QAAI,CAAC,WAAW;AACd,aAAO,SAAS,MAAM,MAAM;AAAA,IAC9B;AAGA,QAAI,UAAU,QAAQ;AACpB,YAAM,WAAW,WACb,WAAW,OAAO,KAAK,UAAU,MAAM,EAAE,SAAS,QAAQ,MAC1D,WAAW;AACf,YAAM,SAAS,KAAK;AACpB,YAAM,aAAa,GAAG,aAAa,mBAAmB,YAAY;AAClE,gBAAU,KAAK,GAAG,UAAU;AAAA;AAAA,UAAiB,KAAK,UAAU,UAAU;AAAA,IACxE;AAEA,mCAAoB,IAAI,YAAY,SAAS;AAE7C,QAAI,CAAC,UAAU;AACb,UAAI,UAAU,YAAY;AACxB,uCAAoB,IAAI,UAAU,YAAY,UAAU;AAAA,MAC1D;AAAA,IACF;AAEA,aAAS,MAAM,UAAU,IAAI,UAAU,GAAG;AAAA,EAC5C,SAAS,KAAP;AACA,UAAM,UAAU,eAAe,QAAQ,GAAG,IAAI;AAAA,EAAY,IAAI,UAAU,OAAO,GAAG;AAGlF,YAAQ,MAAM,mCAAmC,KAAK;AAAA,CAAW;AAEjE,QAAI,QAAQ,SAAS,qBAAqB,GAAG;AAE3C,cAAQ;AAAA,QACN;AAAA,MACF;AACA,qCAAS,uBAAM,UAAU,uCAAuC;AAAA,IAClE;AAEA,WAAO,KAAK,SAAS,MAAM,MAAM;AAAA,EACnC;AACF;",
+  "names": ["loader"]
 }

package/dist/esm/css.js

@@ -1,15 +1,12 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 const extractedInfoByFile = /* @__PURE__ */ new Map();
 const stylePathToFilePath = /* @__PURE__ */ new Map();
-function loader(source) {
-  var _a;
+function loader() {
   this.async();
   const options = { ...this.getOptions() };
   const sourcePath = `${this.resourcePath}`;
   let out = "";
   if (options.cssPath) {
-    const pathKey = (_a = stylePathToFilePath.get(sourcePath)) != null ? _a : sourcePath;
+    const pathKey = stylePathToFilePath.get(sourcePath) ?? sourcePath;
     const info = extractedInfoByFile.get(pathKey);
     stylePathToFilePath.delete(sourcePath);
     extractedInfoByFile.delete(pathKey);
@@ -18,12 +15,11 @@ function loader(source) {
   } else if (options.cssData) {
     out = Buffer.from(options.cssData, "base64").toString("utf-8");
   }
-  if (options.cssData || options.cssPath) {
+  if (out) {
     return this.callback(null, out || "");
   }
   this.callback({ message: `No CSS found`, name: "missing_css" });
 }
-__name(loader, "loader");
 export {
   loader as default,
   extractedInfoByFile,

package/dist/esm/css.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/css.ts"],
-  "sourcesContent": ["import { ExtractedResponse, TamaguiOptions } from '@tamagui/static'\nimport { LoaderContext } from 'webpack'\n\nexport const extractedInfoByFile = new Map<string, ExtractedResponse>()\nexport const stylePathToFilePath = new Map<string, string>()\n\nexport default function loader(this: LoaderContext<any>, source: string) {\n  this.async()\n  const options: TamaguiOptions = { ...this.getOptions() }\n  const sourcePath = `${this.resourcePath}`\n  let out = ''\n  if (options.cssPath) {\n    // get in memory info\n    const pathKey = stylePathToFilePath.get(sourcePath) ?? sourcePath\n    const info = extractedInfoByFile.get(pathKey)\n    // clear memory\n    stylePathToFilePath.delete(sourcePath)\n    extractedInfoByFile.delete(pathKey)\n    const out = info?.styles\n    return this.callback(null, out || '')\n  } else if (options.cssData) {\n    // get output CSS\n    out = Buffer.from(options.cssData, 'base64').toString('utf-8')\n  }\n  if (options.cssData || options.cssPath) {\n    // use original JS sourcemap\n    return this.callback(null, out || '')\n  }\n  this.callback({ message: `No CSS found`, name: 'missing_css' })\n}\n"],
-  "mappings": ";;AAGO,MAAM,sBAAsB,oBAAI,IAA+B;AAC/D,MAAM,sBAAsB,oBAAI,IAAoB;AAE5C,gBAA0C,QAAgB;AANzE;AAOE,OAAK,MAAM;AACX,QAAM,UAA0B,KAAK,KAAK,WAAW,EAAE;AACvD,QAAM,aAAa,GAAG,KAAK;AAC3B,MAAI,MAAM;AACV,MAAI,QAAQ,SAAS;AAEnB,UAAM,UAAU,0BAAoB,IAAI,UAAU,MAAlC,YAAuC;AACvD,UAAM,OAAO,oBAAoB,IAAI,OAAO;AAE5C,wBAAoB,OAAO,UAAU;AACrC,wBAAoB,OAAO,OAAO;AAClC,UAAM,OAAM,6BAAM;AAClB,WAAO,KAAK,SAAS,MAAM,QAAO,EAAE;AAAA,EACtC,WAAW,QAAQ,SAAS;AAE1B,UAAM,OAAO,KAAK,QAAQ,SAAS,QAAQ,EAAE,SAAS,OAAO;AAAA,EAC/D;AACA,MAAI,QAAQ,WAAW,QAAQ,SAAS;AAEtC,WAAO,KAAK,SAAS,MAAM,OAAO,EAAE;AAAA,EACtC;AACA,OAAK,SAAS,EAAE,SAAS,gBAAgB,MAAM,cAAc,CAAC;AAChE;AAvBwB;",
-  "names": []
+  "sourcesContent": ["import { ExtractedResponse, TamaguiOptions } from '@tamagui/static'\nimport { LoaderContext } from 'webpack'\n\nexport const extractedInfoByFile = new Map<string, ExtractedResponse>()\nexport const stylePathToFilePath = new Map<string, string>()\n\nexport default function loader(this: LoaderContext<any>) {\n  this.async()\n  const options: TamaguiOptions = { ...this.getOptions() }\n  const sourcePath = `${this.resourcePath}`\n  let out = ''\n  if (options.cssPath) {\n    // get in memory info\n    const pathKey = stylePathToFilePath.get(sourcePath) ?? sourcePath\n    const info = extractedInfoByFile.get(pathKey)\n    // clear memory\n    stylePathToFilePath.delete(sourcePath)\n    extractedInfoByFile.delete(pathKey)\n    const out = info?.styles\n    return this.callback(null, out || '')\n  } else if (options.cssData) {\n    // get output CSS\n    out = Buffer.from(options.cssData, 'base64').toString('utf-8')\n  }\n  if (out) {\n    // use original JS sourcemap\n    return this.callback(null, out || '')\n  }\n  this.callback({ message: `No CSS found`, name: 'missing_css' })\n}\n"],
+  "mappings": "AAGO,MAAM,sBAAsB,oBAAI,IAA+B;AAC/D,MAAM,sBAAsB,oBAAI,IAAoB;AAE5C,SAAR,SAAkD;AACvD,OAAK,MAAM;AACX,QAAM,UAA0B,EAAE,GAAG,KAAK,WAAW,EAAE;AACvD,QAAM,aAAa,GAAG,KAAK;AAC3B,MAAI,MAAM;AACV,MAAI,QAAQ,SAAS;AAEnB,UAAM,UAAU,oBAAoB,IAAI,UAAU,KAAK;AACvD,UAAM,OAAO,oBAAoB,IAAI,OAAO;AAE5C,wBAAoB,OAAO,UAAU;AACrC,wBAAoB,OAAO,OAAO;AAClC,UAAMA,OAAM,6BAAM;AAClB,WAAO,KAAK,SAAS,MAAMA,QAAO,EAAE;AAAA,EACtC,WAAW,QAAQ,SAAS;AAE1B,UAAM,OAAO,KAAK,QAAQ,SAAS,QAAQ,EAAE,SAAS,OAAO;AAAA,EAC/D;AACA,MAAI,KAAK;AAEP,WAAO,KAAK,SAAS,MAAM,OAAO,EAAE;AAAA,EACtC;AACA,OAAK,SAAS,EAAE,SAAS,gBAAgB,MAAM,cAAc,CAAC;AAChE;",
+  "names": ["out"]
 }

package/dist/esm/index.js

@@ -1,14 +1,17 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import path from "path";
 process.env.TAMAGUI_TARGET = process.env.TAMAGUI_TARGET || "web";
 process.env.TAMAGUI_COMPILE_PROCESS = "1";
+process.env.IS_STATIC = "is_static";
 var src_default = require("./loader").loader;
-const shouldExclude = /* @__PURE__ */ __name((path, projectRoot, tamaguiOptions) => {
-  if (path.includes("react-native-reanimated") || path.includes("react-native-gesture-handler") || path.includes("@gorhom/portal") || path.includes(projectRoot) || path.includes("/dist/jsx/")) {
+const shouldExclude = (filePath, projectRoot) => {
+  if (filePath.includes("react-native-web") || filePath.includes("react-native-gesture-handler") || filePath.includes("@gorhom") || filePath.includes(projectRoot) || isTamaguiDistJSX(filePath)) {
     return false;
   }
   return true;
-}, "shouldExclude");
+};
+function isTamaguiDistJSX(filePath) {
+  return filePath.includes("/dist/jsx/".replace(/\//g, path.sep));
+}
 export {
   src_default as default,
   shouldExclude

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["process.env.TAMAGUI_TARGET = process.env.TAMAGUI_TARGET || 'web'\nprocess.env.TAMAGUI_COMPILE_PROCESS = '1'\n\nexport default require('./loader').loader\n\n// helper for webpack exclude specific to tamagui\n\nexport const shouldExclude = (path: string, projectRoot: string, tamaguiOptions: any) => {\n  if (\n    path.includes('react-native-reanimated') ||\n    path.includes('react-native-gesture-handler') ||\n    path.includes('@gorhom/portal') ||\n    path.includes(projectRoot) ||\n    path.includes('/dist/jsx/')\n  ) {\n    return false\n  }\n  return true\n}\n"],
-  "mappings": ";;AAAA,QAAQ,IAAI,iBAAiB,QAAQ,IAAI,kBAAkB;AAC3D,QAAQ,IAAI,0BAA0B;AAEtC,IAAO,cAAQ,QAAQ,UAAU,EAAE;AAI5B,MAAM,gBAAgB,wBAAC,MAAc,aAAqB,mBAAwB;AACvF,MACE,KAAK,SAAS,yBAAyB,KACvC,KAAK,SAAS,8BAA8B,KAC5C,KAAK,SAAS,gBAAgB,KAC9B,KAAK,SAAS,WAAW,KACzB,KAAK,SAAS,YAAY,GAC1B;AACA,WAAO;AAAA,EACT;AACA,SAAO;AACT,GAX6B;",
+  "sourcesContent": ["import path from 'path'\n\nprocess.env.TAMAGUI_TARGET = process.env.TAMAGUI_TARGET || 'web'\nprocess.env.TAMAGUI_COMPILE_PROCESS = '1'\nprocess.env.IS_STATIC = 'is_static'\n\nexport default require('./loader').loader\n\n// helper for webpack exclude specific to tamagui\n\nexport const shouldExclude = (filePath: string, projectRoot: string) => {\n  if (\n    filePath.includes('react-native-web') ||\n    filePath.includes('react-native-gesture-handler') ||\n    filePath.includes('@gorhom') ||\n    filePath.includes(projectRoot) ||\n    isTamaguiDistJSX(filePath)\n  ) {\n    return false\n  }\n  return true\n}\n\nfunction isTamaguiDistJSX(filePath: string) {\n  return filePath.includes('/dist/jsx/'.replace(/\\//g, path.sep))\n}\n"],
+  "mappings": "AAAA,OAAO,UAAU;AAEjB,QAAQ,IAAI,iBAAiB,QAAQ,IAAI,kBAAkB;AAC3D,QAAQ,IAAI,0BAA0B;AACtC,QAAQ,IAAI,YAAY;AAExB,IAAO,cAAQ,QAAQ,UAAU,EAAE;AAI5B,MAAM,gBAAgB,CAAC,UAAkB,gBAAwB;AACtE,MACE,SAAS,SAAS,kBAAkB,KACpC,SAAS,SAAS,8BAA8B,KAChD,SAAS,SAAS,SAAS,KAC3B,SAAS,SAAS,WAAW,KAC7B,iBAAiB,QAAQ,GACzB;AACA,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEA,SAAS,iBAAiB,UAAkB;AAC1C,SAAO,SAAS,SAAS,aAAa,QAAQ,OAAO,KAAK,GAAG,CAAC;AAChE;",
   "names": []
 }

package/dist/esm/loader.js

@@ -1,50 +1,49 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Color, colorLog } from "@tamagui/cli-color";
 import {
   createExtractor,
   extractToClassNames,
-  patchReactNativeWeb
+  getPragmaOptions
 } from "@tamagui/static";
 import { extractedInfoByFile, stylePathToFilePath } from "./css";
 Error.stackTraceLimit = Infinity;
+const CSS_LOADER_PATH = require.resolve("./css");
+Error.stackTraceLimit = Infinity;
 const extractor = createExtractor();
 let index = 0;
-let hasLogged = false;
-let hasPatched = false;
 process.env.TAMAGUI_TARGET = "web";
-function loader(source) {
-  this.cacheable();
-  this.async();
-  if (!process.env.TAMAGUI_DISABLE_RNW_PATCH && !hasPatched) {
-    patchReactNativeWeb();
-    hasPatched = true;
-  }
+const loader = async function loader2(sourceIn) {
+  this.cacheable(true);
+  const callback = this.async();
+  const source = sourceIn.toString();
   try {
     const threaded = this.emitFile === void 0;
     const options = { ...this.getOptions() };
     const sourcePath = `${this.resourcePath}`;
-    const startsWithComment = source[0] === "/" && source[1] === "/";
-    let shouldPrintDebug = !!process.env.DEBUG && (process.env.DEBUG_FILE ? sourcePath.includes(process.env.DEBUG_FILE) : true) || startsWithComment && (source.startsWith("// debug") || source.startsWith("//! debug"));
-    if (shouldPrintDebug && source.startsWith("// debug-verbose")) {
-      shouldPrintDebug = "verbose";
-    }
-    if (startsWithComment && (source.startsWith("// tamagui-ignore") || source.startsWith("//! tamagui-ignore"))) {
-      return this.callback(null, source);
+    const { shouldDisable, shouldPrintDebug } = getPragmaOptions({ source, path: sourcePath });
+    if (shouldDisable) {
+      if (shouldPrintDebug) {
+        console.log(`Disabling on file via pragma`);
+      }
+      return callback(null, source);
     }
     const cssPath = threaded ? `${sourcePath}.module.css` : `${sourcePath}.${index++}.module.css`;
-    const extracted = extractToClassNames({
-      loader: this,
+    const extracted = await extractToClassNames({
       extractor,
-      cssLoaderPath: require.resolve("./css"),
       source,
-      threaded,
       sourcePath,
-      cssPath,
       options,
       shouldPrintDebug
     });
     if (!extracted) {
-      return this.callback(null, source);
+      return callback(null, source);
+    }
+    if (extracted.styles) {
+      const cssQuery = threaded ? `cssData=${Buffer.from(extracted.styles).toString("base64")}` : `cssPath=${cssPath}`;
+      const remReq = this.remainingRequest;
+      const importPath = `${cssPath}!=!${CSS_LOADER_PATH}?${cssQuery}!${remReq}`;
+      extracted.js = `${extracted.js}
+
+require(${JSON.stringify(importPath)})`;
     }
     extractedInfoByFile.set(sourcePath, extracted);
     if (!threaded) {
@@ -52,13 +51,21 @@ function loader(source) {
         stylePathToFilePath.set(extracted.stylesPath, sourcePath);
       }
     }
-    this.callback(null, extracted.js, extracted.map);
+    callback(null, extracted.js, extracted.map);
   } catch (err) {
-    console.error("ERROR", err);
+    const message = err instanceof Error ? `${err.message}
+${err.stack}` : String(err);
+    console.error("Tamagui Webpack Loader Error:\n", `  ${message}
+`);
+    if (message.includes(`Cannot create proxy`)) {
+      console.log(
+        `This is usually due to components not loading at build-time. Check for logs just below the line above:`
+      );
+      colorLog(Color.FgYellow, `"Tamagui built config and components"`);
+    }
     return this.callback(null, source);
   }
-}
-__name(loader, "loader");
+};
 export {
   loader
 };

package/dist/esm/loader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/loader.ts"],
-  "sourcesContent": ["import {\n  ExtractedResponse,\n  TamaguiOptions,\n  createExtractor,\n  extractToClassNames,\n  patchReactNativeWeb,\n} from '@tamagui/static'\nimport { LoaderContext } from 'webpack'\n\nimport { extractedInfoByFile, stylePathToFilePath } from './css'\n\nError.stackTraceLimit = Infinity\nconst extractor = createExtractor()\n\nlet index = 0\nlet hasLogged = false\nlet hasPatched = false\n\nprocess.env.TAMAGUI_TARGET = 'web'\n\nexport function loader(this: LoaderContext<any>, source: string) {\n  this.cacheable()\n  this.async()\n\n  if (!process.env.TAMAGUI_DISABLE_RNW_PATCH && !hasPatched) {\n    patchReactNativeWeb()\n    hasPatched = true\n  }\n\n  try {\n    const threaded = this.emitFile === undefined\n    const options: TamaguiOptions = { ...this.getOptions() }\n    const sourcePath = `${this.resourcePath}`\n    const startsWithComment = source[0] === '/' && source[1] === '/'\n\n    let shouldPrintDebug: boolean | 'verbose' =\n      (!!process.env.DEBUG &&\n        (process.env.DEBUG_FILE ? sourcePath.includes(process.env.DEBUG_FILE) : true)) ||\n      // supports esbuild style //! comments\n      (startsWithComment && (source.startsWith('// debug') || source.startsWith('//! debug')))\n\n    if (shouldPrintDebug && source.startsWith('// debug-verbose')) {\n      shouldPrintDebug = 'verbose'\n    }\n\n    // check if should ignore\n    if (\n      startsWithComment &&\n      (source.startsWith('// tamagui-ignore') || source.startsWith('//! tamagui-ignore'))\n    ) {\n      return this.callback(null, source)\n    }\n\n    const cssPath = threaded ? `${sourcePath}.module.css` : `${sourcePath}.${index++}.module.css`\n\n    const extracted = extractToClassNames({\n      loader: this,\n      extractor,\n      cssLoaderPath: require.resolve('./css'),\n      source,\n      threaded,\n      sourcePath,\n      cssPath,\n      options,\n      shouldPrintDebug,\n    })\n\n    if (!extracted) {\n      return this.callback(null, source)\n    }\n\n    extractedInfoByFile.set(sourcePath, extracted)\n\n    if (!threaded) {\n      if (extracted.stylesPath) {\n        stylePathToFilePath.set(extracted.stylesPath, sourcePath)\n      }\n    }\n\n    this.callback(null, extracted.js, extracted.map)\n  } catch (err) {\n    console.error('ERROR', err)\n    return this.callback(null, source)\n  }\n}\n"],
-  "mappings": ";;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AAEA,MAAM,kBAAkB;AACxB,MAAM,YAAY,gBAAgB;AAElC,IAAI,QAAQ;AACZ,IAAI,YAAY;AAChB,IAAI,aAAa;AAEjB,QAAQ,IAAI,iBAAiB;AAEtB,gBAA0C,QAAgB;AAC/D,OAAK,UAAU;AACf,OAAK,MAAM;AAEX,MAAI,CAAC,QAAQ,IAAI,6BAA6B,CAAC,YAAY;AACzD,wBAAoB;AACpB,iBAAa;AAAA,EACf;AAEA,MAAI;AACF,UAAM,WAAW,KAAK,aAAa;AACnC,UAAM,UAA0B,KAAK,KAAK,WAAW,EAAE;AACvD,UAAM,aAAa,GAAG,KAAK;AAC3B,UAAM,oBAAoB,OAAO,OAAO,OAAO,OAAO,OAAO;AAE7D,QAAI,mBACD,CAAC,CAAC,QAAQ,IAAI,SACZ,SAAQ,IAAI,aAAa,WAAW,SAAS,QAAQ,IAAI,UAAU,IAAI,SAEzE,qBAAsB,QAAO,WAAW,UAAU,KAAK,OAAO,WAAW,WAAW;AAEvF,QAAI,oBAAoB,OAAO,WAAW,kBAAkB,GAAG;AAC7D,yBAAmB;AAAA,IACrB;AAGA,QACE,qBACC,QAAO,WAAW,mBAAmB,KAAK,OAAO,WAAW,oBAAoB,IACjF;AACA,aAAO,KAAK,SAAS,MAAM,MAAM;AAAA,IACnC;AAEA,UAAM,UAAU,WAAW,GAAG,0BAA0B,GAAG,cAAc;AAEzE,UAAM,YAAY,oBAAoB;AAAA,MACpC,QAAQ;AAAA,MACR;AAAA,MACA,eAA+B;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,QAAI,CAAC,WAAW;AACd,aAAO,KAAK,SAAS,MAAM,MAAM;AAAA,IACnC;AAEA,wBAAoB,IAAI,YAAY,SAAS;AAE7C,QAAI,CAAC,UAAU;AACb,UAAI,UAAU,YAAY;AACxB,4BAAoB,IAAI,UAAU,YAAY,UAAU;AAAA,MAC1D;AAAA,IACF;AAEA,SAAK,SAAS,MAAM,UAAU,IAAI,UAAU,GAAG;AAAA,EACjD,SAAS,KAAP;AACA,YAAQ,MAAM,SAAS,GAAG;AAC1B,WAAO,KAAK,SAAS,MAAM,MAAM;AAAA,EACnC;AACF;AAhEgB;",
-  "names": []
+  "sourcesContent": ["import { Color, colorLog } from '@tamagui/cli-color'\nimport {\n  TamaguiOptions,\n  createExtractor,\n  extractToClassNames,\n  getPragmaOptions,\n} from '@tamagui/static'\n\nimport { extractedInfoByFile, stylePathToFilePath } from './css'\n\nError.stackTraceLimit = Infinity\n\n// pass loader as path\nconst CSS_LOADER_PATH = require.resolve('./css')\n\nError.stackTraceLimit = Infinity\nconst extractor = createExtractor()\n\nlet index = 0\n\nprocess.env.TAMAGUI_TARGET = 'web'\n\nexport const loader = async function loader(this, sourceIn: Buffer | string) {\n  this.cacheable(true)\n  const callback = this.async()\n  const source = sourceIn.toString()\n\n  try {\n    const threaded = this.emitFile === undefined\n    const options: TamaguiOptions = { ...this.getOptions() }\n    const sourcePath = `${this.resourcePath}`\n    const { shouldDisable, shouldPrintDebug } = getPragmaOptions({ source, path: sourcePath })\n\n    if (shouldDisable) {\n      if (shouldPrintDebug) {\n        // eslint-disable-next-line no-console\n        console.log(`Disabling on file via pragma`)\n      }\n      return callback(null, source)\n    }\n\n    const cssPath = threaded ? `${sourcePath}.module.css` : `${sourcePath}.${index++}.module.css`\n\n    const extracted = await extractToClassNames({\n      extractor,\n      source,\n      sourcePath,\n      options,\n      shouldPrintDebug,\n    })\n\n    if (!extracted) {\n      return callback(null, source)\n    }\n\n    // add import to css\n    if (extracted.styles) {\n      const cssQuery = threaded\n        ? `cssData=${Buffer.from(extracted.styles).toString('base64')}`\n        : `cssPath=${cssPath}`\n      const remReq = this.remainingRequest\n      const importPath = `${cssPath}!=!${CSS_LOADER_PATH}?${cssQuery}!${remReq}`\n      extracted.js = `${extracted.js}\\n\\nrequire(${JSON.stringify(importPath)})`\n    }\n\n    extractedInfoByFile.set(sourcePath, extracted)\n\n    if (!threaded) {\n      if (extracted.stylesPath) {\n        stylePathToFilePath.set(extracted.stylesPath, sourcePath)\n      }\n    }\n\n    callback(null, extracted.js, extracted.map)\n  } catch (err) {\n    const message = err instanceof Error ? `${err.message}\\n${err.stack}` : String(err)\n\n    // eslint-disable-next-line no-console\n    console.error('Tamagui Webpack Loader Error:\\n', `  ${message}\\n`)\n\n    if (message.includes(`Cannot create proxy`)) {\n      // eslint-disable-next-line no-console\n      console.log(\n        `This is usually due to components not loading at build-time. Check for logs just below the line above:`\n      )\n      colorLog(Color.FgYellow, `\"Tamagui built config and components\"`)\n    }\n\n    return this.callback(null, source)\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,OAAO,gBAAgB;AAChC;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,qBAAqB,2BAA2B;AAEzD,MAAM,kBAAkB;AAGxB,MAAM,kBAAkC;AAExC,MAAM,kBAAkB;AACxB,MAAM,YAAY,gBAAgB;AAElC,IAAI,QAAQ;AAEZ,QAAQ,IAAI,iBAAiB;AAEtB,MAAM,SAAS,eAAeA,QAAa,UAA2B;AAC3E,OAAK,UAAU,IAAI;AACnB,QAAM,WAAW,KAAK,MAAM;AAC5B,QAAM,SAAS,SAAS,SAAS;AAEjC,MAAI;AACF,UAAM,WAAW,KAAK,aAAa;AACnC,UAAM,UAA0B,EAAE,GAAG,KAAK,WAAW,EAAE;AACvD,UAAM,aAAa,GAAG,KAAK;AAC3B,UAAM,EAAE,eAAe,iBAAiB,IAAI,iBAAiB,EAAE,QAAQ,MAAM,WAAW,CAAC;AAEzF,QAAI,eAAe;AACjB,UAAI,kBAAkB;AAEpB,gBAAQ,IAAI,8BAA8B;AAAA,MAC5C;AACA,aAAO,SAAS,MAAM,MAAM;AAAA,IAC9B;AAEA,UAAM,UAAU,WAAW,GAAG,0BAA0B,GAAG,cAAc;AAEzE,UAAM,YAAY,MAAM,oBAAoB;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,QAAI,CAAC,WAAW;AACd,aAAO,SAAS,MAAM,MAAM;AAAA,IAC9B;AAGA,QAAI,UAAU,QAAQ;AACpB,YAAM,WAAW,WACb,WAAW,OAAO,KAAK,UAAU,MAAM,EAAE,SAAS,QAAQ,MAC1D,WAAW;AACf,YAAM,SAAS,KAAK;AACpB,YAAM,aAAa,GAAG,aAAa,mBAAmB,YAAY;AAClE,gBAAU,KAAK,GAAG,UAAU;AAAA;AAAA,UAAiB,KAAK,UAAU,UAAU;AAAA,IACxE;AAEA,wBAAoB,IAAI,YAAY,SAAS;AAE7C,QAAI,CAAC,UAAU;AACb,UAAI,UAAU,YAAY;AACxB,4BAAoB,IAAI,UAAU,YAAY,UAAU;AAAA,MAC1D;AAAA,IACF;AAEA,aAAS,MAAM,UAAU,IAAI,UAAU,GAAG;AAAA,EAC5C,SAAS,KAAP;AACA,UAAM,UAAU,eAAe,QAAQ,GAAG,IAAI;AAAA,EAAY,IAAI,UAAU,OAAO,GAAG;AAGlF,YAAQ,MAAM,mCAAmC,KAAK;AAAA,CAAW;AAEjE,QAAI,QAAQ,SAAS,qBAAqB,GAAG;AAE3C,cAAQ;AAAA,QACN;AAAA,MACF;AACA,eAAS,MAAM,UAAU,uCAAuC;AAAA,IAClE;AAEA,WAAO,KAAK,SAAS,MAAM,MAAM;AAAA,EACnC;AACF;",
+  "names": ["loader"]
 }

package/dist/jsx/css.js

@@ -1,31 +1,28 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 const extractedInfoByFile = /* @__PURE__ */ new Map();
 const stylePathToFilePath = /* @__PURE__ */ new Map();
-function loader(source) {
-  var _a;
+function loader() {
   this.async();
   const options = { ...this.getOptions() };
   const sourcePath = `${this.resourcePath}`;
   let out = "";
   if (options.cssPath) {
-    const pathKey = (_a = stylePathToFilePath.get(sourcePath)) != null ? _a : sourcePath;
+    const pathKey = stylePathToFilePath.get(sourcePath) ?? sourcePath;
     const info = extractedInfoByFile.get(pathKey);
     stylePathToFilePath.delete(sourcePath);
     extractedInfoByFile.delete(pathKey);
-    const out2 = info == null ? void 0 : info.styles;
+    const out2 = info?.styles;
     return this.callback(null, out2 || "");
   } else if (options.cssData) {
     out = Buffer.from(options.cssData, "base64").toString("utf-8");
   }
-  if (options.cssData || options.cssPath) {
+  if (out) {
     return this.callback(null, out || "");
   }
   this.callback({ message: `No CSS found`, name: "missing_css" });
 }
-__name(loader, "loader");
 export {
   loader as default,
   extractedInfoByFile,
   stylePathToFilePath
 };
+//# sourceMappingURL=css.js.map

package/dist/jsx/css.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/css.ts"],
+  "sourcesContent": ["import { ExtractedResponse, TamaguiOptions } from '@tamagui/static'\nimport { LoaderContext } from 'webpack'\n\nexport const extractedInfoByFile = new Map<string, ExtractedResponse>()\nexport const stylePathToFilePath = new Map<string, string>()\n\nexport default function loader(this: LoaderContext<any>) {\n  this.async()\n  const options: TamaguiOptions = { ...this.getOptions() }\n  const sourcePath = `${this.resourcePath}`\n  let out = ''\n  if (options.cssPath) {\n    // get in memory info\n    const pathKey = stylePathToFilePath.get(sourcePath) ?? sourcePath\n    const info = extractedInfoByFile.get(pathKey)\n    // clear memory\n    stylePathToFilePath.delete(sourcePath)\n    extractedInfoByFile.delete(pathKey)\n    const out = info?.styles\n    return this.callback(null, out || '')\n  } else if (options.cssData) {\n    // get output CSS\n    out = Buffer.from(options.cssData, 'base64').toString('utf-8')\n  }\n  if (out) {\n    // use original JS sourcemap\n    return this.callback(null, out || '')\n  }\n  this.callback({ message: `No CSS found`, name: 'missing_css' })\n}\n"],
+  "mappings": "AAGO,MAAM,sBAAsB,oBAAI,IAA+B;AAC/D,MAAM,sBAAsB,oBAAI,IAAoB;AAE5C,SAAR,SAAkD;AACvD,OAAK,MAAM;AACX,QAAM,UAA0B,EAAE,GAAG,KAAK,WAAW,EAAE;AACvD,QAAM,aAAa,GAAG,KAAK;AAC3B,MAAI,MAAM;AACV,MAAI,QAAQ,SAAS;AAEnB,UAAM,UAAU,oBAAoB,IAAI,UAAU,KAAK;AACvD,UAAM,OAAO,oBAAoB,IAAI,OAAO;AAE5C,wBAAoB,OAAO,UAAU;AACrC,wBAAoB,OAAO,OAAO;AAClC,UAAMA,OAAM,MAAM;AAClB,WAAO,KAAK,SAAS,MAAMA,QAAO,EAAE;AAAA,EACtC,WAAW,QAAQ,SAAS;AAE1B,UAAM,OAAO,KAAK,QAAQ,SAAS,QAAQ,EAAE,SAAS,OAAO;AAAA,EAC/D;AACA,MAAI,KAAK;AAEP,WAAO,KAAK,SAAS,MAAM,OAAO,EAAE;AAAA,EACtC;AACA,OAAK,SAAS,EAAE,SAAS,gBAAgB,MAAM,cAAc,CAAC;AAChE;",
+  "names": ["out"]
+}

package/dist/jsx/index.js

@@ -1,15 +1,19 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import path from "path";
 process.env.TAMAGUI_TARGET = process.env.TAMAGUI_TARGET || "web";
 process.env.TAMAGUI_COMPILE_PROCESS = "1";
+process.env.IS_STATIC = "is_static";
 var src_default = require("./loader").loader;
-const shouldExclude = /* @__PURE__ */ __name((path, projectRoot, tamaguiOptions) => {
-  if (path.includes("react-native-reanimated") || path.includes("react-native-gesture-handler") || path.includes("@gorhom/portal") || path.includes(projectRoot) || path.includes("/dist/jsx/")) {
+const shouldExclude = (filePath, projectRoot) => {
+  if (filePath.includes("react-native-web") || filePath.includes("react-native-gesture-handler") || filePath.includes("@gorhom") || filePath.includes(projectRoot) || isTamaguiDistJSX(filePath)) {
     return false;
   }
   return true;
-}, "shouldExclude");
+};
+function isTamaguiDistJSX(filePath) {
+  return filePath.includes("/dist/jsx/".replace(/\//g, path.sep));
+}
 export {
   src_default as default,
   shouldExclude
 };
+//# sourceMappingURL=index.js.map

package/dist/jsx/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.ts"],
+  "sourcesContent": ["import path from 'path'\n\nprocess.env.TAMAGUI_TARGET = process.env.TAMAGUI_TARGET || 'web'\nprocess.env.TAMAGUI_COMPILE_PROCESS = '1'\nprocess.env.IS_STATIC = 'is_static'\n\nexport default require('./loader').loader\n\n// helper for webpack exclude specific to tamagui\n\nexport const shouldExclude = (filePath: string, projectRoot: string) => {\n  if (\n    filePath.includes('react-native-web') ||\n    filePath.includes('react-native-gesture-handler') ||\n    filePath.includes('@gorhom') ||\n    filePath.includes(projectRoot) ||\n    isTamaguiDistJSX(filePath)\n  ) {\n    return false\n  }\n  return true\n}\n\nfunction isTamaguiDistJSX(filePath: string) {\n  return filePath.includes('/dist/jsx/'.replace(/\\//g, path.sep))\n}\n"],
+  "mappings": "AAAA,OAAO,UAAU;AAEjB,QAAQ,IAAI,iBAAiB,QAAQ,IAAI,kBAAkB;AAC3D,QAAQ,IAAI,0BAA0B;AACtC,QAAQ,IAAI,YAAY;AAExB,IAAO,cAAQ,QAAQ,UAAU,EAAE;AAI5B,MAAM,gBAAgB,CAAC,UAAkB,gBAAwB;AACtE,MACE,SAAS,SAAS,kBAAkB,KACpC,SAAS,SAAS,8BAA8B,KAChD,SAAS,SAAS,SAAS,KAC3B,SAAS,SAAS,WAAW,KAC7B,iBAAiB,QAAQ,GACzB;AACA,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEA,SAAS,iBAAiB,UAAkB;AAC1C,SAAO,SAAS,SAAS,aAAa,QAAQ,OAAO,KAAK,GAAG,CAAC;AAChE;",
+  "names": []
+}

package/dist/jsx/loader.js

@@ -1,50 +1,49 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Color, colorLog } from "@tamagui/cli-color";
 import {
   createExtractor,
   extractToClassNames,
-  patchReactNativeWeb
+  getPragmaOptions
 } from "@tamagui/static";
 import { extractedInfoByFile, stylePathToFilePath } from "./css";
 Error.stackTraceLimit = Infinity;
+const CSS_LOADER_PATH = require.resolve("./css");
+Error.stackTraceLimit = Infinity;
 const extractor = createExtractor();
 let index = 0;
-let hasLogged = false;
-let hasPatched = false;
 process.env.TAMAGUI_TARGET = "web";
-function loader(source) {
-  this.cacheable();
-  this.async();
-  if (!process.env.TAMAGUI_DISABLE_RNW_PATCH && !hasPatched) {
-    patchReactNativeWeb();
-    hasPatched = true;
-  }
+const loader = async function loader2(sourceIn) {
+  this.cacheable(true);
+  const callback = this.async();
+  const source = sourceIn.toString();
   try {
     const threaded = this.emitFile === void 0;
     const options = { ...this.getOptions() };
     const sourcePath = `${this.resourcePath}`;
-    const startsWithComment = source[0] === "/" && source[1] === "/";
-    let shouldPrintDebug = !!process.env.DEBUG && (process.env.DEBUG_FILE ? sourcePath.includes(process.env.DEBUG_FILE) : true) || startsWithComment && (source.startsWith("// debug") || source.startsWith("//! debug"));
-    if (shouldPrintDebug && source.startsWith("// debug-verbose")) {
-      shouldPrintDebug = "verbose";
-    }
-    if (startsWithComment && (source.startsWith("// tamagui-ignore") || source.startsWith("//! tamagui-ignore"))) {
-      return this.callback(null, source);
+    const { shouldDisable, shouldPrintDebug } = getPragmaOptions({ source, path: sourcePath });
+    if (shouldDisable) {
+      if (shouldPrintDebug) {
+        console.log(`Disabling on file via pragma`);
+      }
+      return callback(null, source);
     }
     const cssPath = threaded ? `${sourcePath}.module.css` : `${sourcePath}.${index++}.module.css`;
-    const extracted = extractToClassNames({
-      loader: this,
+    const extracted = await extractToClassNames({
       extractor,
-      cssLoaderPath: require.resolve("./css"),
       source,
-      threaded,
       sourcePath,
-      cssPath,
       options,
       shouldPrintDebug
     });
     if (!extracted) {
-      return this.callback(null, source);
+      return callback(null, source);
+    }
+    if (extracted.styles) {
+      const cssQuery = threaded ? `cssData=${Buffer.from(extracted.styles).toString("base64")}` : `cssPath=${cssPath}`;
+      const remReq = this.remainingRequest;
+      const importPath = `${cssPath}!=!${CSS_LOADER_PATH}?${cssQuery}!${remReq}`;
+      extracted.js = `${extracted.js}
+
+require(${JSON.stringify(importPath)})`;
     }
     extractedInfoByFile.set(sourcePath, extracted);
     if (!threaded) {
@@ -52,13 +51,22 @@ function loader(source) {
         stylePathToFilePath.set(extracted.stylesPath, sourcePath);
       }
     }
-    this.callback(null, extracted.js, extracted.map);
+    callback(null, extracted.js, extracted.map);
   } catch (err) {
-    console.error("ERROR", err);
+    const message = err instanceof Error ? `${err.message}
+${err.stack}` : String(err);
+    console.error("Tamagui Webpack Loader Error:\n", `  ${message}
+`);
+    if (message.includes(`Cannot create proxy`)) {
+      console.log(
+        `This is usually due to components not loading at build-time. Check for logs just below the line above:`
+      );
+      colorLog(Color.FgYellow, `"Tamagui built config and components"`);
+    }
     return this.callback(null, source);
   }
-}
-__name(loader, "loader");
+};
 export {
   loader
 };
+//# sourceMappingURL=loader.js.map

package/dist/jsx/loader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/loader.ts"],
+  "sourcesContent": ["import { Color, colorLog } from '@tamagui/cli-color'\nimport {\n  TamaguiOptions,\n  createExtractor,\n  extractToClassNames,\n  getPragmaOptions,\n} from '@tamagui/static'\n\nimport { extractedInfoByFile, stylePathToFilePath } from './css'\n\nError.stackTraceLimit = Infinity\n\n// pass loader as path\nconst CSS_LOADER_PATH = require.resolve('./css')\n\nError.stackTraceLimit = Infinity\nconst extractor = createExtractor()\n\nlet index = 0\n\nprocess.env.TAMAGUI_TARGET = 'web'\n\nexport const loader = async function loader(this, sourceIn: Buffer | string) {\n  this.cacheable(true)\n  const callback = this.async()\n  const source = sourceIn.toString()\n\n  try {\n    const threaded = this.emitFile === undefined\n    const options: TamaguiOptions = { ...this.getOptions() }\n    const sourcePath = `${this.resourcePath}`\n    const { shouldDisable, shouldPrintDebug } = getPragmaOptions({ source, path: sourcePath })\n\n    if (shouldDisable) {\n      if (shouldPrintDebug) {\n        // eslint-disable-next-line no-console\n        console.log(`Disabling on file via pragma`)\n      }\n      return callback(null, source)\n    }\n\n    const cssPath = threaded ? `${sourcePath}.module.css` : `${sourcePath}.${index++}.module.css`\n\n    const extracted = await extractToClassNames({\n      extractor,\n      source,\n      sourcePath,\n      options,\n      shouldPrintDebug,\n    })\n\n    if (!extracted) {\n      return callback(null, source)\n    }\n\n    // add import to css\n    if (extracted.styles) {\n      const cssQuery = threaded\n        ? `cssData=${Buffer.from(extracted.styles).toString('base64')}`\n        : `cssPath=${cssPath}`\n      const remReq = this.remainingRequest\n      const importPath = `${cssPath}!=!${CSS_LOADER_PATH}?${cssQuery}!${remReq}`\n      extracted.js = `${extracted.js}\\n\\nrequire(${JSON.stringify(importPath)})`\n    }\n\n    extractedInfoByFile.set(sourcePath, extracted)\n\n    if (!threaded) {\n      if (extracted.stylesPath) {\n        stylePathToFilePath.set(extracted.stylesPath, sourcePath)\n      }\n    }\n\n    callback(null, extracted.js, extracted.map)\n  } catch (err) {\n    const message = err instanceof Error ? `${err.message}\\n${err.stack}` : String(err)\n\n    // eslint-disable-next-line no-console\n    console.error('Tamagui Webpack Loader Error:\\n', `  ${message}\\n`)\n\n    if (message.includes(`Cannot create proxy`)) {\n      // eslint-disable-next-line no-console\n      console.log(\n        `This is usually due to components not loading at build-time. Check for logs just below the line above:`\n      )\n      colorLog(Color.FgYellow, `\"Tamagui built config and components\"`)\n    }\n\n    return this.callback(null, source)\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,OAAO,gBAAgB;AAChC;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,qBAAqB,2BAA2B;AAEzD,MAAM,kBAAkB;AAGxB,MAAM,kBAAkC;AAExC,MAAM,kBAAkB;AACxB,MAAM,YAAY,gBAAgB;AAElC,IAAI,QAAQ;AAEZ,QAAQ,IAAI,iBAAiB;AAEtB,MAAM,SAAS,eAAeA,QAAa,UAA2B;AAC3E,OAAK,UAAU,IAAI;AACnB,QAAM,WAAW,KAAK,MAAM;AAC5B,QAAM,SAAS,SAAS,SAAS;AAEjC,MAAI;AACF,UAAM,WAAW,KAAK,aAAa;AACnC,UAAM,UAA0B,EAAE,GAAG,KAAK,WAAW,EAAE;AACvD,UAAM,aAAa,GAAG,KAAK;AAC3B,UAAM,EAAE,eAAe,iBAAiB,IAAI,iBAAiB,EAAE,QAAQ,MAAM,WAAW,CAAC;AAEzF,QAAI,eAAe;AACjB,UAAI,kBAAkB;AAEpB,gBAAQ,IAAI,8BAA8B;AAAA,MAC5C;AACA,aAAO,SAAS,MAAM,MAAM;AAAA,IAC9B;AAEA,UAAM,UAAU,WAAW,GAAG,0BAA0B,GAAG,cAAc;AAEzE,UAAM,YAAY,MAAM,oBAAoB;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,QAAI,CAAC,WAAW;AACd,aAAO,SAAS,MAAM,MAAM;AAAA,IAC9B;AAGA,QAAI,UAAU,QAAQ;AACpB,YAAM,WAAW,WACb,WAAW,OAAO,KAAK,UAAU,MAAM,EAAE,SAAS,QAAQ,MAC1D,WAAW;AACf,YAAM,SAAS,KAAK;AACpB,YAAM,aAAa,GAAG,aAAa,mBAAmB,YAAY;AAClE,gBAAU,KAAK,GAAG,UAAU;AAAA;AAAA,UAAiB,KAAK,UAAU,UAAU;AAAA,IACxE;AAEA,wBAAoB,IAAI,YAAY,SAAS;AAE7C,QAAI,CAAC,UAAU;AACb,UAAI,UAAU,YAAY;AACxB,4BAAoB,IAAI,UAAU,YAAY,UAAU;AAAA,MAC1D;AAAA,IACF;AAEA,aAAS,MAAM,UAAU,IAAI,UAAU,GAAG;AAAA,EAC5C,SAAS,KAAP;AACA,UAAM,UAAU,eAAe,QAAQ,GAAG,IAAI;AAAA,EAAY,IAAI,UAAU,OAAO,GAAG;AAGlF,YAAQ,MAAM,mCAAmC,KAAK;AAAA,CAAW;AAEjE,QAAI,QAAQ,SAAS,qBAAqB,GAAG;AAE3C,cAAQ;AAAA,QACN;AAAA,MACF;AACA,eAAS,MAAM,UAAU,uCAAuC;AAAA,IAClE;AAEA,WAAO,KAAK,SAAS,MAAM,MAAM;AAAA,EACnC;AACF;",
+  "names": ["loader"]
+}

package/package.json

@@ -1,27 +1,31 @@
 {
   "name": "tamagui-loader",
-  "version": "1.0.1-beta.21",
-  "typings": "types",
+  "version": "1.0.1-beta.210",
+  "types": "./types/index.d.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
   "module:jsx": "dist/jsx",
   "files": [
+    "src",
     "types",
     "dist"
   ],
   "scripts": {
     "build": "tamagui-build",
     "watch": "tamagui-build --watch",
+    "lint": "eslint",
+    "lint:fix": "yarn lint --fix",
     "clean": "tamagui-build clean",
     "clean:build": "tamagui-build clean:build"
   },
   "dependencies": {
-    "@tamagui/static": "^1.0.1-beta.21",
-    "fs-extra": "^9.1.0",
+    "@tamagui/cli-color": "^1.0.1-beta.210",
+    "@tamagui/static": "^1.0.1-beta.210",
+    "fs-extra": "^10.1.0",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.21"
+    "@tamagui/build": "^1.0.1-beta.210"
   },
   "publishConfig": {
     "access": "public"

package/src/css.ts

@@ -0,0 +1,30 @@
+import { ExtractedResponse, TamaguiOptions } from '@tamagui/static'
+import { LoaderContext } from 'webpack'
+
+export const extractedInfoByFile = new Map<string, ExtractedResponse>()
+export const stylePathToFilePath = new Map<string, string>()
+
+export default function loader(this: LoaderContext<any>) {
+  this.async()
+  const options: TamaguiOptions = { ...this.getOptions() }
+  const sourcePath = `${this.resourcePath}`
+  let out = ''
+  if (options.cssPath) {
+    // get in memory info
+    const pathKey = stylePathToFilePath.get(sourcePath) ?? sourcePath
+    const info = extractedInfoByFile.get(pathKey)
+    // clear memory
+    stylePathToFilePath.delete(sourcePath)
+    extractedInfoByFile.delete(pathKey)
+    const out = info?.styles
+    return this.callback(null, out || '')
+  } else if (options.cssData) {
+    // get output CSS
+    out = Buffer.from(options.cssData, 'base64').toString('utf-8')
+  }
+  if (out) {
+    // use original JS sourcemap
+    return this.callback(null, out || '')
+  }
+  this.callback({ message: `No CSS found`, name: 'missing_css' })
+}

package/src/index.ts

@@ -0,0 +1,26 @@
+import path from 'path'
+
+process.env.TAMAGUI_TARGET = process.env.TAMAGUI_TARGET || 'web'
+process.env.TAMAGUI_COMPILE_PROCESS = '1'
+process.env.IS_STATIC = 'is_static'
+
+export default require('./loader').loader
+
+// helper for webpack exclude specific to tamagui
+
+export const shouldExclude = (filePath: string, projectRoot: string) => {
+  if (
+    filePath.includes('react-native-web') ||
+    filePath.includes('react-native-gesture-handler') ||
+    filePath.includes('@gorhom') ||
+    filePath.includes(projectRoot) ||
+    isTamaguiDistJSX(filePath)
+  ) {
+    return false
+  }
+  return true
+}
+
+function isTamaguiDistJSX(filePath: string) {
+  return filePath.includes('/dist/jsx/'.replace(/\//g, path.sep))
+}

package/src/loader.ts

@@ -0,0 +1,91 @@
+import { Color, colorLog } from '@tamagui/cli-color'
+import {
+  TamaguiOptions,
+  createExtractor,
+  extractToClassNames,
+  getPragmaOptions,
+} from '@tamagui/static'
+
+import { extractedInfoByFile, stylePathToFilePath } from './css'
+
+Error.stackTraceLimit = Infinity
+
+// pass loader as path
+const CSS_LOADER_PATH = require.resolve('./css')
+
+Error.stackTraceLimit = Infinity
+const extractor = createExtractor()
+
+let index = 0
+
+process.env.TAMAGUI_TARGET = 'web'
+
+export const loader = async function loader(this, sourceIn: Buffer | string) {
+  this.cacheable(true)
+  const callback = this.async()
+  const source = sourceIn.toString()
+
+  try {
+    const threaded = this.emitFile === undefined
+    const options: TamaguiOptions = { ...this.getOptions() }
+    const sourcePath = `${this.resourcePath}`
+    const { shouldDisable, shouldPrintDebug } = getPragmaOptions({ source, path: sourcePath })
+
+    if (shouldDisable) {
+      if (shouldPrintDebug) {
+        // eslint-disable-next-line no-console
+        console.log(`Disabling on file via pragma`)
+      }
+      return callback(null, source)
+    }
+
+    const cssPath = threaded ? `${sourcePath}.module.css` : `${sourcePath}.${index++}.module.css`
+
+    const extracted = await extractToClassNames({
+      extractor,
+      source,
+      sourcePath,
+      options,
+      shouldPrintDebug,
+    })
+
+    if (!extracted) {
+      return callback(null, source)
+    }
+
+    // add import to css
+    if (extracted.styles) {
+      const cssQuery = threaded
+        ? `cssData=${Buffer.from(extracted.styles).toString('base64')}`
+        : `cssPath=${cssPath}`
+      const remReq = this.remainingRequest
+      const importPath = `${cssPath}!=!${CSS_LOADER_PATH}?${cssQuery}!${remReq}`
+      extracted.js = `${extracted.js}\n\nrequire(${JSON.stringify(importPath)})`
+    }
+
+    extractedInfoByFile.set(sourcePath, extracted)
+
+    if (!threaded) {
+      if (extracted.stylesPath) {
+        stylePathToFilePath.set(extracted.stylesPath, sourcePath)
+      }
+    }
+
+    callback(null, extracted.js, extracted.map)
+  } catch (err) {
+    const message = err instanceof Error ? `${err.message}\n${err.stack}` : String(err)
+
+    // eslint-disable-next-line no-console
+    console.error('Tamagui Webpack Loader Error:\n', `  ${message}\n`)
+
+    if (message.includes(`Cannot create proxy`)) {
+      // eslint-disable-next-line no-console
+      console.log(
+        `This is usually due to components not loading at build-time. Check for logs just below the line above:`
+      )
+      colorLog(Color.FgYellow, `"Tamagui built config and components"`)
+    }
+
+    return this.callback(null, source)
+  }
+}

package/types/css.d.ts

@@ -2,5 +2,5 @@ import { ExtractedResponse } from '@tamagui/static';
 import { LoaderContext } from 'webpack';
 export declare const extractedInfoByFile: Map<string, ExtractedResponse>;
 export declare const stylePathToFilePath: Map<string, string>;
-export default function loader(this: LoaderContext<any>, source: string): void;
+export default function loader(this: LoaderContext<any>): void;
 //# sourceMappingURL=css.d.ts.map

package/types/index.d.ts

@@ -1,4 +1,4 @@
 declare const _default: any;
 export default _default;
-export declare const shouldExclude: (path: string, projectRoot: string, tamaguiOptions: any) => boolean;
+export declare const shouldExclude: (filePath: string, projectRoot: string) => boolean;
 //# sourceMappingURL=index.d.ts.map

package/types/loader.d.ts

@@ -1,3 +1,3 @@
-import { LoaderContext } from 'webpack';
-export declare function loader(this: LoaderContext<any>, source: string): void;
+/// <reference types="node" />
+export declare const loader: (this: any, sourceIn: Buffer | string) => Promise<any>;
 //# sourceMappingURL=loader.d.ts.map

package/types/css.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAkB,MAAM,iBAAiB,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAEvC,eAAO,MAAM,mBAAmB,gCAAuC,CAAA;AACvE,eAAO,MAAM,mBAAmB,qBAA4B,CAAA;AAE5D,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,QAuBtE"}

package/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAGA,wBAAyC;AAIzC,eAAO,MAAM,aAAa,SAAU,MAAM,eAAe,MAAM,kBAAkB,GAAG,YAWnF,CAAA"}

package/types/loader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"loader.d.ts","sourceRoot":"","sources":["../src/loader.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAavC,wBAAgB,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,MAAM,QAgE9D"}