@tamagui/core 1.0.1-rc.8 → 1.0.1-rc.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-rc.8",
+  "version": "1.0.1-rc.9",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -28,14 +28,14 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "^1.0.1-rc.8",
-    "@tamagui/constants": "^1.0.1-rc.8",
-    "@tamagui/helpers": "^1.0.1-rc.8",
-    "@tamagui/react-native-use-pressable": "^1.0.1-rc.8",
-    "@tamagui/react-native-use-responder-events": "^1.0.1-rc.8",
-    "@tamagui/use-did-finish-ssr": "^1.0.1-rc.8",
-    "@tamagui/use-event": "^1.0.1-rc.8",
-    "@tamagui/use-force-update": "^1.0.1-rc.8",
+    "@tamagui/compose-refs": "^1.0.1-rc.9",
+    "@tamagui/constants": "^1.0.1-rc.9",
+    "@tamagui/helpers": "^1.0.1-rc.9",
+    "@tamagui/react-native-use-pressable": "^1.0.1-rc.9",
+    "@tamagui/react-native-use-responder-events": "^1.0.1-rc.9",
+    "@tamagui/use-did-finish-ssr": "^1.0.1-rc.9",
+    "@tamagui/use-event": "^1.0.1-rc.9",
+    "@tamagui/use-force-update": "^1.0.1-rc.9",
     "normalize-css-color": "^1.0.2"
   },
   "peerDependencies": {
@@ -43,10 +43,9 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-rc.8",
+    "@tamagui/build": "^1.0.1-rc.9",
     "@testing-library/react": "^13.4.0",
     "csstype": "^3.0.10",
-    "esbuild": "^0.15.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.7.4",

package/src/createTamagui.ts

@@ -3,7 +3,11 @@ import { isRSC, isWeb } from '@tamagui/constants'
 import { configListeners, setConfig } from './config'
 import { createVariables } from './createVariables'
 import { getThemeCSSRules } from './helpers/getThemeCSSRules'
-import { getAllRules } from './helpers/insertStyleRule'
+import {
+  getAllRules,
+  listenForSheetChanges,
+  scanAllSheets,
+} from './helpers/insertStyleRule'
 import {
   registerCSSVariable,
   tokensValueToVariable,
@@ -42,6 +46,9 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     }
   }
 
