fix(core): fix bug overwriting parent variant psuedo and media styles

tamagui · Jun 2, 2022 · 622a9a2 · 622a9a2
1 parent 28240b2
commit 622a9a2
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 31 deletions.
diff --git a/packages/core/src/createComponent.tsx b/packages/core/src/createComponent.tsx
@@ -122,9 +122,10 @@ export function createComponent<
   }
 
   // see onConfiguredOnce below which attaches a name then to this component
-  const component = forwardRef<Ref, ComponentPropTypes>((props: any, forwardedRef) => {
-    // ridiculous fix because react inserts default props after your props for some reason...
-    props = tamaguiDefaultProps && !props.asChild ? { ...tamaguiDefaultProps, ...props } : props
+  const component = forwardRef<Ref, ComponentPropTypes>((propsIn: any, forwardedRef) => {
+    // React inserts default props after your props for some reason... order important
+    const props =
+      tamaguiDefaultProps && !propsIn.asChild ? { ...tamaguiDefaultProps, ...propsIn } : propsIn
 
     const { Component, isText, isZStack } = staticConfig
     const componentName = props.componentName || staticConfig.componentName
@@ -139,7 +140,7 @@ export function createComponent<
         // prettier-ignore
         console.log('⚠️', componentName || Component?.displayName || Component?.name || '[Unnamed Component]', 'debug on')
         // keep separate react native warn touches every value on prop causing weird behavior
-        console.log('props in:', props, Object.keys(props))
+        console.log('props in:', { propsIn, props, ordered: Object.keys(props) })
         if (props['debug'] === 'break') debugger
       }
     }

diff --git a/packages/core/src/helpers/getSplitStyles.tsx b/packages/core/src/helpers/getSplitStyles.tsx
@@ -266,8 +266,12 @@ export const getSplitStyles: StyleSplitter = (
         if (isWeb && !state.noClassNames) {
           const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] })
           for (const style of pseudoStyles) {
-            addStyle(style.identifier, style.rules[0])
-            mergeClassName(`${style.property}-${key}`, style.identifier)
+            const fullKey = `${style.property}-${key}`
+            if (!usedKeys.has(fullKey)) {
+              usedKeys.add(fullKey)
+              addStyle(style.identifier, style.rules[0])
+              mergeClassName(fullKey, style.identifier)
+            }
           }
         }
         continue
@@ -301,8 +305,12 @@ export const getSplitStyles: StyleSplitter = (
           const mediaStyles = getStylesAtomic(mediaStyle)
           for (const style of mediaStyles) {
             const out = createMediaStyle(style, mediaKeyShort, mediaQueryConfig)
-            addStyle(out.identifier, out.styleRule)
-            mergeClassName(`${out.identifier}-${mediaKey}`, out.identifier)
+            const fullKey = `${out.identifier}-${mediaKey}`
+            if (!usedKeys.has(fullKey)) {
+              usedKeys.add(fullKey)
+              addStyle(out.identifier, out.styleRule)
+              mergeClassName(fullKey, out.identifier)
+            }
           }
         } else {
           if (mediaState[mediaKey]) {

diff --git a/packages/sandbox/Sandbox.tsx b/packages/sandbox/Sandbox.tsx
@@ -39,29 +39,7 @@ export const Sandbox = () => {
           {/* <DialogDemo /> */}
           {/* <KitchenSink /> */}
 
-          <H1
-            ta="left"
-            size="$9"
-            als="center"
-            maw={500}
-            $gtSm={{
-              mx: 0,
-              maxWidth: 800,
-              size: '$11',
-              ta: 'center',
-            }}
-            $gtMd={{
-              maxWidth: 900,
-              ta: 'center',
-              size: '$12',
-            }}
-            $gtLg={{
-              size: '$13',
-              maxWidth: 1200,
-            }}
-          >
-            Design Ssyadsasad faste Design Ssyadsasad faste Design Ssyadsasad faste
-          </H1>
+          <Button hoverStyle={{ backgroundColor: 'red' }}>Plain</Button>
 
           <Slider width={200} defaultValue={[50]} max={100} step={1}>
             <Slider.Track>