@tamagui/helpers 2.0.0-rc.3 → 2.0.0-rc.30

package/src/validStyleProps.ts

@@ -1,8 +1,39 @@
 import { isAndroid } from '@tamagui/constants'
-import { webOnlyStylePropsText, webOnlyStylePropsView } from './webOnlyStyleProps'
+import {
+  nonAnimatableWebTextProps,
+  nonAnimatableWebViewProps,
+  webOnlyStylePropsText,
+  webOnlyStylePropsView,
+} from './webOnlyStyleProps'
 
 // generally organizing this so we don't duplicate things so its a bit weird
 
+// longhands of CSS shorthands - used for specificity boosting on web
+// so that e.g. borderWidth always beats border in the cascade
+export const cssShorthandLonghands = {
+  // border longhands
+  borderWidth: true,
+  borderStyle: true,
+  borderColor: true,
+  borderTopWidth: true,
+  borderTopStyle: true,
+  borderTopColor: true,
+  borderRightWidth: true,
+  borderRightStyle: true,
+  borderRightColor: true,
+  borderBottomWidth: true,
+  borderBottomStyle: true,
+  borderBottomColor: true,
+  borderLeftWidth: true,
+  borderLeftStyle: true,
+  borderLeftColor: true,
+  // outline longhands
+  outlineWidth: true,
+  outlineStyle: true,
+  outlineColor: true,
+  outlineOffset: true,
+}
+
 const textColors = {
   color: true,
   textDecorationColor: true,
@@ -68,8 +99,75 @@ export const tokenCategories = {
   },
 }
 