+  scanAllSheets()
+  listenForSheetChanges()
+
   const fontTokens = Object.fromEntries(
     Object.entries(configIn.fonts!).map(([k, v]) => {
       return [k, createVariables(v, 'f', true)]

package/src/helpers/getSplitStyles.tsx

@@ -20,6 +20,7 @@ import { isDevTools } from '../constants/isDevTools'
 import {
   getMediaImportanceIfMoreImportant,
   mediaState as globalMediaState,
+  mediaKeysWithAndWithout$,
   mediaQueryConfig,
   mergeMediaByImportance,
 } from '../hooks/useMedia'
@@ -45,8 +46,8 @@ import {
   RulesToInsert,
   insertStyleRules,
   insertedTransforms,
+  scanAllSheets,
   shouldInsertStyleRules,
-  updateInserted,
   updateRules,
 } from './insertStyleRule'
 import { FlatTransforms, mergeTransform, mergeTransforms } from './mergeTransform'
@@ -205,7 +206,7 @@ const accessibilityRoleToWebRole = {
 //     const classNames = {}
 
 const isMediaKey = (key: string) =>
-  Boolean(key[0] === '$' && mediaQueryConfig[key.slice(1)])
+  Boolean(key[0] === '$' && mediaKeysWithAndWithout$.has(key))
 
 export const getSplitStyles: StyleSplitter = (
   props,
@@ -217,6 +218,10 @@ export const getSplitStyles: StyleSplitter = (
   elementType,
   debug
 ) => {
+  if (cache.has(props)) {
+    return cache.get(props)
+  }
+
   conf = conf || getConfig()
   const { shorthands } = conf
   const {
@@ -320,8 +325,7 @@ export const getSplitStyles: StyleSplitter = (
     const valInit = props[keyInit]
 
     // normalize shorthands up front
-    const expandedKey = keyInit in shorthands
-    if (expandedKey) {
+    if (keyInit in shorthands) {
       keyInit = shorthands[keyInit]
     }
 
@@ -329,8 +333,8 @@ export const getSplitStyles: StyleSplitter = (
     if (keyInit in skipProps) continue
     if (!isWeb && keyInit.startsWith('data-')) continue
 
-    if (validStyleProps[keyInit] || keyInit.includes('-')) {
-      if (valInit && valInit[0] === '_') {
+    if (typeof valInit === 'string' && valInit[0] === '_') {
+      if (keyInit in validStyleProps || keyInit.includes('-')) {
         if (shouldDoClasses) {
           classNames[keyInit] = valInit
         } else {
@@ -538,7 +542,7 @@ export const getSplitStyles: StyleSplitter = (
       )
     ) {
       // web-only, exclude all other accessibility props not handled above
-      if (isWeb && keyInit.includes('ccessibility')) {
+      if (isWeb && keyInit.indexOf('ccessibility') > 0) {
         continue
       }
       usedKeys[keyInit] = 1
@@ -766,7 +770,7 @@ export const getSplitStyles: StyleSplitter = (
         fontFamily = valInit[0] === '$' ? valInit : val
       }
 
-      if (validStyleProps[key]) {
+      if (key in validStyleProps) {
         mergeStyle(styleState, key, val)
         continue
       }
@@ -887,6 +891,7 @@ export const getSplitStyles: StyleSplitter = (
         rulesToInsert,
         parentSplitStyles,
         flatTransforms,
+        result,
       }
       for (const key in { ...result, ...logs }) {
         // eslint-disable-next-line no-console
@@ -897,6 +902,8 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
+  cache.set(props, result)
+
   return result
 }
 
@@ -916,7 +923,8 @@ function mergeClassName(
       if (isClient) {
         if (!transform) {
           // HMR or loaded a new chunk
-          updateInserted()
+          console.warn(`got a new ting`)
+          scanAllSheets()
           transform = insertedTransforms[val]
           if (process.env.NODE_ENV === 'development') {
             if (!transform) {

package/src/helpers/insertStyleRule.tsx

@@ -1,7 +1,3 @@
-// this needs to check if its inserted already? 99% of the time it is
-// this should avoid re-inserts, but need to test the perf trade-offs
-// i tested with the site itself and the initial insert was trivial
-
 import type { StyleObject } from '@tamagui/helpers'
 
 const allSelectors: Record<string, string> = {}
@@ -17,18 +13,7 @@ function addTransform(identifier: string, css: string, rule?: CSSRule) {
   const s = css.indexOf('transform:')
   if (s === -1) {
     if (process.env.NODE_ENV === 'development') {
-      // eslint-disable-next-line no-console
-      console.groupCollapsed(
-        `❌ Invalid transform, likely used deg/% improperly ${identifier}`
-      )
-      // eslint-disable-next-line no-console
-      console.log('rule:', rule)
-      // eslint-disable-next-line no-console
-      console.trace()
-      // eslint-disable-next-line no-console
-      console.groupEnd()
-    } else {
-      // missing transform
+      console.error(`❌ Invalid transform, likely used deg/% improperly ${identifier}`)
     }
     return false
   }
@@ -50,9 +35,33 @@ const isClient = typeof document !== 'undefined'
 //   1. debugging at dev time
 //   2. avoid duplicate insert styles at runtime
 //   3. used now for merging transforms atomically
+
+// multiple sheets could have the same ids so we have to count
+
 const scannedNum = new WeakMap<CSSStyleSheet, number>()
+const totalSheetSelectors = new Map<string, number>()
+const referencesInSheet = new WeakMap<CSSStyleSheet>()
+
+export function listenForSheetChanges() {
+  if (!isClient) return
+  function handleNode(node: Node, remove = false) {
+    if (node instanceof HTMLStyleElement && node.sheet) {
+      console.warn('update', node.sheet)
+      updateSheetStyles(node.sheet, remove)
+    }
+  }
+  const mo = new MutationObserver((entries) => {
+    for (const entry of entries) {
+      entry.addedNodes.forEach((node) => handleNode(node))
+      entry.removedNodes.forEach((node) => handleNode(node, true))
+    }
+  })
+  mo.observe(document.head, {
+    childList: true,
+  })
+}
 
-export function updateInserted() {
+export function scanAllSheets() {
   if (process.env.NODE_ENV === 'test') return
   if (!isClient) return
   const sheets = document.styleSheets
@@ -60,28 +69,53 @@ export function updateInserted() {
   for (let i = 0; i < sheets.length; i++) {
     const sheet = sheets[i]
     if (!sheet) continue
+    updateSheetStyles(sheet)
+  }
+}
 
-    // avoid errors on cross origin sheets
-    // https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property
-    let rules: CSSRuleList
-    try {
-      rules = sheet.cssRules
-    } catch {
-      continue
-    }
+function track(id: string, remove = false) {
+  const next = (totalSheetSelectors.get(id) || 0) + (remove ? -1 : 1)
+  totalSheetSelectors.set(id, next)
+  return next
+}
 
-    const len = rules.length
-    const lastScanned = scannedNum.get(sheet) ?? 0
+function updateSheetStyles(sheet: CSSStyleSheet, remove = false) {
+  // avoid errors on cross origin sheets
+  // https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property
+  let rules: CSSRuleList
+  try {
+    rules = sheet.cssRules
+  } catch {
+    return
+  }
+
+  const len = rules.length
+  const lastScanned = scannedNum.get(sheet) || 0
+
+  if (!remove) {
+    // avoid work dumb but works
     if (lastScanned === len) {
-      continue
+      return
+    }
+  }
+
+  for (let i = lastScanned; i < len; i++) {
+    const rule = rules[i]
+    const response = getTamaguiSelector(rule)
+    if (!response) {
+      return
     }
-    for (let i = lastScanned; i < len; i++) {
-      const rule = rules[i]
-      const response = getTamaguiSelector(rule)
-      if (!response) {
-        continue
+
+    const [identifier, cssRule] = response
+
+    // track references
+    const total = track(identifier, remove)
+
+    if (remove) {
+      if (total === 0) {
+        delete allSelectors[identifier]
       }
-      const [identifier, cssRule] = response
+    } else {
       if (!(identifier in allSelectors)) {
         const isTransform = identifier.startsWith('_transform')
         const shouldInsert = isTransform
@@ -92,8 +126,9 @@ export function updateInserted() {
         }
       }
     }
-    scannedNum.set(sheet, i)
   }
+
+  scannedNum.set(sheet, len)
 }
 
 function getTamaguiSelector(
@@ -122,9 +157,6 @@ const getIdentifierFromTamaguiSelector = (selector: string) =>
     .replace(/:[a-z]+$/, '')
     .slice(1)
 
-// move this to probably inside createTamagui
-updateInserted()
-
 const sheet = isClient
   ? document.head.appendChild(document.createElement('style')).sheet
   : null

package/src/helpers/normalizeValueWithProperty.ts

@@ -11,13 +11,13 @@ import { normalizeColor } from './normalizeColor'
 const cache = {}
 
 export function normalizeValueWithProperty(value: any, property?: string): any {
-  if (property && unitlessNumbers[property]) {
-    return value
-  }
   const cached = cache[value]
   if (cached !== undefined) {
     return cached
   }
+  if (property && property in unitlessNumbers) {
+    return value
+  }
   let res = value
   if (
     process.env.TAMAGUI_TARGET === 'web' &&

package/src/helpers/themeable.tsx

@@ -6,9 +6,9 @@ import { Theme } from '../views/Theme'
 export interface ThemeableProps {
   theme?: ThemeName | null
   themeInverse?: boolean
+  themeReset?: boolean
   componentName?: string
   debug?: boolean | 'verbose'
-  reset?: boolean
 }
 
 export function themeable<Component extends (props: any) => any>(
@@ -16,7 +16,7 @@ export function themeable<Component extends (props: any) => any>(
   opts?: { componentName?: string }
 ) {
   const withThemeComponent = forwardRef(function WithTheme(props: ThemeableProps, ref) {
-    const { themeInverse, theme, componentName, reset, ...rest } = props
+    const { themeInverse, theme, componentName, themeReset, ...rest } = props
     const element = React.createElement(component, { ...rest, ref } as any)
 
     return (
@@ -26,7 +26,7 @@ export function themeable<Component extends (props: any) => any>(
         name={(theme as any) || null}
         data-themeable
         debug={props.debug}
-        reset={props.reset}
+        reset={props.themeReset}
       >
         {element}
       </Theme>

package/src/hooks/useElementLayout.tsx

@@ -73,7 +73,7 @@ export function useElementLayout(
   // Observing is done in a separate effect to avoid this effect running
   // when 'onLayout' changes.
   useIsomorphicLayoutEffect(() => {
-    if (!(resizeObserver && hasLayoutEvent)) return
+    if (!resizeObserver || !hasLayoutEvent) return
     const node = ref.current
     if (!node) return
     LayoutHandlers.set(node, onLayoutEvent)

package/src/hooks/useMedia.tsx

@@ -35,6 +35,7 @@ export const mediaState: MediaQueryState =
 
 export const mediaQueryConfig: MediaQueries = {}
 export const getMedia = () => mediaState
+export const mediaKeysWithAndWithout$ = new Set<string>()
 
 // for SSR capture it at time of startup
 let initState: MediaQueryState
@@ -58,6 +59,8 @@ export const configureMedia = (config: TamaguiInternalConfig) => {
   if (!media) return
   for (const key in media) {
     mediaState[key] = mediaQueryDefaultActive?.[key] || false
+    mediaKeysWithAndWithout$.add(key)
+    mediaKeysWithAndWithout$.add(`$${key}`)
   }
   Object.assign(mediaQueryConfig, media)
   initState = { ...mediaState }

package/src/styled.tsx

@@ -1,3 +1,5 @@
+import { stylePropsAll, validStyles } from '@tamagui/helpers'
+
 import { createComponent } from './createComponent'
 import { ReactNativeStaticConfigs } from './setupReactNative'
 import {
@@ -60,6 +62,19 @@ export function styled<
   //   }
   // }
 
+  // validate not using a variant over an existing valid style
+  if (process.env.NODE_ENV === 'development') {
+    if (options?.variants) {
+      for (const key in options.variants) {
+        if (key in stylePropsAll) {
+          console.error(
+            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`
+          )
+        }
+      }
+    }
+  }
+
   const staticConfigProps = (() => {
     const parentStaticConfig =
       'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null

package/types/helpers/insertStyleRule.d.ts

@@ -3,7 +3,8 @@ export declare const insertedTransforms: {};
 export declare const getAllSelectors: () => Record<string, string>;
 export declare const getAllRules: () => string[];
 export declare const getAllTransforms: () => {};
-export declare function updateInserted(): void;
+export declare function listenForSheetChanges(): void;
+export declare function scanAllSheets(): void;
 export declare function updateRules(identifier: string, rules: string[]): boolean;
 export type PartialStyleObject = Pick<StyleObject, 'identifier' | 'property' | 'rules'>;
 export type RulesToInsert = PartialStyleObject[];

package/types/helpers/themeable.d.ts

@@ -2,9 +2,9 @@ import { ThemeName } from '../types';
 export interface ThemeableProps {
     theme?: ThemeName | null;
     themeInverse?: boolean;
+    themeReset?: boolean;
     componentName?: string;
     debug?: boolean | 'verbose';
-    reset?: boolean;
 }
 export declare function themeable<Component extends (props: any) => any>(component: Component, opts?: {
     componentName?: string;

package/types/hooks/useMedia.d.ts

@@ -2,6 +2,7 @@ import { MediaQueries, MediaQueryKey, MediaQueryObject, MediaQueryState, Tamagui
 export declare const mediaState: MediaQueryState;
 export declare const mediaQueryConfig: MediaQueries;
 export declare const getMedia: () => MediaQueryState;
+export declare const mediaKeysWithAndWithout$: Set<string>;
 export declare const getInitialMediaState: () => MediaQueryState;
 export declare const getMediaKeyImportance: (key: string) => number;
 export declare const configureMedia: (config: TamaguiInternalConfig) => void;