open-index/open-npm huggingface dataset:
npm package: @oriole-solid/css-in-js
Description: The SolidJS version of @ant-design/cssinjs. High-performance CSS-in-JS library for SolidJS.
Latest version: 0.0.1-dev

# @oriole-solid/css-in-js

[![npm version](https://img.shields.io/npm/v/@oriole-solid/css-in-js.svg?style=flat)](https://www.npmjs.com/package/@oriole-solid/css-in-js)

这是一个为 [SolidJS](https://www.solidjs.com/) 设计的高性能 CSS-in-JS 库。**本项目旨在成为 [@ant-design/cssinjs](https://github.com/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 特性的支持。

## 📦 安装

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

## 🚀 基本用法 (示例)

```typescript
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](./LICENSE)