@oriole-solid/css-in-js v0.0.1-dev

@oriole-solid/css-in-js

这是一个为 SolidJS 设计的高性能 CSS-in-JS 库。本项目旨在成为 @ant-design/cssinjs 的 SolidJS 版本，并完整复刻其核心功能与特性，为 SolidJS 开发者提供熟悉且强大的动态样式生成、主题化及 SSR 支持。

✨ 特性

• 🚀 专为 SolidJS 打造: 充分利用 SolidJS 的响应式 API，提供极致性能。
• 🎨 动态样式生成: 在组件中编写 CSS，库会自动处理样式的生成、注入和缓存。
• 💡 主题化支持: 通过 Theme 对象和 createTheme 轻松创建和管理设计系统的主题。
• ⚙️ 服务端渲染 (SSR): 内建 extractStyle 函数，方便在 Node.js 环境中提取样式，实现 SSR。
• ⚡️ 缓存优化: 智能缓存机制，避免重复样式计算，提升渲染性能。
• 🛠️ CSS 变量集成: 支持使用 CSS 自定义属性进行更灵活的样式定制。
• 🔄 样式转换: 支持 transformers (例如 px2rem) 对 CSS 进行预处理。
• 🔍 样式检查: 支持 linters 对生成的 CSS 进行检查，保证代码质量。
• 🎬 关键帧动画: 提供 Keyframes 辅助工具，方便定义 CSS 动画。
• 📦 上下文 API: 通过 StyleProvider 灵活配置全局或局部的样式行为。
• 🌐 现代 CSS 支持检测: 可选的实验性功能，用于检测浏览器对 :where 等现代 CSS 特性的支持。

📦 安装

npm install @oriole-solid/css-in-js
# 或者
yarn add @oriole-solid/css-in-js
# 或者
pnpm add @oriole-solid/css-in-js

🚀 基本用法 (示例)

import { createSignal, Component } from 'solid-js';
import { createTheme, StyleProvider, useStyleRegister, Keyframes } from '@oriole-solid/css-in-js';

// 1. 创建主题 (可选)
const theme = createTheme((token) => ({
  ...token,
  primaryColor: '#1890ff',
}));

// 2. 创建样式
const useStyles = (color: () => string) => {
  const hashId = useStyleRegister({ theme, path: ['my-component'] }, () => [
    {
      '.my-component': {
        color: color(),
        padding: '10px',
        border: '1px solid lightgray',
        animation: `${spin} 2s linear infinite`, // 使用 Keyframes
      },
    },
  ]);
  return hashId;
};

// 3. 定义动画 (可选)
const spin = new Keyframes('spin', {
  '0%': { transform: 'rotate(0deg)' },
  '100%': { transform: 'rotate(360deg)' },
});


// 4. 在组件中使用
const MyComponent: Component = () => {
  const [color, setColor] = createSignal('red');
  const hashId = useStyles(color); // 传递响应式信号

  return (
    <div class={`my-component ${hashId()}`}>
      Hello Solid CSS-in-JS!
      <button onClick={() => setColor(color() === 'red' ? 'blue' : 'red')}>
        Change Color
      </button>
    </div>
  );
};

// 5. 在应用入口处包裹 StyleProvider
const App: Component = () => {
  return (
    <StyleProvider cache={createCache()} theme={theme}>
      <MyComponent />
    </StyleProvider>
  );
};

export default App;

📄 License

MIT