@tamagui/web 3.3.1 → 3.3.2

package/src/createTamagui.ts

@@ -246,7 +246,7 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
       themes,
       cssRuleSets,
       getThemeRulesSets() {
-        return createThemeCSS(dedupedThemes, configIn)
+        return createThemeCSS(dedupedThemes, configIn, tokensParsed.color)
       },
     }
   })()

package/src/helpers/createDesignSystem.ts

@@ -8,7 +8,7 @@ import {
 } from './registerCSSVariable'
 import { getConfigMaybe } from '../config'
 import { htmlResetCSS } from '../dom/htmlReset'
-import { getThemeCSSRules } from './getThemeCSSRules'
+import { getSharedThemeCSSRule, getThemeCSSRules } from './getThemeCSSRules'
 import { getAllRules, wrapStyleRules } from './insertStyleRule'
 
 const isProd = process.env.NODE_ENV === 'production'
@@ -149,18 +149,32 @@ export function buildCSSRuleSets(
  */
 export function createThemeCSS(
   dedupedThemes: Array<{ names: string[]; theme: any }>,
-  configIn: CreateTamaguiProps
+  configIn: CreateTamaguiProps,
+  colorTokens: Record<string, Variable> = {}
 ): string[] {
   if (!process.env.TAMAGUI_DID_OUTPUT_CSS) {
     let themeRuleSets: string[] = []
 
     if (isWeb) {
+      // a color token alias is shared only when no theme overrides it, so a
+      // nested theme that re-declares the token default can never be shadowed
+      // by a parent theme's override
+      const sharedKeys = new Set(dedupedThemes.length ? Object.keys(colorTokens) : [])
+      for (const { theme } of dedupedThemes) {
+        for (const key of sharedKeys) {
+          if (theme[key]?.val !== colorTokens[key].val) sharedKeys.delete(key)
+        }
+      }
+      const sharedRule = getSharedThemeCSSRule(colorTokens, sharedKeys)
+      if (sharedRule) themeRuleSets.push(sharedRule)
+
       for (const { names, theme } of dedupedThemes) {
         const nextRules = getThemeCSSRules({
           config: configIn,
           themeName: names[0],
           names,
           theme,
+          sharedKeys,
         })
         themeRuleSets = [...themeRuleSets, ...nextRules]
       }

package/src/helpers/getThemeCSSRules.native.ts

@@ -1,3 +1,5 @@
 export function getThemeCSSRules() {
   return []
 }
+
+export function getSharedThemeCSSRule() {}

package/src/helpers/getThemeCSSRules.ts

@@ -12,6 +12,35 @@ const isProd = process.env.NODE_ENV === 'production'
 const darkLight = ['dark', 'light']
 const lightDark = ['light', 'dark']
 
+// empty when CSS was already extracted at build time, and on native
+const shouldBuildThemeCSS = () =>
+  !process.env.TAMAGUI_DID_OUTPUT_CSS &&
+  process.env.TAMAGUI_TARGET !== 'native' &&
+  (!process.env.TAMAGUI_DOES_SSR_CSS ||
+    process.env.TAMAGUI_DOES_SSR_CSS === 'mutates-themes' ||
+    process.env.TAMAGUI_DOES_SSR_CSS === 'false')
+
+const themeVarName = (themeKey: string) =>
+  `--${process.env.TAMAGUI_CSS_VARIABLE_PREFIX || ''}${simpleHash(themeKey, 40)}`
+
+// color token aliases that every theme leaves at the token's own value are
+// declared once on the root instead of in every theme rule. the selector keeps
+// the .tm_xxt marker so a client rebuilding themes from css recognizes the rule.
+export function getSharedThemeCSSRule(
+  colorTokens: Record<string, Variable>,
+  keys: Iterable<string>
+): string | undefined {
+  if (!shouldBuildThemeCSS()) return
+  let vars = ''
+  for (const key of keys) {
+    const token = colorTokens[key]
+    vars += `${themeVarName(key)}:${getOrCreateVariable(token.val).variable};`
+  }
+  if (!vars) return
+  const whitespace = !isProd && process.env.NODE_ENV === 'development' ? ' ' : ''
+  return `:root, .tm_xxt${whitespace}{${vars}}`
+}
+
 export function getThemeCSSRules(props: {
   config: CreateTamaguiProps
   themeName: string
@@ -20,16 +49,10 @@ export function getThemeCSSRules(props: {
   hasDarkLight?: boolean
   // Use mutated variable prefix (mt) instead of regular (t) - for dynamic theme mutation
   useMutatedVariables?: boolean
+  // theme keys declared by the shared root rule instead of this theme's rule
+  sharedKeys?: Set<string>
 }): string[] {
-  if (process.env.TAMAGUI_DID_OUTPUT_CSS) {
-    // empty - CSS already extracted at build time
-  } else if (process.env.TAMAGUI_TARGET === 'native') {
-    // no CSS on native
-  } else if (
-    !process.env.TAMAGUI_DOES_SSR_CSS ||
-    process.env.TAMAGUI_DOES_SSR_CSS === 'mutates-themes' ||
-    process.env.TAMAGUI_DOES_SSR_CSS === 'false'
-  ) {
+  if (shouldBuildThemeCSS()) {
     const cssRuleSets: string[] = []
     const { config, themeName, theme, names } = props
     const whitespace = !isProd && process.env.NODE_ENV === 'development' ? ' ' : ''
@@ -49,6 +72,7 @@ export function getThemeCSSRules(props: {
       : getOrCreateVariable
 
     for (const themeKey in theme) {
+      if (props.sharedKeys?.has(themeKey)) continue
       const variable = theme[themeKey] as Variable
       // needsPx values (px() config variables, "Npx" theme strings) must keep
       // their unit in CSS while staying numeric for native
@@ -56,10 +80,7 @@ export function getThemeCSSRules(props: {
         variable.needsPx ? `${variable.val}px` : variable.val
       ).variable
       // Hash themeKey in case it has invalid chars too
-      vars += `--${process.env.TAMAGUI_CSS_VARIABLE_PREFIX || ''}${simpleHash(
-        themeKey,
-        40
-      )}:${value};`
+      vars += `${themeVarName(themeKey)}:${value};`
     }
 
     const isDarkBase = themeName === 'dark'

package/src/helpers/insertStyleRule.tsx

@@ -228,8 +228,15 @@ function addThemesFromCSS(cssStyleRule: CSSStyleRule, tokens?: TokensParsed) {
 
   const rules = rulesWithBraces.split(';')
 
-  // get theme object parsed
+  // get theme object parsed. color token aliases no theme overrides live in a
+  // shared root rule, so every theme starts from the token defaults
   const values: ThemeParsed = {}
+  for (const key in tokens?.color) {
+    values[key] = createVariable(
+      { key, name: key, val: tokens.color[key].val },
+      true
+    ) as any
+  }
   // build values first
   for (const rule of rules) {
     const sepI = rule.indexOf(':')
@@ -279,6 +286,9 @@ function addThemesFromCSS(cssStyleRule: CSSStyleRule, tokens?: TokensParsed) {
     if (themeName) names.add(themeName)
   }
 
+  // the shared root rule names no theme
+  if (!names.size) return
+
   return {
     names: [...names],
     theme: values,

package/types/helpers/createDesignSystem.d.ts

@@ -31,7 +31,7 @@ export declare function buildCSSRuleSets(declarations: string[], fontDeclaration
 export declare function createThemeCSS(dedupedThemes: Array<{
     names: string[];
     theme: any;
-}>, configIn: CreateTamaguiProps): string[];
+}>, configIn: CreateTamaguiProps, colorTokens?: Record<string, Variable>): string[];
 /**
  * Everything `getCSS` emits ahead of the runtime rules. It is a pure function of
  * the config, so a per-config slot holds it across calls and SSR stops

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

@@ -1 +1 @@
-{"version":3,"file":"createDesignSystem.d.ts","sourceRoot":"","sources":["../../src/helpers/createDesignSystem.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAc5D,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,MAAM,EAAE,CAAA;IACrB,iBAAiB,EAAE,MAAM,MAAM,EAAE,CAAA;CAClC,CAAA;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,EAChD,4BAA4B,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,GAC1D,MAAM,EAAE,CAuBV;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,EAC5C,qBAAqB,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,MAAM,EAAE,GACnD,MAAM,CACP,MAAM,EACN;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,GAAG,CAAA;CAAE,CAC7E,CAyBA;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,YAAY,EAAE,MAAM,EAAE,EACtB,gBAAgB,EAAE,MAAM,CACtB,MAAM,EACN;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,GAAG,CAAA;CAAE,CAC7E,EACD,gBAAgB,SAAK,GACpB,MAAM,EAAE,CA+CV;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC5B,aAAa,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,KAAK,EAAE,GAAG,CAAA;CAAE,CAAC,EACrD,QAAQ,EAAE,kBAAkB,GAC3B,MAAM,EAAE,CAmBV;AAED;;;;;;;GAOG;AACH,KAAK,SAAS,GAAG;IACf,uDAAuD;IACvD,UAAU,EAAE,MAAM,CAAA;IAClB,4EAA4E;IAC5E,MAAM,EAAE,OAAO,CAAA;IACf,uEAAuE;IACvE,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAC3B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,uEAAuE;IACvE,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,SAAS,GAAG,IAAI,CAAA;CACzB,CAAA;AA0FD;;GAEG;AACH,wBAAgB,MAAM,CACpB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE;IACJ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,QAAQ,GAAG,eAAe,GAAG,MAAM,GAAG,IAAI,CAAA;CACrD,YAAK,EACN,KAAK,EAAE,WAAW,GACjB,MAAM,CAwBR"}
+{"version":3,"file":"createDesignSystem.d.ts","sourceRoot":"","sources":["../../src/helpers/createDesignSystem.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAc5D,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,MAAM,EAAE,CAAA;IACrB,iBAAiB,EAAE,MAAM,MAAM,EAAE,CAAA;CAClC,CAAA;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,EAChD,4BAA4B,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,GAC1D,MAAM,EAAE,CAuBV;AAED;;GAEG;AACH,wBAAgB,aAAa,CAC3B,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,EAC5C,qBAAqB,EAAE,CAAC,UAAU,EAAE,GAAG,KAAK,MAAM,EAAE,GACnD,MAAM,CACP,MAAM,EACN;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,GAAG,CAAA;CAAE,CAC7E,CAyBA;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,YAAY,EAAE,MAAM,EAAE,EACtB,gBAAgB,EAAE,MAAM,CACtB,MAAM,EACN;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,MAAM,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,GAAG,CAAA;CAAE,CAC7E,EACD,gBAAgB,SAAK,GACpB,MAAM,EAAE,CA+CV;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC5B,aAAa,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,MAAM,EAAE,CAAC;IAAC,KAAK,EAAE,GAAG,CAAA;CAAE,CAAC,EACrD,QAAQ,EAAE,kBAAkB,EAC5B,WAAW,GAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAM,GACzC,MAAM,EAAE,CAgCV;AAED;;;;;;;GAOG;AACH,KAAK,SAAS,GAAG;IACf,uDAAuD;IACvD,UAAU,EAAE,MAAM,CAAA;IAClB,4EAA4E;IAC5E,MAAM,EAAE,OAAO,CAAA;IACf,uEAAuE;IACvE,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAC3B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,uEAAuE;IACvE,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,SAAS,GAAG,IAAI,CAAA;CACzB,CAAA;AA0FD;;GAEG;AACH,wBAAgB,MAAM,CACpB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE;IACJ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,QAAQ,GAAG,eAAe,GAAG,MAAM,GAAG,IAAI,CAAA;CACrD,YAAK,EACN,KAAK,EAAE,WAAW,GACjB,MAAM,CAwBR"}

package/types/helpers/getThemeCSSRules.d.ts

@@ -1,4 +1,5 @@
-import type { CreateTamaguiProps, ThemeParsed } from '../types';
+import type { CreateTamaguiProps, ThemeParsed, Variable } from '../types';
+export declare function getSharedThemeCSSRule(colorTokens: Record<string, Variable>, keys: Iterable<string>): string | undefined;
 export declare function getThemeCSSRules(props: {
     config: CreateTamaguiProps;
     themeName: string;
@@ -6,5 +7,6 @@ export declare function getThemeCSSRules(props: {
     names: string[];
     hasDarkLight?: boolean;
     useMutatedVariables?: boolean;
+    sharedKeys?: Set<string>;
 }): string[];
 //# sourceMappingURL=getThemeCSSRules.d.ts.map

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,EAAY,MAAM,UAAU,CAAA;AAUzE,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;IACf,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,GAAG,MAAM,EAAE,CAwNX"}
+{"version":3,"file":"getThemeCSSRules.d.ts","sourceRoot":"","sources":["../../src/helpers/getThemeCSSRules.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAwBzE,wBAAgB,qBAAqB,CACnC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,EACrC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,GACrB,MAAM,GAAG,SAAS,CAUpB;AAED,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;IACf,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B,UAAU,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CACzB,GAAG,MAAM,EAAE,CA8MX"}

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

@@ -1,2 +1,3 @@
 export declare function getThemeCSSRules(): never[];
+export declare function getSharedThemeCSSRule(): void;
 //# sourceMappingURL=getThemeCSSRules.native.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"getThemeCSSRules.native.d.ts","sourceRoot":"","sources":["../../src/helpers/getThemeCSSRules.native.ts"],"names":[],"mappings":"AAAA,wBAAgB,gBAAgB,YAE/B"}
+{"version":3,"file":"getThemeCSSRules.native.d.ts","sourceRoot":"","sources":["../../src/helpers/getThemeCSSRules.native.ts"],"names":[],"mappings":"AAAA,wBAAgB,gBAAgB,YAE/B;AAED,wBAAgB,qBAAqB,SAAK"}

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

@@ -1 +1 @@
-{"version":3,"file":"insertStyleRule.d.ts","sourceRoot":"","sources":["../../src/helpers/insertStyleRule.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAEV,aAAa,EACb,aAAa,EAEb,YAAY,EACb,MAAM,UAAU,CAAA;AAYjB,eAAO,MAAM,eAAe,8BAAqB,CAAA;AACjD,eAAO,MAAM,qBAAqB,eAAgB,MAAM,aAA4B,CAAA;AAMpF,eAAO,MAAM,WAAW,gBAWvB,CAAA;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAGlD;AAcD,wBAAgB,aAAa,CAC3B,aAAa,UAAQ,EACrB,MAAM,CAAC,EAAE,YAAY,GACpB,aAAa,GAAG,SAAS,CAmC3B;AA8LD,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAgB7E;AAsCD,wBAAgB,qBAAqB,eAOpC;AAED,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAO9D;AAGD,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,QAEjC;AAED,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,aAAa,QAqE5D;AAUD,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,WAcxD"}
+{"version":3,"file":"insertStyleRule.d.ts","sourceRoot":"","sources":["../../src/helpers/insertStyleRule.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAEV,aAAa,EACb,aAAa,EAEb,YAAY,EACb,MAAM,UAAU,CAAA;AAYjB,eAAO,MAAM,eAAe,8BAAqB,CAAA;AACjD,eAAO,MAAM,qBAAqB,eAAgB,MAAM,aAA4B,CAAA;AAMpF,eAAO,MAAM,WAAW,gBAWvB,CAAA;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAGlD;AAcD,wBAAgB,aAAa,CAC3B,aAAa,UAAQ,EACrB,MAAM,CAAC,EAAE,YAAY,GACpB,aAAa,GAAG,SAAS,CAmC3B;AAwMD,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAgB7E;AAsCD,wBAAgB,qBAAqB,eAOpC;AAED,wBAAgB,WAAW,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,WAO9D;AAGD,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,QAEjC;AAED,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,aAAa,QAqE5D;AAUD,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,WAcxD"}