@tamagui/core 1.0.1-beta.219 → 1.0.1-beta.220

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-beta.219",
+  "version": "1.0.1-beta.220",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -15,7 +15,7 @@
   "scripts": {
     "build": "tamagui-build",
     "watch": "tamagui-build --watch",
-    "lint": "eslint",
+    "lint": "eslint src",
     "clean": "tamagui-build clean",
     "clean:build": "tamagui-build clean:build",
     "test": "vitest --run --config ../vite-plugin-internal/src/vite.config.ts"
@@ -28,23 +28,23 @@
   ],
   "dependencies": {
     "@expo/match-media": "^0.3.0",
-    "@tamagui/compose-refs": "^1.0.1-beta.219",
-    "@tamagui/constants": "^1.0.1-beta.219",
-    "@tamagui/helpers": "^1.0.1-beta.219",
-    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.219",
-    "@tamagui/react-native-use-pressable": "^1.0.1-beta.219",
-    "@tamagui/react-native-use-responder-events": "^1.0.1-beta.219",
-    "@tamagui/types-react-native": "^1.0.1-beta.219",
-    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.219",
-    "@tamagui/use-event": "^1.0.1-beta.219",
-    "@tamagui/use-force-update": "^1.0.1-beta.219"
+    "@tamagui/compose-refs": "^1.0.1-beta.220",
+    "@tamagui/constants": "^1.0.1-beta.220",
+    "@tamagui/helpers": "^1.0.1-beta.220",
+    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.220",
+    "@tamagui/react-native-use-pressable": "^1.0.1-beta.220",
+    "@tamagui/react-native-use-responder-events": "^1.0.1-beta.220",
+    "@tamagui/types-react-native": "^1.0.1-beta.220",
+    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.220",
+    "@tamagui/use-event": "^1.0.1-beta.220",
+    "@tamagui/use-force-update": "^1.0.1-beta.220"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.219",
+    "@tamagui/build": "^1.0.1-beta.220",
     "@types/node": "^16.11.9",
     "@types/react": "^18.0.15",
     "@types/react-native": "^0.69.2",

package/src/createFont.test.ts

@@ -0,0 +1,129 @@
+import { describe, expect, test } from 'vitest'
+
+import { createFont } from './createFont'
+import { GenericFont } from './types'
+
+const font: GenericFont = {
+  family: 'Inter',
+  size: {
+    1: 11,
+    2: 12,
+    3: 14,
+    4: 16,
+    5: 20,
+    6: 24,
+  },
+  lineHeight: {
+    1: 14,
+    2: 16,
+    3: 18,
+    4: 20,
+    5: 24,
+    6: 28,
+  },
+  transform: {
+    3: 'uppercase',
+    4: 'none',
+  },
+  weight: {
+    1: '400',
+    3: '700',
+  },
+  color: {
+    1: '$colorFocus',
+    6: '$color',
+  },
+  letterSpacing: {
+    5: 2,
+    6: 1,
+    7: 0,
+    8: 0,
+    9: -1,
+    10: -1.5,
+    12: -2,
+    14: -3,
+    15: -4,
+  },
+  face: {
+    700: { normal: 'InterBold' },
+    800: { normal: 'InterBold' },
+  },
+}
+
+const expectedProcessedFont: GenericFont = {
+  family: 'Inter',
+  size: {
+    1: 11,
+    2: 12,
+    3: 14,
+    4: 16,
+    5: 20,
+    6: 24,
+  },
+  lineHeight: {
+    1: 14,
+    2: 16,
+    3: 18,
+    4: 20,
+    5: 24,
+    6: 28,
+  },
+  transform: {
+    1: 'uppercase',
+    2: 'uppercase',
+    3: 'uppercase',
+    4: 'none',
+    5: 'none',
+    6: 'none',
+  },
+  weight: {
+    1: '400',
+    2: '400',
+    3: '700',
+    4: '700',
+    5: '700',
+    6: '700',
+  },
+  color: {
+    1: '$colorFocus',
+    2: '$colorFocus',
+    3: '$colorFocus',
+    4: '$colorFocus',
+    5: '$colorFocus',
+    6: '$color',
+  },
+  letterSpacing: {
+    1: 2,
+    2: 2,
+    3: 2,
+    4: 2,
+    5: 2,
+    6: 1,
+    7: 0,
+    8: 0,
+    9: -1,
+    10: -1.5,
+    12: -2,
+    14: -3,
+    15: -4,
+  },
+  face: {
+    100: { normal: 'Inter' },
+    200: { normal: 'Inter' },
+    300: { normal: 'Inter' },
+    400: { normal: 'Inter' },
+    500: { normal: 'Inter' },
+    600: { normal: 'Inter' },
+    700: { normal: 'InterBold' },
+    800: { normal: 'InterBold' },
+    900: { normal: 'InterBold' },
+  },
+}
+
+describe('createFont', () => {
+  test('should return a font object with normalised property hashes', () => {
+    const processedFont = createFont(font)
+
+    expect(processedFont).toStrictEqual(expectedProcessedFont)
+  })
+})

package/src/createFont.ts

@@ -14,7 +14,8 @@ const fontWeights: FontWeightSteps[] = [
 
 const processSection = <T>(
   section: string | Record<string, T>,
-  keys: string[]
+  keys: string[],
+  defaultValue?: any
 ): string | Record<string, T> => {
   if (typeof section === 'string') return section
 
@@ -23,8 +24,9 @@ const processSection = <T>(
 
   return Object.fromEntries(
     [...new Set([...keys, ...sectionKeys])].map((key) => {
-      const value = section[key] ?? fillValue
+      const value = section[key] ?? defaultValue ?? fillValue
       fillValue = value
+      defaultValue = value
       return [key, value]
     })
   )
@@ -35,9 +37,14 @@ export const createFont = <A extends GenericFont>(font: A): A => {
 
   const processedFont = Object.fromEntries(
     Object.entries(font).map(([key, section]) => {
-      const fillKeys = key === 'face' ? fontWeights : sizeKeys
-
-      return [key, processSection(section, fillKeys)]
+      return [
+        key,
+        processSection(
+          section,
+          key === 'face' ? fontWeights : sizeKeys,
+          key === 'face' ? { normal: font.family } : undefined
+        ),
+      ]
     })
   )
 

package/src/helpers/ThemeManager.tsx

@@ -224,4 +224,4 @@ export class ThemeManager {
 export const ThemeManagerContext = createContext<ThemeManager | null>(null)
 export const emptyManager = new ThemeManager()
 
-const withoutComponentName = (name: string) => name.replace(/(\_[A-Z][a-zA-Z]+)+$/g, '')
+const withoutComponentName = (name: string) => name.replace(/(_[A-Z][a-zA-Z]+)+$/g, '')

package/src/helpers/getSplitStyles.tsx

@@ -554,7 +554,6 @@ export const getSplitStyles: StyleSplitter = (
 
         if (shouldDoClasses) {
           const pseudoStyles = getAtomicStyle(pseudoStyleObject, descriptor)
-          if (debug) console.log('pseudoStyles', pseudoStyles)
           for (const psuedoStyle of pseudoStyles) {
             const fullKey = `${psuedoStyle.property}${PROP_SPLIT}${descriptor.name}`
             if (!usedKeys[fullKey]) {

package/src/helpers/getStylesAtomic.native.ts

@@ -1,3 +1,4 @@
 export function getStylesAtomic() {
+  // eslint-disable-next-line no-console
   console.warn('no-op native')
 }

package/src/views/ThemeInverse.tsx

@@ -16,15 +16,18 @@ export const useThemeInverse = (props: ThemeInverseProps = {}) => {
   const themeName = useThemeName()
   const defaultTheme = useDefaultThemeName()
   const [name, setName] = useState<null | string>(null)
+  const curName = themeName || defaultTheme || ''
 
   if (isWeb) {
     // for SSR must be in effect
     useIsomorphicLayoutEffect(() => {
-      setName(toggleTheme(themeName || defaultTheme || ''))
+      setName(toggleTheme(curName))
     }, [defaultTheme, themeName])
+
+    return props.disable ? null : name
   }
 
-  return props.disable ? null : name
+  return props.disable ? null : toggleTheme(curName)
 }
 
 export const ThemeInverse = ({

package/types/createFont.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=createFont.test.d.ts.map