-export const stylePropsUnitless = {
+// discrete (non-animatable) view style properties - keyword-based, no interpolation
+// defined above stylePropsView so it can be spread in without duplication
+const nonAnimatableViewProps = {
+  alignContent: true,
+  alignItems: true,
+  alignSelf: true,
+  backfaceVisibility: true,
+  borderCurve: true,
+  borderStyle: true,
+  borderBlockStyle: true,
+  borderBlockEndStyle: true,
+  borderBlockStartStyle: true,
+  borderInlineStyle: true,
+  borderInlineEndStyle: true,
+  borderInlineStartStyle: true,
+  boxSizing: true,
+  cursor: true,
+  direction: true,
+  display: true,
+  flexDirection: true,
+  flexWrap: true,
+  isolation: true,
+  justifyContent: true,
+  mixBlendMode: true,
+  outlineStyle: true,
+  overflow: true,
+  position: true,
+}
+
+// discrete (non-animatable) font properties
+const nonAnimatableFontProps = {
+  fontFamily: true,
+  fontStyle: true,
+  fontVariant: true,
+  textTransform: true,
+}
+
+// discrete (non-animatable) text-only properties
+const nonAnimatableTextOnlyProps = {
+  textAlign: true,
+  textDecorationLine: true,
+  textDecorationStyle: true,
+  userSelect: true,
+}
+
+// discrete (non-animatable) unitless properties
+const nonAnimatableUnitlessProps = {
   WebkitLineClamp: true,
+  lineClamp: true,
+  gridTemplateColumns: true,
+  gridTemplateAreas: true,
+}
+
+// all non-animatable style props combined, used by getSplitStyles to keep
+// these as atomic CSS classNames even for components with animation drivers
+export const nonAnimatableStyleProps = {
+  ...nonAnimatableViewProps,
+  ...nonAnimatableFontProps,
+  ...nonAnimatableTextOnlyProps,
+  ...nonAnimatableUnitlessProps,
+  // web-only discrete properties (defined in webOnlyStyleProps.ts)
+  ...(process.env.TAMAGUI_TARGET === 'web' && {
+    ...nonAnimatableWebViewProps,
+    ...nonAnimatableWebTextProps,
+  }),
+}
+
+export const stylePropsUnitless = {
+  ...nonAnimatableUnitlessProps,
   animationIterationCount: true,
   aspectRatio: true,
   borderImageOutset: true,
@@ -91,9 +189,6 @@ export const stylePropsUnitless = {
   gridColumnEnd: true,
   gridColumnGap: true,
   gridColumnStart: true,
-  gridTemplateColumns: true,
-  gridTemplateAreas: true,
-  lineClamp: true,
   opacity: true,
   order: true,
   orphans: true,
@@ -125,9 +220,7 @@ export const stylePropsTransform = {
 }
 
 export const stylePropsView = {
-  backfaceVisibility: true,
-  borderCurve: true,
-  cursor: true,
+  ...nonAnimatableViewProps,
   borderBottomEndRadius: true,
   borderBottomStartRadius: true,
   borderBottomWidth: true,
@@ -139,34 +232,20 @@ export const stylePropsView = {
   borderInlineWidth: true,
   borderInlineEndWidth: true,
   borderInlineStartWidth: true,
-  borderStyle: true,
-  borderBlockStyle: true,
-  borderBlockEndStyle: true,
-  borderBlockStartStyle: true,
-  borderInlineStyle: true,
-  borderInlineEndStyle: true,
-  borderInlineStartStyle: true,
   borderTopEndRadius: true,
   borderTopStartRadius: true,
   borderTopWidth: true,
   borderWidth: true,
   transform: true,
   transformOrigin: true,
-  alignContent: true,
-  alignItems: true,
-  alignSelf: true,
   borderEndWidth: true,
   borderStartWidth: true,
   bottom: true,
-  display: true,
   end: true,
   flexBasis: true,
-  flexDirection: true,
-  flexWrap: true,
   gap: true,
   columnGap: true,
   rowGap: true,
-  justifyContent: true,
   left: true,
   margin: true,
   marginBlock: true,
@@ -183,7 +262,6 @@ export const stylePropsView = {
   marginStart: true,
   marginTop: true,
   marginVertical: true,
-  overflow: true,
   padding: true,
   paddingBottom: true,
   paddingInline: true,
@@ -198,7 +276,6 @@ export const stylePropsView = {
   paddingStart: true,
   paddingTop: true,
   paddingVertical: true,
-  position: true,
   right: true,
   start: true,
   top: true,
@@ -209,13 +286,11 @@ export const stylePropsView = {
   insetInline: true,
   insetInlineEnd: true,
   insetInlineStart: true,
-  direction: true,
   shadowOffset: true,
   shadowRadius: true,
   ...tokenCategories.color,
   ...tokenCategories.radius,
   ...tokenCategories.size,
-  ...tokenCategories.radius,
   ...stylePropsTransform,
   ...stylePropsUnitless,
   ...(isAndroid ? { elevationAndroid: true } : {}),
@@ -228,12 +303,9 @@ export const stylePropsView = {
   // the actual RN 0.76+ prop name (backgroundImage expands to this on native)
   experimental_backgroundImage: true,
   // RN 0.76/0.77+ style props (New Architecture)
-  boxSizing: true,
-  mixBlendMode: true,
-  isolation: true,
+  outline: true,
   outlineColor: true,
   outlineOffset: true,
-  outlineStyle: true,
   outlineWidth: true,
 
   // web-only for convenience - tree-shaken on native
@@ -241,26 +313,20 @@ export const stylePropsView = {
 }
 
 const stylePropsFont = {
-  fontFamily: true,
+  ...nonAnimatableFontProps,
   fontSize: true,
-  fontStyle: true,
   fontWeight: true,
-  fontVariant: true,
   letterSpacing: true,
   lineHeight: true,
-  textTransform: true,
 }
 
 export const stylePropsTextOnly = {
   ...stylePropsFont,
-  textAlign: true,
-  textDecorationLine: true,
-  textDecorationStyle: true,
+  ...nonAnimatableTextOnlyProps,
   ...textColors,
   textShadow: true,
   textShadowOffset: true,
   textShadowRadius: true,
-  userSelect: true,
   verticalAlign: true,
 
   // web-only text props - tree-shaken on native

package/src/webOnlyStyleProps.ts

@@ -2,53 +2,31 @@
 // NOTE: backgroundColor is NOT web-only - it works on React Native too!
 // NOTE: RN 0.76+ added: boxShadow, filter (cross-platform, with some Android 12+ only filters)
 // NOTE: RN 0.77+ added: boxSizing, mixBlendMode, isolation, outline* props
-export const webOnlyStylePropsView = {
-  transition: true,
-  textWrap: true,
-  backdropFilter: true,
-  WebkitBackdropFilter: true,
-  background: true,
-  borderTop: true,
-  borderRight: true,
-  borderBottom: true,
-  borderLeft: true,
+
+// web-only discrete (non-animatable) view props
+export const nonAnimatableWebViewProps = {
   backgroundAttachment: true,
   backgroundBlendMode: true,
   backgroundClip: true,
   backgroundOrigin: true,
-  backgroundPosition: true,
   backgroundRepeat: true,
-  backgroundSize: true,
   borderBottomStyle: true,
-  borderImage: true,
   borderLeftStyle: true,
   borderRightStyle: true,
   borderTopStyle: true,
-  caretColor: true,
-  clipPath: true,
   contain: true,
   containerType: true,
   content: true,
   float: true,
-  mask: true,
-  maskBorder: true,
   maskBorderMode: true,
-  maskBorderOutset: true,
   maskBorderRepeat: true,
-  maskBorderSlice: true,
-  maskBorderSource: true,
-  maskBorderWidth: true,
   maskClip: true,
   maskComposite: true,
-  maskImage: true,
   maskMode: true,
   maskOrigin: true,
-  maskPosition: true,
   maskRepeat: true,
-  maskSize: true,
   maskType: true,
   objectFit: true,
-  objectPosition: true,
   overflowBlock: true,
   overflowInline: true,
   overflowX: true,
@@ -56,19 +34,52 @@ export const webOnlyStylePropsView = {
   // NOTE: pointerEvents is NOT web-only - it's a core React Native View prop (not a style)
   pointerEvents: true,
   scrollbarWidth: true,
-  textEmphasis: true,
+  textWrap: true,
   touchAction: true,
   transformStyle: true,
-  userSelect: true,
   willChange: true,
 }
 
-export const webOnlyStylePropsText = {
+// web-only discrete (non-animatable) text props
+export const nonAnimatableWebTextProps = {
   whiteSpace: true,
   wordWrap: true,
   textOverflow: true,
+  WebkitBoxOrient: true,
+}
+
+export const webOnlyStylePropsView = {
+  ...nonAnimatableWebViewProps,
+  transition: true,
+  backdropFilter: true,
+  WebkitBackdropFilter: true,
+  background: true,
+  borderTop: true,
+  borderRight: true,
+  borderBottom: true,
+  borderLeft: true,
+  backgroundPosition: true,
+  backgroundSize: true,
+  borderImage: true,
+  caretColor: true,
+  clipPath: true,
+  mask: true,
+  maskBorder: true,
+  maskBorderOutset: true,
+  maskBorderSlice: true,
+  maskBorderSource: true,
+  maskBorderWidth: true,
+  maskImage: true,
+  maskPosition: true,
+  maskSize: true,
+  objectPosition: true,
+  textEmphasis: true,
+  userSelect: true,
+}
+
+export const webOnlyStylePropsText = {
+  ...nonAnimatableWebTextProps,
   textDecorationDistance: true,
   // cursor: now cross-platform - in stylePropsView
   WebkitLineClamp: true,
-  WebkitBoxOrient: true,
 }