https://github.com/sultan99/stylin
A built-time CSS library for styling React components.
https://github.com/sultan99/stylin
annotations css-library css-modules loader react-style typescript
Last synced: 20 days ago
JSON representation
A built-time CSS library for styling React components.
- Host: GitHub
- URL: https://github.com/sultan99/stylin
- Owner: sultan99
- License: mit
- Created: 2021-02-11T16:05:57.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2025-01-30T07:10:52.000Z (3 months ago)
- Last Synced: 2025-03-27T03:08:55.773Z (about 1 month ago)
- Topics: annotations, css-library, css-modules, loader, react-style, typescript
- Language: TypeScript
- Homepage:
- Size: 3.73 MB
- Stars: 181
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - stylin - time CSS library for styling React components. | sultan99 | 157 | (TypeScript)
README
# Stylin
Stylin is a build-time CSS library that offers an elegant way to style React components. It extends CSS Modules and adds some missing features like dynamic variables or auto-typing.
There is no faster way to create styled & typed React component.
```jsx
import {Title} from './styles.scss'
// crazy part, importing 👆 component from styles
Hello world!
```
#### 💅 `style.scss`
```scss
/**
@tag: h1
@component: Title
size: small | medium | large
color: #38383d --color
*/
.title {
--color: #38383d;
color: var(--color);
font-size: 18px;
&.small {
font-size: 14px;
margin: 2px 0;
}
&.medium {
font-size: 18px;
margin: 4px 0;
}
&.large {
font-size: 20px;
margin: 6px 0;
}
}
```
#### 🧙♂️ `Type auto-generation`
All the magic is behind the style annotations, which you can find in the comment section. It is like JSDoc, but for CSS. However, it is not a CSSDoc. It is more about mapping styles with component properties.
With the annotations you can:
- map styles with components
- generate TypeScript types
- generate documents or even stories for StoryBook
For all these, you will need a specific package, plugin, or webpack loader.
## Demo
✨ [Online demo (webpack)](https://codesandbox.io/s/github/sultan99/cards/tree/main)
✨ [Online demo (vite)](https://codesandbox.io/p/github/sultan99/cards/vite)
✨ [Github repo](https://github.com/sultan99/cards)
## Get started
This library can be used with either webpack or vite.
### 📦 Webpack
The TypeScript loader `@stylin/ts-loader` is optional.
```sh
npm install @stylin/style
npm install --save-dev @stylin/msa-loader @stylin/ts-loader
```
Then you should add the loader(s) in your webpack configs files:
- [MSA loader](./packages/msa-loader/README.md)
- [TypeScript loader (optional)](./packages/ts-loader/README.md)
Check out the 📺[video](https://www.youtube.com/watch?v=XF4vBx-ImzE) for more information on how to install and set up.
[
](https://www.youtube.com/watch?v=XF4vBx-ImzE)
### ⚡ Vite
```sh
npm install @stylin/style
npm install --save-dev @stylin/vite-plugin
```
Register your plugin in `vite.config.ts`:
```ts
import stylin from '@stylin/vite-plugin'
export default defineConfig({
plugins: [stylin(), otherPlugin()]
})
```
For more details, please refer to the [installation guide](./packages/vite-plugin/README.md).
## Diving deeper
Don't be scared to learn new stuff, it is deadly simple. Only three things to remember:
1) @tag: html tag
2) @component: name of your component
3) Mapping object:
```
componentPropertyName {
propertyValue: css-class-name
anotherPropertyValue: another-css
}
```
For example:
```scss
/**
@tag: button
@component: SexyButton
type {
primary: btn-primary
secondary: bnt-secondary
link: btn-link
}
*/
.sexy-button {
&.btn-primary {
/* some styles */
}
&.btn-secondary {
/* some styles */
}
&.btn-link {
/* some styles
*/}
}
```
```jsx
Love me
/* HTML output:
//in fact, it will have hashed css class names
Love me
*/
```
Done! That is all about to know! 🎉🥳
Now you are the PRO 😎. Update your resume with a new skill!
## Shortening
Here are [some tips](./packages/style/README.md) to make life easier.
If your component property values are similar to CSS class names, like in the example below:
```
type {
primary: primary
secondary: secondary
link: link
}
```
It can be shorten this way:
```
type: primary | secondary | link
```
Sweet! what is next? Read more about:
- [Shortening, variables, restyling](./packages/style/README.md)
- [TypeScript](./packages/ts-loader/README.md)
## Benchmark
Explore performance comparison between [Styled Components](https://styled-components.com/) and Stylin libraries [here](https://github.com/sultan99/stylin/tree/main/packages/benchmark). This section provides detailed insights and results from our tests, highlighting the efficiency and speed of both libraries.
## Development plans
1) Support Next.js.
2) Support React-like libraries (preact etc.).
## Feedback
Any questions or suggestions?
You are welcome to discuss it on:
[](https://gitter.im/stylin-js/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
[](http://twitter.com/share?text=There%20is%20no%20faster%20way%20to%20create%20styled%20and%20typed%20React%20components:%20&url=https://sultan99.github.io/stylin&hashtags=css,react,javascript)