{"_id":"@kaze-style/webpack-plugin","_rev":"51-60969d52e3049c16843ae152b549d85f","name":"@kaze-style/webpack-plugin","dist-tags":{"latest":"0.17.1"},"versions":{"0.3.0":{"name":"@kaze-style/webpack-plugin","version":"0.3.0","license":"MIT","author":{"name":"Taishi Naritomi"},"main":"dist/index.js","module":"dist/webpack-plugin.esm.js","typings":"dist/index.d.ts","scripts":{"dev":"tsdx watch --noClean","build":"tsdx build","test":"echo 'no test specified'"},"dependencies":{"@babel/core":"^7.18.10","@kaze-style/babel-plugin":"0.3.0","eval":"^0.1.8"},"peerDependencies":{"@kaze-style/react":"^0.3.0","webpack":"^5"},"gitHead":"0638e80b52f299d9345b7f68db9268cf6658b5b0","description":"

🎐Kaze Style

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

🚧 Kaze Style is under development 🚧

\n
\n
\n
\n \n \n \"Kaze\"\n \n
\n
\n
\n
\n
\n

Kaze [風] zero-runtime CSS in JS

\n

🚧 under development 🚧

\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n\n# Features\n\n- **Extract** - Can choose when to extract css is buildtime or runtime(RSC is buildtime only)\n- **Atomic** - Select atomic css with $\n- **Merge** - Style merging ignoring css specificity (atomic css only)\n- **Minimal** - [0.3kb](https://shakerphobia.netlify.app/?imports=ClassName,mergeStyle,__globalStyle,__style&pkg=@kaze-style/core) runtime by buildtime extract\n- **TypeScript** - Type-safe styles via [csstype](https://github.com/frenic/csstype)\n- **Theme** - Consistent styling using \"@kaze-style/themes\"\n\n# Example\n\n```ts\n// App.style.ts\nimport { style, globalStyle } from '@kaze-style/core';\n\nglobalStyle({\n html: {\n lineHeight: '1.5',\n },\n});\n\nexport const classes = style({\n // not Atomic CSS\n container: {\n margin: '20px',\n padding: '20px',\n },\n // atomic CSS\n $base: {\n color: 'red',\n background: 'black',\n },\n // atomic CSS\n $action: {\n color: 'blue',\n },\n});\n```\n\n```ts\n// App.tsx\nimport { mergeStyle } from '@kaze-style/core';\nimport { classes } from './App.style';\n\nexport const App = ({ action }) => {\n return (\n
\n

\n
\n );\n};\n```\n\n### Setup Next.js（buildtime extract）\n\n```ts\n//next.config.mjs\nimport { withKazeStyle } from '@kaze-style/next-plugin';\n\n/** @type {import('next').NextConfig} */\nconst nextConfig = {};\n\nexport default withKazeStyle(nextConfig);\n```\n\n# Inspiration\n\nKazeStyle was designed with reference to several CSS in JS libraries.\n\n[microsoft/griffel](https://github.com/microsoft/griffel)\n\n[seek-oss/vanilla-extract](https://github.com/seek-oss/vanilla-extract)\n\n[argyleink/open-props](https://github.com/argyleink/open-props)\n\n[callstack/linaria](https://github.com/callstack/linaria)\n\n# Author\n\n[Taishi Naritomi](https://github.com/taishinaritomi)\n\n# License\n\n[MIT](https://github.com/taishinaritomi/kaze-style/blob/main/LICENSE)\n","readmeFilename":"README.md","homepage":"https://github.com/taishinaritomi/kaze-style#readme","repository":{"type":"git","url":"git+https://github.com/taishinaritomi/kaze-style.git","directory":"packages/webpack-plugin"},"bugs":{"url":"https://github.com/taishinaritomi/kaze-style/issues"}}