RFC: createStaticStyles#

// 实际只用了 cssVar，但却触发了整个 token 计算链
const useStyles = createStyles(({ token, css }) => ({
  container: css`
    background: ${token.colorBgContainer}; // 其实可以用 var(--ant-color-bg-container)
  `,
}));

import { createStaticStyles } from 'antd-style';

// 模块级别定义，样式在导入时计算一次
const styles = createStaticStyles(({ cssVar, css }) => ({
  container: css`
    background: ${cssVar.colorBgContainer}; // 输出 var(--ant-color-bg-container)
    color: ${cssVar.colorText};
    border-radius: ${cssVar.borderRadius};
  `,
}));

// 组件内直接使用，无需 hook
const Component = () => {
  return <div className={styles.container}>Hello</div>;
};

type StaticStylesInput<T extends BaseReturnType> = (utils: StaticStyleUtils) => T;

interface StaticStyleUtils {
  css: CreateCssType;
  cx: ClassNamesUtil;
  cssVar: CSSVarMap; // antd CSS 变量映射（静态生成）
  responsive: ResponsiveMap; // 响应式断点（固定值）
}

// 直接返回样式对象，非 hook
function createStaticStyles<T extends BaseReturnType>(stylesFn: StaticStylesInput<T>): T;

import { theme } from 'antd';

// camelCase 转 kebab-case
const toKebabCase = (str: string) => str.replace(/([A-Z])/g, '-$1').toLowerCase();

// 生成 cssVar 映射
const generateCSSVarMap = (prefix = 'ant') => {
  const token = theme.getDesignToken();
  const cssVar: Record<string, string> = {};

  for (const key of Object.keys(token)) {
    cssVar[key] = `var(--${prefix}-${toKebabCase(key)})`;
  }

  return cssVar;
};

// 模块级别缓存
export const cssVar = generateCSSVarMap();

// 固定断点值（基于 antd 默认）
export const responsive = {
  xs: '@media (max-width: 479px)',
  sm: '@media (max-width: 575px)',
  md: '@media (max-width: 767px)',
  lg: '@media (max-width: 991px)',
  xl: '@media (max-width: 1199px)',
  xxl: '@media (min-width: 1200px)',
} as const;

import { serializeStyles } from '@emotion/serialize';

// 模块级别初始化
const cssVar = generateCSSVarMap();
const cx = classNames; // 简单的 classnames 合并

// css 函数：将模板字符串转为 className
const css = (template: TemplateStringsArray, ...args: any[]) => {
  const serialized = serializeStyles([template, ...args]);
  // 注入样式到 DOM 并返回 className
  return injectAndGetClassName(serialized);
};

// createStaticStyles 实现
const createStaticStyles = <T extends BaseReturnType>(
  stylesFn: (utils: StaticStyleUtils) => T,
): T => {
  // 调用时立即计算并返回样式对象
  return stylesFn({ css, cx, cssVar, responsive });
};

import { theme } from 'antd';

// 生成静态 cssVar 映射
const token = theme.getDesignToken();
const cssVar = generateCSSVarMap(token, 'ant');
// { colorPrimary: 'var(--ant-color-primary)', ... }

// 固定断点（基于 antd 默认值）
const responsive = {
  xs: '@media (max-width: 479px)',
  sm: '@media (max-width: 575px)',
  md: '@media (max-width: 767px)',
  lg: '@media (max-width: 991px)',
  xl: '@media (max-width: 1199px)',
  xxl: '@media (min-width: 1200px)',
};

// 使用
const useStyles = createStaticStyles(({ css, responsive }) => ({
  container: css`
    display: flex;
    ${responsive.md} {
      flex-direction: column;
    }
  `,
}));