@tamagui/babel-plugin - npm Package Compare versions

Comparing version 1.0.0-alpha.6 to 1.0.0-alpha.7

dist/index.js

@@ -81,2 +81,3 @@ var __defProp = Object.defineProperty;
             ...options,
+            disableExtractInlineMedia: true,
             sourcePath,
@@ -94,15 +95,19 @@ getFlattenedNode({ isTextView }) {
               let finalAttrs = [];
+              function addStyle(expr, key) {
+                if (props.isFlattened) {
+                  stylesExpr.elements.push(expr);
+                } else {
+                  finalAttrs.push(t.jsxAttribute(t.jsxIdentifier(`_style${key}`), t.jsxExpressionContainer(expr)));
+                }
+              }
+              __name(addStyle, "addStyle");
               for (const attr of props.attrs) {
-                let addStyle = function(expr, key) {
-                  if (props.isFlattened) {
-                    stylesExpr.elements.push(expr);
-                  } else {
-                    finalAttrs.push(t.jsxAttribute(t.jsxIdentifier(`_style${key}`), t.jsxExpressionContainer(expr)));
-                  }
-                };
-                __name(addStyle, "addStyle");
                 switch (attr.type) {
                   case "style":
-                    const ident = addSheetStyle(attr.value, props.node);
-                    addStyle(ident, simpleHash(JSON.stringify(attr.value)));
+                    const { themed, plain } = splitThemeStyles(attr.value);
+                    for (const key in themed) {
+                      finalAttrs.push(t.jsxAttribute(t.jsxIdentifier(key), t.stringLiteral(themed[key])));
+                    }
+                    const ident = addSheetStyle(plain, props.node);
+                    addStyle(ident, simpleHash(JSON.stringify(plain)));
                     break;
@@ -168,2 +173,16 @@ case "ternary":
 }, "simpleHash");
+function splitThemeStyles(style) {
+  const themed = {};
+  const plain = {};
+  for (const key in style) {
+    const val = style[key];
+    if (val && val[0] === "$") {
+      themed[key] = val;
+    } else {
+      plain[key] = val;
+    }
+  }
+  return { themed, plain };
+}
+__name(splitThemeStyles, "splitThemeStyles");
 export {
@@ -170,0 +189,0 @@ src_default as default

package.json

 {
   "name": "@tamagui/babel-plugin",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "source": "src/index.ts",
@@ -28,5 +28,5 @@ "main": "dist/index.cjs",
     "@tamagui/build": "^1.0.0-alpha.2",
-    "@tamagui/static": "^1.0.0-alpha.6"
+    "@tamagui/static": "^1.0.0-alpha.7"
   },
-  "gitHead": "18a942d7a08109c8f5b8692a2adb20c69d56a7e1"
+  "gitHead": "13694a98d31535846699004532630788177537e9"
 }

src/index.ts

@@ -107,2 +107,6 @@ process.env.TAMAGUI_COMPILE_PROCESS = '1'
             ...options,
+            // disable this extraction for now at least, need to figure out merging theme vs non-theme
+            // because theme need to stay in render(), whereas non-theme can be extracted
+            // for now just turn it off entirely at a small perf loss
+            disableExtractInlineMedia: true,
             sourcePath,
@@ -121,21 +125,27 @@ getFlattenedNode({ isTextView }) {
 
+              function addStyle(expr: any, key: string) {
+                if (props.isFlattened) {
+                  stylesExpr.elements.push(expr)
+                } else {
+                  finalAttrs.push(
+                    t.jsxAttribute(t.jsxIdentifier(`_style${key}`), t.jsxExpressionContainer(expr))
+                  )
+                }
+              }
+
               for (const attr of props.attrs) {
-                function addStyle(expr: any, key: string) {
-                  if (props.isFlattened) {
-                    stylesExpr.elements.push(expr)
-                  } else {
-                    finalAttrs.push(
-                      t.jsxAttribute(
-                        t.jsxIdentifier(`_style${key}`),
-                        t.jsxExpressionContainer(expr)
-                      )
-                    )
-                  }
-                }
                 switch (attr.type) {
                   case 'style':
-                    const ident = addSheetStyle(attr.value, props.node)
-                    addStyle(ident, simpleHash(JSON.stringify(attr.value)))
+                    // split theme properties and leave them as props since RN has no concept of theme
+                    const { themed, plain } = splitThemeStyles(attr.value)
+                    for (const key in themed) {
+                      finalAttrs.push(
+                        t.jsxAttribute(t.jsxIdentifier(key), t.stringLiteral(themed[key]))
+                      )
+                    }
+                    const ident = addSheetStyle(plain, props.node)
+                    addStyle(ident, simpleHash(JSON.stringify(plain)))
                     break
                   case 'ternary':
+                    // TODO use splitThemeStyles
                     const { consequent, alternate } = attr.value
@@ -212,1 +222,15 @@ const cons = addSheetStyle(consequent, props.node)
 }
+
+function splitThemeStyles(style: Object) {
+  const themed = {}
+  const plain = {}
+  for (const key in style) {
+    const val = style[key]
+    if (val && val[0] === '$') {
+      themed[key] = val
+    } else {
+      plain[key] = val
+    }
+  }
+  return { themed, plain }
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50540

increased by10.13%

Lines of code

622

increased by10.68%

No dependency changes