styils / styils Goto Github PK

View Code? Open in Web Editor NEW

54.0 2.0 2.0 2.63 MB

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

Home Page: https://styils.github.io/styils

License: MIT License

Shell 0.08% JavaScript 0.41% TypeScript 99.50%

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

styils's Introduction

简体中文

Lightweight and fast css-in-js tool

🌟 Features

🎭 Polymorphism
🔵 Full ts type
🗺 Support SourceMap
🛎 Support SSR
🎨 Support Themes
☘️ Small size compression + gzip 4kb
⚡️ Near native rendering speed

Documentation

It's very fast. Almost as fast as using native css, and even faster than native rendering under certain conditions

Bench

Styils React

React wrapper including the styled API.

npm install @styils/react

Styils Solid

Solid wrapper including the styled API.

npm install @styils/solid

Styils Vue (Only supports vue3)

Vue wrapper including the styled API.

npm install @styils/vue

Styils Babel Plugin

This is required for sourcemap. Note that babel-plugin does not support vue suorcemap

npm install @styils/babel-plugin

Styils Vite Plugin

Wraps @styils/babel-plugin and provides vue sourcemap support.

More babel options

npm install @styils/vite-plugin

SSR Example

Example

Credits

Styils was inspired by other css in js tools such as emotion, goober, stitches. Thanks.

Benchmarks come from stitches

License

See LICENSE for more information.

styils's People

Contributors

Stargazers

Watchers

Forkers

yellowsoul

styils's Issues

Early exploration

Hi @zoy-l I'm following up on your comment from mui/material-ui#34826 (comment).

I think that it could be interesting for this project to explore:

How would React Server Side component compatibility look like, e.g. maybe starting with Next.js 13 beta app folder. This might be a big one for MUI as developers might pick, e.g. Tailwind CSS only because it's compatible.
The import { createSystem } from '@styils/[frame]' API looks like something that we miss with MUI from emotion, it leads to a lot of complexity, e.g. https://mui.com/joy-ui/guides/using-joy-ui-and-material-ui-together/ cc @siriwatknp.
What allows the gain of performance compared to emotion? Meaning, what's the catch? It seems to be about forbidding to use style = f(prop). Instead, we have to use CSS variables or the theme. It sounds close to JSS.
Maybe we could try the equivalent of mui/material-ui#27776.
How would we implement something like this: https://mui.com/system/getting-started/the-sx-prop/?

Thanks :)

Written in vue3 using tsx file form using useSystem as undefined

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate Limited

These updates are currently rate limited. Click on a checkbox below to force their creation now.

chore(deps): update actions/checkout action to v3
chore(deps): update actions/setup-node action to v3
chore(deps): update dependency @types/react to v18
chore(deps): update dependency @types/react-dom to v18
chore(deps): update dependency @vitejs/plugin-react to v2
fix(deps): update react monorepo to v18 (major) (react, react-dom, react-is)

Detected dependencies

github-actions

.github/workflows/coverage.yml

actions/checkout v2

actions/setup-node v1

pnpm/action-setup v2.2.2

actions/cache v3

codecov/codecov-action v3

.github/workflows/docs.yml

actions/checkout v2

actions/setup-node v1

pnpm/action-setup v2.2.2

actions/cache v3

shimataro/ssh-key-action v2

.github/workflows/release.yml

actions/checkout v2

actions/setup-node v1

pnpm/action-setup v2.2.2

actions/cache v3

.github/workflows/test-type.yml

actions/checkout v2

actions/setup-node v1

pnpm/action-setup v2.2.2

actions/cache v3

.github/workflows/test.yml

actions/checkout v2

actions/setup-node v1

pnpm/action-setup v2.2.2

actions/cache v3

npm

babel-plugin/package.json

source-map ^0.7.4

convert-source-map ^1.8.0

@babel/helper-plugin-utils ^7.18.9

@babel/core 7.18.10

@types/babel__core 7.1.19

@types/babel__helper-plugin-utils 7.10.0

@types/convert-source-map 1.5.2

@babel/core >=7.0.0

docs/package.json

@emotion/react 11.10.0

@emotion/styled 11.10.0

@stitches/react 1.2.8

@stitches/stringify 1.2.8

d3-scale-chromatic 3.0.0

i18next 21.9.1

prismjs 1.28.0

react 17.0.2

react-dom 17.0.2

react-i18next 11.18.4

react-is 17.0.2

react-router-dom 6.3.0

styled-components 5.3.5

@types/prismjs 1.26.0

@types/styled-components 5.1.26

@vitejs/plugin-react 1.3.2

@styils/vite-plugin workspace:*

package.json

@babel/core 7.18.10

@commitlint/cli 17.0.3

@commitlint/config-conventional 17.0.3

@rollup/plugin-replace 4.0.0

@swc/core 1.2.235

@swc/jest 0.2.22

@testing-library/react 13.3.0

@types/babel__core 7.1.19

@types/fs-extra 9.0.13

@types/jest 28.1.7

@types/node 18.7.6

@types/prettier 2.7.0

@types/react 17.0.48

@types/react-dom 17.0.17

@types/rimraf 3.0.2

@types/shelljs 0.8.11

@typescript-eslint/eslint-plugin 5.33.1

@typescript-eslint/parser 5.33.1

@vue/test-utils 2.0.2

esbuild 0.15.5

esbuild-register 3.3.3

eslint 8.22.0

eslint-config-iroot 1.4.4

eslint-plugin-react 7.30.1

eslint-plugin-react-hooks 4.6.0

fs-extra 10.1.0

husky 8.0.1

jest 28.1.3

jest-easy 1.0.3

jest-environment-jsdom 28.1.3

ora 6.1.2

prettier 2.7.1

react 18.2.0

react-dom 18.2.0

rimraf 3.0.2

rollup 2.78.0

rollup-plugin-copy 3.4.0

rollup-plugin-esbuild 4.9.3

shelljs 0.8.5

solid-js 1.4.8

solid-testing-library 0.3.0

typescript 4.7.4

vite 3.0.8

vue 3.2.37

node >=12

pnpm >=7

vite-plugin/package.json

@styils/babel-plugin workspace:*

@babel/core >=7.0.0

vite >=2.0.0

Check this box to trigger a request for Renovate to run again on this repository

`vars` type cannot be deduced

The vars type can be deduced correctly, but the CSSAttribute value type is invalid

styles Second argument passed into a variable object the type cannot be determined

How to extend styles like styled-componets？

Styils is very convenient to use, but it seems that there is no function to extend styles in the documentation. How can I extend styles like styled-components？Looking forward to a reply.

https://styled-components.com/docs/basics#extending-styles