@tamagui/web 1.46.0 → 1.46.1

package/src/helpers/getThemeCSSRules.ts

@@ -5,12 +5,7 @@ import { Variable, variableToString } from '../createVariable'
 import type { CreateTamaguiProps, ThemeParsed } from '../types'
 import { tokensValueToVariable } from './registerCSSVariable'
 
-export function getThemeCSSRules({
-  config,
-  themeName,
-  theme,
-  names,
-}: {
+export function getThemeCSSRules(props: {
   config: CreateTamaguiProps
   themeName: string
   theme: ThemeParsed
@@ -18,148 +13,154 @@ export function getThemeCSSRules({
 }) {
   const cssRuleSets: string[] = []
 
-  // special case for SSR
-  const hasDarkLight = 'light' in config.themes && 'dark' in config.themes
-  const CNP = `.${THEME_CLASSNAME_PREFIX}`
-  let vars = ''
-
-  // themeToVariableToValueMap.set(theme, {})
-  // const varToValMap = themeToVariableToValueMap.get(theme)
-  for (const themeKey in theme) {
-    const variable = theme[themeKey] as Variable
-    let value: any = null
-
-    if (!tokensValueToVariable.has(variable.val)) {
-      value = variable.val
-    } else {
-      value = tokensValueToVariable.get(variable.val)!.variable
-    }
-    // Hash themeKey in case it has invalid chars too
-    vars += `--${simpleHash(themeKey, 40)}:${value};`
-  }
+  if (process.env.TAMAGUI_DOES_SSR_CSS !== 'true') {
+    const { config, themeName, theme, names } = props
 
-  const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'
-  const baseSelectors = names.map((name) => `${CNP}${name}`)
-  const selectorsSet = new Set(baseSelectors)
-
-  // since we dont specify dark/light in classnames we have to do an awkward specificity war
-  // use config.maxDarkLightNesting to determine how deep you can nest until it breaks
-  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)) {
-        // neither light nor dark subtheme, just generate one selector with :root:root which
-        // will override all :root light/dark selectors generated below
-        selectorsSet.add(`:root:root ${CNP}${subName}`)
-        continue
-      }
+    // special case for SSR
+    const hasDarkLight = 'light' in config.themes && 'dark' in config.themes
+    const CNP = `.${THEME_CLASSNAME_PREFIX}`
+    let vars = ''
 
-      const childSelector = `${CNP}${subName.replace(/^(dark|light)_/, '')}`
+    // themeToVariableToValueMap.set(theme, {})
+    // const varToValMap = themeToVariableToValueMap.get(theme)
+    for (const themeKey in theme) {
+      const variable = theme[themeKey] as Variable
+      let value: any = null
 
-      const [altLightDark, altSubTheme] = [
-        isDark ? ['dark', 'light'] : ['light', 'dark'],
-        isDark ? ['dark', 'sub_theme'] : ['light', 'sub_theme'],
-      ]
+      if (!tokensValueToVariable.has(variable.val)) {
+        value = variable.val
+      } else {
+        value = tokensValueToVariable.get(variable.val)!.variable
+      }
+      // Hash themeKey in case it has invalid chars too
+      vars += `--${simpleHash(themeKey, 40)}:${value};`
+    }
 
-      for (const order of [altLightDark, altSubTheme]) {
-        if (isDarkOrLightBase) {
-          order.reverse()
+    const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'
+    const baseSelectors = names.map((name) => `${CNP}${name}`)
+    const selectorsSet = new Set(baseSelectors)
+
+    // since we dont specify dark/light in classnames we have to do an awkward specificity war
+    // use config.maxDarkLightNesting to determine how deep you can nest until it breaks
+    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)) {
+          // neither light nor dark subtheme, just generate one selector with :root:root which
+          // will override all :root light/dark selectors generated below
+          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
+        const childSelector = `${CNP}${subName.replace(/^(dark|light)_/, '')}`
 
-          // wtf is this continue:
-          if (isOdd && depth < 3) {
-            continue
+        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 [stronger, weaker] = order
+          const numSelectors = Math.round(maxDepth * 1.5)
 
-          const parents = new Array(depth + 1).fill(0).map((_, psi) => {
-            return `${CNP}${psi % 2 === 0 ? stronger : weaker}`
-          })
+          for (let depth = 0; depth < numSelectors; depth++) {
+            const isOdd = depth % 2 === 1
 
-          let parentSelectors = parents.length > 1 ? parents.slice(1) : parents
+            // wtf is this continue:
+            if (isOdd && depth < 3) {
+              continue
+            }
 
-          if (isOdd) {
-            const [_first, second, ...rest] = parentSelectors
-            parentSelectors = [second, ...rest, second]
-          }
+            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
+            const lastParentSelector = parentSelectors[parentSelectors.length - 1]
+            const nextChildSelector =
+              childSelector === lastParentSelector ? '' : childSelector
 
-          // for light/dark/light:
-          selectorsSet.add(`${parentSelectors.join(' ')} ${nextChildSelector}`.trim())
-          // selectorsSet.add(
-          //   `${parentSelectors.join(' ')} ${nextChildSelector}.t_sub_theme`.trim()
-          // )
+            // for light/dark/light:
+            selectorsSet.add(`${parentSelectors.join(' ')} ${nextChildSelector}`.trim())
+            // selectorsSet.add(
+            //   `${parentSelectors.join(' ')} ${nextChildSelector}.t_sub_theme`.trim()
+            // )
+          }
         }
       }
     }
-  }
 
-  const selectors = [...selectorsSet].sort((a, b) => a.localeCompare(b))
-
-  // only do our :root attach if it's not light/dark - not support sub themes on root saves a lot of effort/size
-  // this isBaseTheme logic could probably be done more efficiently above
-  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
+    const selectors = [...selectorsSet].sort((a, b) => a.localeCompare(b))
+
+    // only do our :root attach if it's not light/dark - not support sub themes on root saves a lot of effort/size
+    // this isBaseTheme logic could probably be done more efficiently above
+    const selectorsString = 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()
+        const rootSep = isBaseTheme(x) && config.themeClassNameOnRoot ? '' : ' '
+        return `:root${rootSep}${x}`
       })
