Home

Awesome

<div align="center"> <img src="./be-easy.png" width="300px"> </div> <br/> <br/> <br/> <br/>

Stylin

npm bundle size NPM Downloads GitHub License

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.

import {Title} from './styles.scss'
// crazy part, importing šŸ‘† component from styles


<Title color="tomato" size="small">
  Hello world!
</Title>

šŸ’… style.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;
  }
}
<br/>

šŸ§™ā€ā™‚ļø Type auto-generation

<img src="./packages/ts-loader/typing-support.gif"/> <br/>

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:

For all these, you will need a specific package, plugin, or webpack loader. <br/>

Demo

āœØ Online demo (webpack)<br/> āœØ Online demo (vite)<br/> āœØ Github repo <br/>

Get started

This library can be used with either webpack or vite.

šŸ“¦ Webpack

The TypeScript loader @stylin/ts-loader is optional.

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:

Check out the šŸ“ŗvideo for more information on how to install and set up.

<img src="./install-setup.gif"/> <br/>

āš” Vite

npm install @stylin/style
npm install --save-dev @stylin/vite-plugin

Register your plugin in vite.config.ts:

import stylin from '@stylin/vite-plugin'

export default defineConfig({
  plugins: [stylin(), otherPlugin()]
})

For more details, please refer to the installation guide.

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:

/**
  @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 
  */}
}

<SexyButton type='primary'>
  Love me
</SexyButton>

/* HTML output:
<button class="sexy-button btn-primary"> //in fact, it will have hashed css class names
  Love me
</button>
*/
<img src="./packages/style/msa-demo.gif"/> <br/>

Done! That is all about to know! šŸŽ‰šŸ„³

Now you are the PRO šŸ˜Ž. Update your resume with a new skill! <br/>

Shortening

Here are some tips 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:

Benchmark

Explore performance comparison between Styled Components and Stylin libraries here. 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.). <br/>
<br/>

Feedback

Any questions or suggestions?

You are welcome to discuss it on:

Gitter Tweet