refactor: adjust className application order

Fixes #3912
styled-components · Mar 23, 2023 · 1e3ffeb · 1e3ffeb
1 parent 4d4e63c
commit 1e3ffeb
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/packages/styled-components/src/models/StyledComponent.ts b/packages/styled-components/src/models/StyledComponent.ts
@@ -69,11 +69,16 @@ function useInjectedStyle<T extends object>(
 
 function resolveContext<Props extends object>(
   attrs: AttrsArg<Props>[],
-  props: Props,
+  props: React.HTMLAttributes<Element> & Props,
   theme: DefaultTheme
 ) {
   const context: ExecutionContext &
-    Props & { class?: string; className?: string; ref?: React.Ref<any> } = { ...props, theme };
+    Props & { class?: string; className?: string; ref?: React.Ref<any> } = {
+    ...props,
+    // unset, add `props.className` back at the end so props always "wins"
+    className: undefined,
+    theme,
+  };
   let attrDef;
 
   for (let i = 0; i < attrs.length; i += 1) {
@@ -91,6 +96,10 @@ function resolveContext<Props extends object>(
     }
   }
 
+  if (props.className) {
+    context.className = joinStrings(context.className, props.className);
+  }
+
   return context;
 }
 

diff --git a/packages/styled-components/src/test/attrs.test.tsx b/packages/styled-components/src/test/attrs.test.tsx
@@ -147,7 +147,7 @@ describe('attrs', () => {
 
     expect(TestRenderer.create(<Comp className="something" />).toJSON()).toMatchInlineSnapshot(`
       <div
-        className="sc-a sc-b something foo meow nya"
+        className="sc-a sc-b foo meow nya something"
       />
     `);
   });

diff --git a/packages/styled-components/src/utils/joinStrings.ts b/packages/styled-components/src/utils/joinStrings.ts
@@ -1,8 +1,8 @@
 /**
  * Convenience function for joining strings to form className chains
  */
-export function joinStrings(a: string | undefined, b: string): string {
-  return a && b ? `${a} ${b}` : a || b;
+export function joinStrings(a?: string, b?: string): string {
+  return a && b ? `${a} ${b}` : a || b || '';
 }
 
 export function joinStringArray(arr: string[], sep?: string): string {