fix(styled): isolate attrs state to prevent cross-component contamination

- Replace shared defaultAttrs variable with parameter passing
- Make .attrs() method return new instance instead of modifying shared state
- Add test case to verify attrs isolation between components
- Ensure each styled component maintains independent attrs

Author: akinoccc

packages/core/__tests__/styled.test.ts

@@ -108,6 +108,37 @@ describe('styled', () => {
     expect(style2?.color).eq('rgb(255, 0, 0)')
   })
 
+  it('should not mix attrs between different styled components', async () => {
+    // 创建第一个组件，设置特定的 attrs
+    const Component1 = styled.div.attrs({
+      'data-testid': 'component1',
+      'title': 'Component 1',
+    })`
+      color: red;
+    `
+
+    // 创建第二个组件，设置不同的 attrs
+    const Component2 = styled.div.attrs({
+      'data-testid': 'component2',
+      'title': 'Component 2',
+    })`
+      color: blue;
+    `
+
+    // 渲染两个组件
+    const instance1 = render(Component1)
+    const instance2 = render(Component2)
+
+    const element1 = instance1.getByTestId('component1')
+    const element2 = instance2.getByTestId('component2')
+
+    // 验证每个组件都有自己的 attrs，没有被混淆
+    expect(element1.title).eq('Component 1')
+    expect(element2.title).eq('Component 2')
+    expect(element1.dataset.testid).eq('component1')
+    expect(element2.dataset.testid).eq('component2')
+  })
+
   it('should react to props change', async () => {
     const StyledComponent = styled('div', { color: String }).attrs({ 'data-testid': 'test' })`
       color: ${props => props.color};

packages/core/src/styled.ts

@@ -100,11 +100,11 @@ type TransformProps<T> = {
     : ConstructorToType<T[K]>
 }
 
-function baseStyled<T extends object>(target: string | InstanceType<any>, propsDefinition?: PropsDefinition<T>): StyledComponent<T> {
+function baseStyled<T extends object>(target: string | InstanceType<any>, propsDefinition?: PropsDefinition<T>, defaultAttrs?: unknown): StyledComponent<T> {
   if (!isValidElementType(target)) {
     throw new Error('The element is invalid.')
   }
-  let defaultAttrs: unknown
+
   function styledComponent<P>(
     stylesOrProps: TemplateStringsArray | PropsDefinition<P> | CSSStyleObject | StyleFunction<P & TransformProps<T>>,
     ...expressions: (
@@ -132,25 +132,25 @@ function baseStyled<T extends object>(target: string | InstanceType<any>, propsD
       }
       else {
         // 是props定义
-        return baseStyled(target, { ...propsDefinition, ...stylesOrProps } as PropsDefinition<T & P>) as StyledComponent<T & P>
+        return baseStyled(target, { ...propsDefinition, ...stylesOrProps } as PropsDefinition<T & P>, defaultAttrs) as StyledComponent<T & P>
       }
     }
 
     // 正常的样式模板字符串处理
     const cssStringsWithExpression = insertExpressions(stylesOrProps as TemplateStringsArray, expressions)
-    return createStyledComponent<P>(cssStringsWithExpression)
+    return createStyledComponent<P>(cssStringsWithExpression, defaultAttrs)
   }
 
   styledComponent.attrs = function <A = object>(
     attrs: object | ((props: PropsDefinition<T> & A) => object),
   ) {
-    defaultAttrs = attrs
-    return styledComponent
+    // 创建一个新的 styled 组件实例，而不是修改当前实例的共享状态
+    return baseStyled(target, propsDefinition, attrs) as StyledComponent<A & T>
   }
 
   // 添加props方法支持链式调用
   styledComponent.props = function <P extends object>(newPropsDefinition: PropsDefinition<P>) {
-    return baseStyled(target, { ...propsDefinition, ...newPropsDefinition } as PropsDefinition<T & P>) as StyledComponent<T & P>
+    return baseStyled(target, { ...propsDefinition, ...newPropsDefinition } as PropsDefinition<T & P>, defaultAttrs) as StyledComponent<T & P>
   }
 
   // 将CSS对象转换为CSS字符串
@@ -168,7 +168,7 @@ function baseStyled<T extends object>(target: string | InstanceType<any>, propsD
   function createStyledComponentFromObject<P>(cssObject: CSSStyleObject) {
     const cssString = cssObjectToString(cssObject)
     const cssWithExpression = [cssString] as ExpressionType<any>[]
-    return createStyledComponent<P>(cssWithExpression)
+    return createStyledComponent<P>(cssWithExpression, defaultAttrs)
   }
 
   // 从样式函数创建组件
@@ -178,10 +178,10 @@ function baseStyled<T extends object>(target: string | InstanceType<any>, propsD
       const cssObject = styleFunction(props)
       return cssObjectToString(cssObject)
     }] as ExpressionType<any>[]
-    return createStyledComponent<P>(cssWithExpression)
+    return createStyledComponent<P>(cssWithExpression, defaultAttrs)
   }
 
-  function createStyledComponent<P>(cssWithExpression: ExpressionType<any>[]) {
+  function createStyledComponent<P>(cssWithExpression: ExpressionType<any>[], componentDefaultAttrs?: unknown) {
     let type: string = target
     if (isVueComponent(target)) {
       type = 'vue-component'
@@ -195,11 +195,11 @@ function baseStyled<T extends object>(target: string | InstanceType<any>, propsD
     const component = defineComponent(
       (props, { slots }) => {
         const internalAttrs = computed<Record<string, any>>(() => {
-          if (typeof defaultAttrs === 'function') {
-            return defaultAttrs(props)
+          if (typeof componentDefaultAttrs === 'function') {
+            return componentDefaultAttrs(props)
           }
-          if (typeof defaultAttrs === 'object') {
-            return defaultAttrs
+          if (typeof componentDefaultAttrs === 'object') {
+            return componentDefaultAttrs
           }
           return {}
         })