taishinaritomi / kaze-style

Kaze [風] zero-runtime CSS in JS
https://npmjs.com/package/@kaze-style/core
MIT License
25 stars 1 forks source link


Kaze




Kaze [風] zero-runtime CSS in JS

🚧 under development 🚧


Features

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