-      .filter(Boolean)
       .join(', ')
 
-    const themeRules = `${lessSpecificSelectors} {${vars}}`
-    const prefersMediaSelectors = `@media(prefers-color-scheme:${baseName}){
-  ${bodyRules}
-  ${themeRules}
-}`
-    cssRuleSets.push(prefersMediaSelectors)
-  }
+    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 css = `${selectionSelectors} {${styles}}`
-      cssRuleSets.push(css)
+    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 css = `${selectionSelectors} {${styles}}`
+        cssRuleSets.push(css)
+      }
     }
   }
 

package/types/createTamagui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createTamagui.d.ts","sourceRoot":"","sources":["../src/createTamagui.ts"],"names":[],"mappings":"AAgBA,OAAO,EACL,kBAAkB,EAElB,kBAAkB,EAGnB,MAAM,SAAS,CAAA;AAKhB,wBAAgB,aAAa,CAAC,IAAI,SAAS,kBAAkB,EAC3D,QAAQ,EAAE,IAAI,GACb,kBAAkB,CAAC,IAAI,CAAC,CA2S1B"}
+{"version":3,"file":"createTamagui.d.ts","sourceRoot":"","sources":["../src/createTamagui.ts"],"names":[],"mappings":"AAgBA,OAAO,EACL,kBAAkB,EAElB,kBAAkB,EAGnB,MAAM,SAAS,CAAA;AAKhB,wBAAgB,aAAa,CAAC,IAAI,SAAS,kBAAkB,EAC3D,QAAQ,EAAE,IAAI,GACb,kBAAkB,CAAC,IAAI,CAAC,CA6S1B"}

package/types/helpers/expandStyles.d.ts

@@ -5,6 +5,6 @@
  *   2. Normalizes various inconsistent styles to be more consistent
  *   3. Expands react-native shorthands, ie paddingHorizontal => paddingLeft, paddingRight
  */
-export declare function expandStylesAndRemoveNullishValues(style: Record<string, any>, { shorthands }?: import("..").TamaguiInternalConfig): Record<string, any>;
+export declare function expandStylesAndRemoveNullishValues(style: Record<string, any>): Record<string, any>;
 export declare function fixStyles(style: Record<string, any>): void;
 //# sourceMappingURL=expandStyles.d.ts.map

