@tamagui/web 1.46.0 → 1.46.2

package/dist/esm/helpers/getThemeCSSRules.js

@@ -2,106 +2,104 @@ import { simpleHash } from "@tamagui/helpers";
 import { THEME_CLASSNAME_PREFIX } from "../constants/constants";
 import { variableToString } from "../createVariable";
 import { tokensValueToVariable } from "./registerCSSVariable";
-function getThemeCSSRules({
-  config,
-  themeName,
-  theme,
-  names
-}) {
+function getThemeCSSRules(props) {
   const cssRuleSets = [];
-  const hasDarkLight = "light" in config.themes && "dark" in config.themes;
-  const CNP = `.${THEME_CLASSNAME_PREFIX}`;
-  let vars = "";
-  for (const themeKey in theme) {
-    const variable = theme[themeKey];
-    let value = null;
-    if (!tokensValueToVariable.has(variable.val)) {
-      value = variable.val;
-    } else {
-      value = tokensValueToVariable.get(variable.val).variable;
-    }
-    vars += `--${simpleHash(themeKey, 40)}:${value};`;
-  }
-  const isDarkOrLightBase = themeName === "dark" || themeName === "light";
-  const baseSelectors = names.map((name) => `${CNP}${name}`);
-  const selectorsSet = new Set(baseSelectors);
-  if (hasDarkLight) {
-    for (const subName of names) {
-      const isDark = themeName === "dark" || subName.startsWith("dark_");
-      const isLight = themeName === "light" || themeName.startsWith("light_");
-      const maxDepth = config.maxDarkLightNesting ?? 3;
-      if (!(isDark || isLight)) {
-        selectorsSet.add(`:root:root ${CNP}${subName}`);
-        continue;
+  if (process.env.TAMAGUI_DOES_SSR_CSS !== "true") {
+    const { config, themeName, theme, names } = props;
+    const hasDarkLight = "light" in config.themes && "dark" in config.themes;
+    const CNP = `.${THEME_CLASSNAME_PREFIX}`;
+    let vars = "";
+    for (const themeKey in theme) {
+      const variable = theme[themeKey];
+      let value = null;
+      if (!tokensValueToVariable.has(variable.val)) {
+        value = variable.val;
+      } else {
+        value = tokensValueToVariable.get(variable.val).variable;
       }
-      const childSelector = `${CNP}${subName.replace(/^(dark|light)_/, "")}`;
-      const [altLightDark, altSubTheme] = [
-        isDark ? ["dark", "light"] : ["light", "dark"],
-        isDark ? ["dark", "sub_theme"] : ["light", "sub_theme"]
-      ];
-      for (const order of [altLightDark, altSubTheme]) {
-        if (isDarkOrLightBase) {
-          order.reverse();
+      vars += `--${simpleHash(themeKey, 40)}:${value};`;
+    }
+    const isDarkOrLightBase = themeName === "dark" || themeName === "light";
+    const baseSelectors = names.map((name) => `${CNP}${name}`);
+    const selectorsSet = new Set(baseSelectors);
+    if (hasDarkLight) {
+      for (const subName of names) {
+        const isDark = themeName === "dark" || subName.startsWith("dark_");
+        const isLight = themeName === "light" || themeName.startsWith("light_");
+        const maxDepth = config.maxDarkLightNesting ?? 3;
+        if (!(isDark || isLight)) {
+          selectorsSet.add(`:root:root ${CNP}${subName}`);
+          continue;
         }
-        const [stronger, weaker] = order;
-        const numSelectors = Math.round(maxDepth * 1.5);
-        for (let depth = 0; depth < numSelectors; depth++) {
-          const isOdd = depth % 2 === 1;
-          if (isOdd && depth < 3) {
-            continue;
+        const childSelector = `${CNP}${subName.replace(/^(dark|light)_/, "")}`;
+        const [altLightDark, altSubTheme] = [
+          isDark ? ["dark", "light"] : ["light", "dark"],
+          isDark ? ["dark", "sub_theme"] : ["light", "sub_theme"]
+        ];
+        for (const order of [altLightDark, altSubTheme]) {
+          if (isDarkOrLightBase) {
+            order.reverse();
           }
-          const parents = new Array(depth + 1).fill(0).map((_, psi) => {
-            return `${CNP}${psi % 2 === 0 ? stronger : weaker}`;
-          });
-          let parentSelectors = parents.length > 1 ? parents.slice(1) : parents;
-          if (isOdd) {
-            const [_first, second, ...rest] = parentSelectors;
-            parentSelectors = [second, ...rest, second];
+          const [stronger, weaker] = order;
+          const numSelectors = Math.round(maxDepth * 1.5);
+          for (let depth = 0; depth < numSelectors; depth++) {
+            const isOdd = depth % 2 === 1;
+            if (isOdd && depth < 3) {
+              continue;
+            }
+            const parents = new Array(depth + 1).fill(0).map((_, psi) => {
+              return `${CNP}${psi % 2 === 0 ? stronger : weaker}`;
+            });
+            let parentSelectors = parents.length > 1 ? parents.slice(1) : parents;
+            if (isOdd) {
+              const [_first, second, ...rest] = parentSelectors;
+              parentSelectors = [second, ...rest, second];
+            }
+            const lastParentSelector = parentSelectors[parentSelectors.length - 1];
+            const nextChildSelector = childSelector === lastParentSelector ? "" : childSelector;
+            selectorsSet.add(`${parentSelectors.join(" ")} ${nextChildSelector}`.trim());
           }
-          const lastParentSelector = parentSelectors[parentSelectors.length - 1];
-          const nextChildSelector = childSelector === lastParentSelector ? "" : childSelector;
-          selectorsSet.add(`${parentSelectors.join(" ")} ${nextChildSelector}`.trim());
         }
       }
     }
-  }
-  const selectors = [...selectorsSet].sort((a, b) => a.localeCompare(b));
-  const selectorsString = selectors.map((x) => {
-    const rootSep = isBaseTheme(x) && config.themeClassNameOnRoot ? "" : " ";
-    return `:root${rootSep}${x}`;
-  }).join(", ");
-  const css = `${selectorsString} {${vars}}`;
-  cssRuleSets.push(css);
-  if (config.shouldAddPrefersColorThemes) {
-    const bgString = theme.background ? `background:${variableToString(theme.background)};` : "";
-    const fgString = theme.color ? `color:${variableToString(theme.color)}` : "";
-    const bodyRules = `body{${bgString}${fgString}}`;
-    const isDark = themeName.startsWith("dark");
-    const baseName = isDark ? "dark" : "light";
-    const lessSpecificSelectors = selectors.map((x) => {
-      if (x == darkSelector || x === lightSelector)
-        return `:root`;
-      if (isDark && x.startsWith(lightSelector) || !isDark && x.startsWith(darkSelector)) {
-        return;
+    const selectors = [...selectorsSet].sort((a, b) => a.localeCompare(b));
+    const selectorsString = selectors.map((x) => {
+      const rootSep = isBaseTheme(x) && config.themeClassNameOnRoot ? "" : " ";
+      return `:root${rootSep}${x}`;
+    }).join(", ");
+    const css = `${selectorsString} {${vars}}`;
+    cssRuleSets.push(css);
+    if (config.shouldAddPrefersColorThemes) {
+      const bgString = theme.background ? `background:${variableToString(theme.background)};` : "";
+      const fgString = theme.color ? `color:${variableToString(theme.color)}` : "";
+      const bodyRules = `body{${bgString}${fgString}}`;
+      const isDark = themeName.startsWith("dark");
+      const baseName = isDark ? "dark" : "light";
+      const lessSpecificSelectors = selectors.map((x) => {
+        if (x == darkSelector || x === lightSelector)
+          return `:root`;
+        if (isDark && x.startsWith(lightSelector) || !isDark && x.startsWith(darkSelector)) {
+          return;
+        }
+        return x.replace(/^\.t_(dark|light) /, "").trim();
+      }).filter(Boolean).join(", ");
+      const themeRules = `${lessSpecificSelectors} {${vars}}`;
+      const prefersMediaSelectors = `@media(prefers-color-scheme:${baseName}){
+    ${bodyRules}
+    ${themeRules}
+  }`;
+      cssRuleSets.push(prefersMediaSelectors);
+    }
+    if (config.selectionStyles) {
+      const selectionSelectors = baseSelectors.map((s) => `${s} ::selection`).join(", ");
+      const rules = config.selectionStyles(theme);
+      if (rules) {
+        const styles = Object.entries(rules).flatMap(
+          ([k, v]) => v ? `${k === "backgroundColor" ? "background" : k}:${variableToString(v)}` : []
+        ).join(";");
+        const css2 = `${selectionSelectors} {${styles}}`;
+        cssRuleSets.push(css2);
       }
-      return x.replace(/^\.t_(dark|light) /, "").trim();
-    }).filter(Boolean).join(", ");
-    const themeRules = `${lessSpecificSelectors} {${vars}}`;
-    const prefersMediaSelectors = `@media(prefers-color-scheme:${baseName}){
-  ${bodyRules}
-  ${themeRules}
-}`;
-    cssRuleSets.push(prefersMediaSelectors);
-  }
-  if (config.selectionStyles) {
-    const selectionSelectors = baseSelectors.map((s) => `${s} ::selection`).join(", ");
-    const rules = config.selectionStyles(theme);
-    if (rules) {
-      const styles = Object.entries(rules).flatMap(
-        ([k, v]) => v ? `${k === "backgroundColor" ? "background" : k}:${variableToString(v)}` : []
-      ).join(";");
-      const css2 = `${selectionSelectors} {${styles}}`;
-      cssRuleSets.push(css2);
     }
   }
   return cssRuleSets;

package/dist/esm/helpers/getThemeCSSRules.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/getThemeCSSRules.ts"],
-  "mappings": "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",
+  "mappings": "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",
   "names": ["css"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.46.0",
+  "version": "1.46.2",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,19 +27,19 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "1.46.0",
-    "@tamagui/constants": "1.46.0",
-    "@tamagui/helpers": "1.46.0",
-    "@tamagui/normalize-css-color": "1.46.0",
-    "@tamagui/use-did-finish-ssr": "1.46.0",
-    "@tamagui/use-event": "1.46.0",
-    "@tamagui/use-force-update": "1.46.0"
+    "@tamagui/compose-refs": "1.46.2",
+    "@tamagui/constants": "1.46.2",
+    "@tamagui/helpers": "1.46.2",
+    "@tamagui/normalize-css-color": "1.46.2",
+    "@tamagui/use-did-finish-ssr": "1.46.2",
+    "@tamagui/use-event": "1.46.2",
+    "@tamagui/use-force-update": "1.46.2"
   },
   "peerDependencies": {
     "react": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "1.46.0",
+    "@tamagui/build": "1.46.2",
     "@testing-library/react": "^13.4.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/src/createComponent.tsx

@@ -263,9 +263,6 @@ export function createComponent<
       if (isServer) return false
       const curState = stateRef.current
       const next = !!(hasAnimationProp && !isHOC && useAnimations)
-      if (next && !curState.hasAnimated) {
-        curState.hasAnimated = true
-      }
       return Boolean(next || curState.hasAnimated)
     })()
 
@@ -292,6 +289,8 @@ export function createComponent<
       ? { ...states[0], [propsIn.forceStyle]: true }
       : states[0]
     const setState = states[1]
+
+    // TODO performance optimization could avoid useCallback and just have this be setStateShallow(setState, state) at call-sites
     const setStateShallow = useShallowSetState(setState, debugProp, componentName)
 
     let isAnimated = willBeAnimated
@@ -616,19 +615,26 @@ export function createComponent<
 
     const shouldSetMounted = needsMount && state.unmounted
 
-    // combined two effects into one for performance so be careful with logic
-    // because no need for mouseUp removal effect if its not even mounted yet
+    // combined multiple effects into one for performance so be careful with logic
     useIsomorphicLayoutEffect(() => {
-      if (!shouldSetMounted) {
-        return () => {
-          mouseUps.delete(unPress)
-        }
+      // once animated, always animated to preserve hooks
+      if (willBeAnimated && !stateRef.current.hasAnimated) {
+        stateRef.current.hasAnimated = true
       }
 
-      const unmounted = state.unmounted === true && hasEnterStyle ? 'should-enter' : false
-      setStateShallow({
-        unmounted,
-      })
+      if (shouldSetMounted) {
+        const unmounted =
+          state.unmounted === true && hasEnterStyle ? 'should-enter' : false
+        setStateShallow({
+          unmounted,
+        })
+        return
+        // no need for mouseUp removal effect if its not even mounted yet
+      }
+
+      return () => {
+        mouseUps.delete(unPress)
+      }
     }, [shouldSetMounted, state.unmounted])
 
     let styles: Record<string, any>[] | undefined

package/src/createTamagui.ts

@@ -74,68 +74,70 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     const themes = { ...configIn.themes }
     const cssRuleSets: string[] = []
 
-    if (isWeb) {
-      const declarations: string[] = []
-      const fontDeclarations: Record<
-        string,
-        { name: string; declarations: string[]; language?: string }
-      > = {}
-
-      for (const key in configIn.tokens) {
-        for (const skey in configIn.tokens[key]) {
-          const variable = configIn.tokens[key][skey] as Variable
-
-          // set specific tokens (like $size.sm)
-          specificTokens[`$${key}.${skey}`] = variable
-
-          if (process.env.NODE_ENV === 'development') {
-            if (typeof variable === 'undefined') {
-              throw new Error(
-                `No value for tokens.${key}.${skey}:\n${JSON.stringify(
-                  variable,
-                  null,
-                  2
-                )}`
-              )
+    if (process.env.TAMAGUI_DOES_SSR_CSS !== 'true') {
+      if (isWeb) {
+        const declarations: string[] = []
+        const fontDeclarations: Record<
+          string,
+          { name: string; declarations: string[]; language?: string }
+        > = {}
+
+        for (const key in configIn.tokens) {
+          for (const skey in configIn.tokens[key]) {
+            const variable = configIn.tokens[key][skey] as Variable
+
+            // set specific tokens (like $size.sm)
+            specificTokens[`$${key}.${skey}`] = variable
+
+            if (process.env.NODE_ENV === 'development') {
+              if (typeof variable === 'undefined') {
+                throw new Error(
+                  `No value for tokens.${key}.${skey}:\n${JSON.stringify(
+                    variable,
+                    null,
+                    2
+                  )}`
+                )
+              }
             }
-          }
 
-          registerCSSVariable(variable)
-          declarations.push(variableToCSS(variable, key === 'zIndex'))
+            registerCSSVariable(variable)
+            declarations.push(variableToCSS(variable, key === 'zIndex'))
+          }
         }
-      }
 
-      for (const key in fontsParsed) {
-        const fontParsed = fontsParsed[key]
-        const [name, language] = key.includes('_') ? key.split('_') : [key]
-        const fontVars = registerFontVariables(fontParsed)
-        fontDeclarations[key] = {
-          name: name.slice(1),
-          declarations: fontVars,
-          language,
+        for (const key in fontsParsed) {
+          const fontParsed = fontsParsed[key]
+          const [name, language] = key.includes('_') ? key.split('_') : [key]
+          const fontVars = registerFontVariables(fontParsed)
+          fontDeclarations[key] = {
+            name: name.slice(1),
+            declarations: fontVars,
+            language,
+          }
         }
-      }
 
-      const sep =
-        process.env.NODE_ENV === 'development' ? configIn.cssStyleSeparator || ' ' : ''
+        const sep =
+          process.env.NODE_ENV === 'development' ? configIn.cssStyleSeparator || ' ' : ''
 
-      function declarationsToRuleSet(decs: string[], selector = '') {
-        return `:root${selector} {${sep}${[...decs].join(`;${sep}`)}${sep}}`
-      }
+        function declarationsToRuleSet(decs: string[], selector = '') {
+          return `:root${selector} {${sep}${[...decs].join(`;${sep}`)}${sep}}`
+        }
 
-      // non-font
-      cssRuleSets.push(declarationsToRuleSet(declarations))
-
-      // fonts
-      if (fontDeclarations) {
-        for (const key in fontDeclarations) {
-          const { name, declarations, language = 'default' } = fontDeclarations[key]
-          const fontSelector = `.font_${name}`
-          const langSelector = `:root .t_lang-${name}-${language} ${fontSelector}`
-          const selectors =
-            language === 'default' ? ` ${fontSelector}, ${langSelector}` : langSelector
-          const specificRuleSet = declarationsToRuleSet(declarations, selectors)
-          cssRuleSets.push(specificRuleSet)
+        // non-font
+        cssRuleSets.push(declarationsToRuleSet(declarations))
+
+        // fonts
+        if (fontDeclarations) {
+          for (const key in fontDeclarations) {
+            const { name, declarations, language = 'default' } = fontDeclarations[key]
+            const fontSelector = `.font_${name}`
+            const langSelector = `:root .t_lang-${name}-${language} ${fontSelector}`
+            const selectors =
+              language === 'default' ? ` ${fontSelector}, ${langSelector}` : langSelector
+            const specificRuleSet = declarationsToRuleSet(declarations, selectors)
+            cssRuleSets.push(specificRuleSet)
+          }
         }
       }
     }

package/src/helpers/expandStyles.ts

@@ -1,6 +1,5 @@
 import { isWeb } from '@tamagui/constants'
 
-import { getConfig } from '../config'
 import { expandStyle } from './expandStyle'
 import { normalizeShadow } from './normalizeShadow'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'
@@ -14,18 +13,12 @@ import { pseudoDescriptors } from './pseudoDescriptors'
  *   3. Expands react-native shorthands, ie paddingHorizontal => paddingLeft, paddingRight
  */
 
-export function expandStylesAndRemoveNullishValues(
-  style: Record<string, any>,
-  { shorthands } = getConfig()
-) {
+export function expandStylesAndRemoveNullishValues(style: Record<string, any>) {
   const res: Record<string, any> = {}
 
   for (let key in style) {
     const valIn = style[key]
-    if (valIn == null) {
-      continue
-    }
-    key = shorthands?.[key] || key
+    if (valIn == null) continue
     if (key in pseudoDescriptors) {
       res[key] = expandStylesAndRemoveNullishValues(valIn)
       continue

package/src/helpers/getSplitStyles.tsx

@@ -178,6 +178,8 @@ export const getSplitStyles: StyleSplitter = (
 
   // handle before the loop so we can mark usedKeys in className
   // since the compiler will optimize to className we just treat className as the more powerful
+  //   TODO the compiler should probably just leave things inline if its not flattening
+  //   that way it keeps merging order
   if (typeof props.className === 'string') {
     for (const cn of props.className.split(' ')) {
       if (cn[0] === '_') {
@@ -630,8 +632,8 @@ export const getSplitStyles: StyleSplitter = (
         )
 
         const descriptor = pseudoDescriptors[key as keyof typeof pseudoDescriptors]
-        const isEnter = descriptor.name === 'enter'
-        const isExit = descriptor.name === 'exit'
+        const isEnter = key === 'enterStyle'
+        const isExit = key === 'exitStyle'
 
         // dev-time warning that helps clear confusion around need for animation  when using enter/exit style
         if (
@@ -718,14 +720,6 @@ export const getSplitStyles: StyleSplitter = (
             console.groupEnd()
           }
 
-          // if (!isDisabled) {
-          //   if (valInit === staticConfig.defaultProps[keyInit]) {
-          //     // ignore:
-          //     // if it's a default property given by styled(), we don't mark it as used, so
-          //     // that props given inline can override:
-          //   }
-          // }
-
           const importance = descriptor.priority
 
           if (!isDisabled) {