@winner-fed/plugin-styled-components

适配 styled-components 的 WinJS 插件。

功能特性

• 🎨 开箱即用：自动配置 styled-components 及其 babel 插件
• 🚀 性能优化：生产环境自动压缩，开发环境提供调试支持
• 🌐 兼容性：支持 IE 浏览器兼容性处理
• 🔧 微前端支持：支持 qiankun 微前端架构
• 🎯 全局样式：支持全局样式配置
• ⚡ TypeScript 支持：完整的类型定义

安装

npm install @winner-fed/plugin-styled-components
# 或
yarn add @winner-fed/plugin-styled-components
# 或
pnpm add @winner-fed/plugin-styled-components

使用

1. 配置插件

在 config/config.ts 中添加插件：

import { defineConfig } from '@winner-fed/winjs';

export default defineConfig({
  plugins: ['@winner-fed/plugin-styled-components'],
  // 可选配置
  styledComponents: {
    babelPlugin: {
      // babel-plugin-styled-components 的配置选项
      displayName: true,
      fileName: true,
    },
  },
});

2. 在代码中使用

import { styled, css, keyframes, ThemeProvider } from '@winner-fed/winjs';

// 基础样式组件
const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
`;

// 带 props 的样式组件
const Container = styled.div<{ primary?: boolean }>`
  background: ${props => props.primary ? 'palevioletred' : 'white'};
  color: ${props => props.primary ? 'white' : 'palevioletred'};
`;

// 使用 css 辅助函数
const sharedStyles = css`
  background: papayawhip;
  color: palevioletred;
`;

// 动画
const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const RotatingDiv = styled.div`
  animation: ${rotate} 2s linear infinite;
`;

3. 全局样式配置

在 src/app.ts 中导出全局样式：

import { createGlobalStyle } from '@winner-fed/winjs';

const GlobalStyle = createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  * {
    box-sizing: border-box;
  }
`;

export const styledComponents = {
  GlobalStyle,
};

4. 主题配置

import { ThemeProvider } from '@winner-fed/winjs';

const theme = {
  colors: {
    primary: '#007bff',
    secondary: '#6c757d',
    success: '#28a745',
    danger: '#dc3545',
  },
  breakpoints: {
    sm: '576px',
    md: '768px',
    lg: '992px',
    xl: '1200px',
  },
};

// 在组件中使用主题
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <YourApp />
    </ThemeProvider>
  );
}

配置选项

styledComponents

| 配置项 | 类型 | 默认值 | 描述 | |--------|------|-------|------| | babelPlugin | Record<string, any> | {} | babel-plugin-styled-components 的配置选项 |

babel-plugin-styled-components 常用配置

export default defineConfig({
  styledComponents: {
    babelPlugin: {
      displayName: true,           // 开发环境显示组件名
      fileName: true,              // 在 displayName 中包含文件名
      ssr: false,                  // 服务端渲染支持
      meaninglessFileNames: ['index', 'styles'], // 无意义文件名
      namespace: 'my-app',         // 自定义命名空间
      topLevelImportPaths: ['@winner-fed/winjs'], // 顶层导入路径
      transpileTemplateLiterals: true,  // 转译模板字符串
      minify: true,                // 压缩样式
      pure: false,                 // 纯函数标记
    },
  },
});

高级用法

1. 自定义 StyleSheetManager

插件会根据环境自动配置 StyleSheetManager：

• IE 兼容性：当配置了 IE 目标时，自动启用 vendor 前缀
• 微前端：当启用 qiankun 时，自动禁用 CSSOM 注入

2. 使用 useTheme Hook

import { useTheme } from '@winner-fed/winjs';

function MyComponent() {
  const theme = useTheme();
  
  return (
    <div style={{ color: theme.colors.primary }}>
      主题色文本
    </div>
  );
}

3. 服务端渲染支持

import { StyleSheetManager } from '@winner-fed/winjs';

// 在服务端渲染中使用
<StyleSheetManager sheet={serverStyleSheet.instance}>
  <App />
</StyleSheetManager>

环境差异

开发环境

• 启用 displayName 用于调试
• 保留完整的样式信息

生产环境

• 禁用 displayName 减少包体积
• 启用样式压缩和优化

常见问题

1. 样式不生效

检查是否正确导入了 styled-components：

// ✅ 正确
import { styled } from '@winner-fed/winjs';

// ❌ 错误
import styled from 'styled-components';

2. TypeScript 类型错误

确保安装了类型定义：

npm install @types/styled-components

3. 主题类型定义

// 扩展主题类型
declare module 'styled-components' {
  export interface DefaultTheme {
    colors: {
      primary: string;
      secondary: string;
    };
  }
}

最佳实践

1. 组件命名：使用有意义的组件名称
2. 样式隔离：避免全局样式污染
3. 性能优化：合理使用 shouldForwardProp 避免不必要的 DOM 属性
4. 主题一致性：统一使用主题变量

相关链接

• styled-components 官方文档
• babel-plugin-styled-components

许可证

MIT