taishinaritomi/kaze-style

Kaze [風] zero-runtime CSS in JS

---

Kaze [風] zero-runtime CSS in JS

🚧 under development 🚧

Features

• Extract - Can choose when to extract css is buildtime or runtime(RSC is buildtime only)
• Atomic - Select atomic css with $
• Merge - Style merging ignoring css specificity (atomic css only)
• Minimal - 0.3kb runtime by buildtime extract
• TypeScript - Type-safe styles via csstype
• Theme - Consistent styling using "@kaze-style/themes"

Example

// App.style.ts
import { style, globalStyle } from '@kaze-style/core';

globalStyle({
  html: {
    lineHeight: '1.5',
  },
});

export const classes = style({
  // not Atomic CSS
  container: {
    margin: '20px',
    padding: '20px',
  },
  // atomic CSS
  $base: {
    color: 'red',
    background: 'black',
  },
  // atomic CSS
  $action: {
    color: 'blue',
  },
});

// App.tsx
import { mergeStyle } from '@kaze-style/core';
import { classes } from './App.style';

export const App = ({ action }) => {
  return (
    <div className={style.container}>
      <p className={mergeStyle(classes.$base, action && classes.$action)}></p>
    </div>
  );
};

Setup Next.js（buildtime extract）

//next.config.mjs
import { withKazeStyle } from '@kaze-style/next-plugin';

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withKazeStyle(nextConfig);

Inspiration

KazeStyle was designed with reference to several CSS in JS libraries.

microsoft/griffel

seek-oss/vanilla-extract

argyleink/open-props

callstack/linaria

Author

Taishi Naritomi

License

MIT

kaze-style's Issues

Change single file to .style.ts

Not separating the style files causes many problems with style extraction. Since the beginning of development, we have had a policy of not separating style files, but we are going to separate style files in order to support many UI libraries.

Before

// Button.tsx
import { createStyle, mergeStyle } from '@kaze-style/react';
import type { ComponentProps, FC } from 'react';

const classes = createStyle({
  button: {
    background: 'red',
    borderRadius: '6px',
    ':hover': {
      background: 'orange',
    },
  },
});

export const Button: FC<ComponentProps<'button'>> = (props) => {
  return (
    <button
      {...props}
      className={mergeStyle(classes.button, props.className)}
    />
  );
};

After

// Button.style.ts
import { createStyle } from '@kaze-style/react';

export const style = createStyle({
  button: {
    background: 'red',
    borderRadius: '6px',
    ':hover': {
      background: 'orange',
    },
  },
});

// Button.tsx
import { mergeStyle } from '@kaze-style/react';
import type { ComponentProps, FC } from 'react';
import { style } from './Button.style';

export const Button: FC<ComponentProps<'button'>> = (props) => {
  return (
    <button
      {...props}
      className={mergeStyle(style.button, props.className)}
    />
  );
};

Roadmap

I recently stumbled upon this project whilst looking into performance issues with vanilla-extract.

I like the simplicity, and the fact that it seems to be truly atomic css. I've done some tests with provided playgrounds, and it is working very nicely.

I was mainly wondering about the roadmap. What do you want to add or change before this can be considered for a production release? Do you need help with anything?

I was also wondering about #90. It does seem like you still can use a single file for styles.

Is that intentional? If it is, very nice! My biggest issue with vanilla-extract is the fact that I can't co-locate styles to the components, and that I need to have multiple files. Kaze-style seems to solve this pretty well.

Thank you for your work so far. This is looking very promising!

Update `SWC` version

add swc plugin

wip

Creating Palette API as a Design System Manager

Still in the thinking stage 🧠

import { style, mergeStyle } from '@kaze-style/core';

import React from 'react';

// from https://cva.style/
// from https://vanilla-extract.style/documentation/api/style-variants/
// from https://stitches.dev/docs/variants

const palette = (..._) => (...__) => _[0];

const classes = style({
  $base: {
    display: 'flex',
  },
})

const className = palette({
  base: {
    display: 'flex',
  },
  color: {
    default: {
      color: 'black'
    },
    red: {
      color: 'red',
    },
    blue: {
      color: 'blue',
    },
  },
  space: {
    2: {
      margin: '10px',
      padding: '10px',
    },
    4: {
      margin: '10px',
      padding: '10px',
    },
  },
});

<div className={mergeStyle(classes.$base, className({ color: 'red', spase: 2 }))}></div>

TODO

New

• global css
• document website
• React Server Component

Fix

• runtime css
• css Rule order
• createStyle globalStyle type
• remove core package dependency stylis

New Package

• create a package of build (@kaze-style/build)
• create a package of themes (@kaze-style/themes)

Plugin Library Support

• vite-plugin
• swc-plugin

Support single file styles

reference
https://github.com/jantimon/html-webpack-plugin/blob/main/lib/child-compiler.js
https://github.com/brillout/vite-plugin-ssr

#118 #90