@kaze-style/babel-plugin

🎐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

createStyle

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

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

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

mergeStyle

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

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

const Button = (props) => {
  return (
    <button className={mergeStyle(classes.red, props.className)}>button</button>
  );
};

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

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

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

createGlobalStyle

//App.tsx
import { createGlobalStyle } from '@kaze-style/react';

createGlobalStyle({
  html: {
    color: 'red',
  },
});

const App = () => {
  return <div></div>;
};

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