@kaze-style/core

🎐Kaze Style

Kaze [風] zero-runtime CSS in JS for React.

🚧 Kaze Style is under development 🚧

Feature

🛠   KazeStyle can choose when to extract css. (build time & run time)

💪   Type-safe styles via csstype

🦷   Reuse styles using Atomic CSS

👘   Can ignore specificity and merge styles

🎨   Consistent styling using "@kaze-style/themes" (under development)

Example

//Component.tsx
import { createStyle } from '@kaze-style/react';

const classes = createStyle({
  button: {
    color: 'red',
  },
});

const Component = () => {
  return <button className={classes.button}>button</button>;
};

Setup Next.js（build time 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