✨ StyoCSS ✨

The instant on-demand Atomic CSS-in-JS engine

Atomic CSS + CSS-in-JS = StyoCSS

🚧 This project is still under development. 🚧

The API is not stable yet.

Simple vue 3 example

---

Introduction

What is StyoCSS?

StyoCSS is an Atomic CSS-in-JS engine that allow you to write style in CSS-in-JS way and output in Atomic CSS way.

Inspired by UnoCSS, WindiCSS, TailwindCSS, StylifyCSS and Fela.js!

Why StyoCSS is been created?

Click to 👀 the reason

I love the idea of Atomic CSS, there are many great Atomic CSS solutions out there, such as UnoCSS, WindiCSS, TailwindCSS, Stylify, etc.

Unfortunately, I am poor to memorize the utility class names, so UnoCSS, WindiCSS or TailwindCSS is not for me.

I am surprised by the zero learning curve concept of Stylify, but I don't like the idea of using a custom syntax to workaround the limitations of html class attribute.

To solve the problems above, the CSS-in-JS way is the best way to write styles, but it is not the best way to output styles.

So I created StyoCSS, it is a Atomic CSS-in-JS engine that allow you to write style in CSS-in-JS way and output in Atomic CSS way!

---

Features

• 🥰 Framework Agnostic

  It is decoupled from any framework, so you can use it with any framework!

• ✨ Zero Configuration

  Basically, you don't need to configure anything!

• 📖 Zero Learning Curve

  In the simplest case, you just need to know the css property names!

• ⚒️ Fully Customizable

  Create your preset to fit your needs!

• 🧰 Shortcuts

  You can use shortcuts to write styles!

• 🧠 Typescript Intellisense

  Without any additional extension, you would get the intellisense support!

• 📦 Tiny Size (~3kb min+brotli)

  The core is just that tiny and it has no runtime dependencies!

---

Getting Started

Using with Vite

Install the plugin:

npm i -D @styocss/vite-plugin-styocss

Add the plugin to your vite.config.ts:

// vite.config.ts
import { defineConfig } from 'vite'
import StyoCSS from '@styocss/vite-plugin-styocss'

export default defineConfig({
  plugins: [
    StyoCSS({ /* options */ }),
  ],
})

Click to see the options

interface StyoPluginOptions {
  /**
   * List of file extensions to be processed by the plugin.
   * @default ['.vue', '.ts', '.tsx', '.js', '.jsx']
   */
  extensions?: string[]

  /**
   * Configure the styo engine.
   */
  config?: StyoEngineConfig<string, string, string>

  /**
   * Customize the name of the style function.
   * @default 'style'
   */
  nameOfStyoFn?: string

  /**
   * Enable/disable the auto join of the generated atomic rule names with space.
   * It is useful when you want to use the generated atomic rule names directly in a class attribute.
   * @default false
   */
  autoJoin?: boolean

  /**
   * Enable/disable the generation of d.ts files.
   * If a string is provided, it will be used as the path to the d.ts file.
   * Default path is `<path to vite config>/styo.d.ts`.
   * @default false
   */
  dts?: boolean | string
}

Add the virtual:styo.css module to your main.ts:

// main.ts
import 'virtual:styo.css'

Use the styo function to write styles:

The styo function is a global function that is provided by the plugin. You could customize the name of the function by the nameOfStyoFn option.

// App.vue
<template>
  <div 
    :class="styo(
      // Easy to group styles by pseudo-class or media query.
      { 
        color: 'red',
        backgroundColor: 'yellow',
      },
      { 
        $selector: ':hover',
        color: 'blue',
        backgroundColor: 'green',
      },
      {
        $nestedWith: '@media (max-width: 640px)',
        fontSize: '32px',
      }
    )"
  >
    Hello World!
  </div>
</template>

// App.tsx
export const App = () => {
  return (
    // The `style` function would return an array of atomic rule names.
    // You could use the `join` method to join the array into a string.
    <div className={styo(/* ... */).join(' ')}>
      Hello World!
    </div>
  )
}

Check out the ./tests/core.test.ts to see more styo usages.

Also, go to the examples to see more real usages.

---

License

MIT