package/types/helpers/expandStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expandStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/expandStyles.ts"],"names":[],"mappings":"AAQA;;;;;;GAMG;AAEH,wBAAgB,kCAAkC,CAChD,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1B,EAAE,UAAU,EAAE,qCAAc,uBA2B7B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QA0BnD"}
+{"version":3,"file":"expandStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/expandStyles.ts"],"names":[],"mappings":"AAOA;;;;;;GAMG;AAEH,wBAAgB,kCAAkC,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,uBAuB5E;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QA0BnD"}

package/types/helpers/getSplitStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAEV,SAAS,EACT,cAAc,EACd,aAAa,EAMb,eAAe,EACf,kBAAkB,EAGlB,cAAc,EACd,WAAW,EAEZ,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAuBtE,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAMhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,kBAAkB,EAChC,UAAU,EAAE;IACV,KAAK,EAAE,WAAW,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;CACb,EACD,KAAK,EAAE,eAAe,EACtB,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,eAAe,CAAC,EAAE,mBAAmB,EAErC,WAAW,CAAC,EAAE,MAAM,EACpB,KAAK,CAAC,EAAE,SAAS,KACd,cAAc,CAAA;AAEnB,eAAO,MAAM,UAAU,MAAM,CAAA;AAS7B,eAAO,MAAM,cAAc,EAAE,aAi+B5B,CAAA;AAkFD,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,sBACK,OAAO,wBACL,OAAO,KAC5B,cA6BF,CAAA;AAOD,eAAO,MAAM,cAAc,EAAE,aAQ5B,CAAA;AA6BD,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA"}
+{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAiCA,OAAO,KAAK,EAEV,SAAS,EACT,cAAc,EACd,aAAa,EAMb,eAAe,EACf,kBAAkB,EAGlB,cAAc,EACd,WAAW,EAEZ,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA;AAuBtE,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAE3D,MAAM,MAAM,gBAAgB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAMhE,KAAK,aAAa,GAAG,CACnB,KAAK,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAC7B,YAAY,EAAE,kBAAkB,EAChC,UAAU,EAAE;IACV,KAAK,EAAE,WAAW,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;CACb,EACD,KAAK,EAAE,eAAe,EACtB,iBAAiB,CAAC,EAAE,cAAc,GAAG,IAAI,EACzC,eAAe,CAAC,EAAE,mBAAmB,EAErC,WAAW,CAAC,EAAE,MAAM,EACpB,KAAK,CAAC,EAAE,SAAS,KACd,cAAc,CAAA;AAEnB,eAAO,MAAM,UAAU,MAAM,CAAA;AAS7B,eAAO,MAAM,cAAc,EAAE,aA29B5B,CAAA;AAkFD,eAAO,MAAM,WAAW,eACV,aAAa,UACjB,MAAM,WACL,MAAM,sBACK,OAAO,wBACL,OAAO,KAC5B,cA6BF,CAAA;AAOD,eAAO,MAAM,cAAc,EAAE,aAQ5B,CAAA;AA6BD,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA"}

package/types/helpers/getThemeCSSRules.d.ts

@@ -1,5 +1,5 @@
 import type { CreateTamaguiProps, ThemeParsed } from '../types';
-export declare function getThemeCSSRules({ config, themeName, theme, names, }: {
+export declare function getThemeCSSRules(props: {
     config: CreateTamaguiProps;
     themeName: string;
     theme: ThemeParsed;

package/types/helpers/getThemeCSSRules.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getThemeCSSRules.d.ts","sourceRoot":"","sources":["../../src/helpers/getThemeCSSRules.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAG/D,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,SAAS,EACT,KAAK,EACL,KAAK,GACN,EAAE;IACD,MAAM,EAAE,kBAAkB,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,MAAM,EAAE,CAAA;CAChB,YAqJA"}
+{"version":3,"file":"getThemeCSSRules.d.ts","sourceRoot":"","sources":["../../src/helpers/getThemeCSSRules.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAG/D,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,MAAM,EAAE,kBAAkB,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,WAAW,CAAA;IAClB,KAAK,EAAE,MAAM,EAAE,CAAA;CAChB,YA2JA"}