https://github.com/styils/styils

Lightweight and fast css-in-js solution. Support for topics, Polymorphism, SSR, Sourcemap, Full type definitions
https://github.com/styils/styils

css css-in-js javascript react react-styled solid-styled solidjs styled typescript

Last synced: 11 months ago
JSON representation

Lightweight and fast css-in-js solution. Support for topics, Polymorphism, SSR, Sourcemap, Full type definitions

• Host: GitHub
• URL: https://github.com/styils/styils
• Owner: styils
• License: mit
• Created: 2022-07-14T03:54:27.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-02-14T12:37:16.000Z (12 months ago)
• Last Synced: 2025-02-25T12:07:53.431Z (12 months ago)
• Topics: css, css-in-js, javascript, react, react-styled, solid-styled, solidjs, styled, typescript
• Language: TypeScript
• Homepage: https://styils.github.io/styils
• Size: 2.27 MB
• Stars: 56
• Watchers: 2
• Forks: 2
• Open Issues: 10
• Metadata Files:
  • Readme: README.ZH.md
  • Contributing: CONTRIBUTING.ZH.md
  • License: LICENSE

Awesome Lists containing this project

README

          
[English](./README.md)

















  

  

  

  





 轻量级和快速的 css-in-js 工具



## 🌟 特性

- 🎭 多态

- 🔵 完整的类型

- 🗺 支持 SourceMap

- 🛎 支持 SSR

- 🎨 支持 Themes

- ☘️ 小尺寸 压缩 + gzip 4kb

- ⚡️ 接近原生渲染速度

[文档](https://styils.github.io/styils)

> 它非常快。几乎和使用原生 css 一样快，在某些条件下甚至比原生渲染还要快

[基准](https://styils.github.io/styils/#/benchmark/create-and-mount-button/stitches-react)

### Styils React

![npm](https://img.shields.io/npm/v/@styils/react?color=%2361dafb&logo=react)

React 包装器，包括 `styled` API。

```sh

npm install @styils/react

```

### Styils Solid

![npm](https://img.shields.io/npm/v/@styils/react?color=%234f88c6&logo=solid&logoColor=%234f88c6)

Solid 包装器，包括 `styled` API。

```sh

npm install @styils/solid

```

### Styils Vue (只支持 vue3)

![npm](https://img.shields.io/npm/v/@styils/vue?color=%2342b883&logo=vuedotjs)

Vue 包装器，包括 `styled` API。

```sh

npm install @styils/vue

```

### Styils Babel Plugin

![npm](https://img.shields.io/npm/v/@styils/babel-plugin?color=%23eeda7c&logo=babel&logoColor=%23eeda7c)

[更多](./babel-plugin/)

This is required for sourcemap

```sh

npm install @styils/babel-plugin

```

### Styls Vite Plugin

![npm](https://img.shields.io/npm/v/@styils/vite-plugin?color=%23646cff&logo=vite)

包装 `@styils/babel-plugin` 并提供 vue sourcemap 支持。

```sh

npm install @styils/vite-plugin

```

[More babel options](./babel-plugin/)

### SSR Example

[示例](https://github.com/styils/styils-examples)

## 鸣谢

Styils 的灵感来自其他 css in js 工具，如**emotion**，**goober**，**stitches** 感谢

基准测试来自 **stitches**

## License

根据 MIT 许可证获得许可, 版权 © 2022-present zoy-l

有关详细信息，请参阅 [LICENSE](./LICENSE)。