postcss-cva - npm Package Compare versions

Comparing version 0.0.0 to 0.0.1

dist/extract.d.ts

 import { Comment, PluginCreator } from 'postcss';
-import { C as CommentType, a as CvaParams } from './shared/postcss-cva.b2b8918b.js';
+import { C as CommentType, a as CvaParams } from './shared/postcss-cva.be8f4539.js';
 
@@ -4,0 +4,0 @@ declare const baseRegex: RegExp;

dist/index.d.ts

 import { PluginCreator } from 'postcss';
-import { U as UserDefineOption } from './shared/postcss-cva.b2b8918b.js';
+import { U as UserDefineOption } from './shared/postcss-cva.be8f4539.js';
 
@@ -4,0 +4,0 @@ declare const creator: PluginCreator<Partial<UserDefineOption>>;

package.json

 {
   "name": "postcss-cva",
   "description": "generate cva functions by css comment",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "keywords": [
@@ -6,0 +6,0 @@ "cva",

README.md

@@ -5,14 +5,155 @@ # postcss-cva
 
-<br>
+## What is cva (class-variance-authority)?
 
-<p align="center">
-<img src="https://github.com/sonofmagic/icestack/raw/main/assets/logo.svg" style="width:100px;" />
-</p>
+The CVA function is an excellent atomic tool function, refer to <https://cva.style/docs>
 
-<h1 align="center">IceStack</h1>
+## Concept
 
-❤️ IceStack, Web UI for Mobile and PC , open-source Headless component library generator
+For example. A `cva` function consists of `4` parts: `base`,`variants`,`compoundVariants`,`defaultVariants`
 
-## Documentation
+```js
+import { cva } from 'class-variance-authority'
+//                     ⬇️ base
+const button = cva(['font-semibold', 'border', 'rounded'], {
+  // ⬇️ variants
+  variants: {
+    intent: {
+      primary: ['bg-blue-500', 'text-white', 'border-transparent', 'hover:bg-blue-600'],
+      secondary: ['bg-white', 'text-gray-800', 'border-gray-400', 'hover:bg-gray-100']
+    },
+    size: {
+      small: ['text-sm', 'py-1', 'px-2'],
+      medium: ['text-base', 'py-2', 'px-4']
+    }
+  },
+  // ⬇️ compoundVariants
+  compoundVariants: [
+    {
+      intent: 'primary',
+      size: 'medium',
+      class: 'uppercase'
+    }
+  ],
+  // ⬇️ defaultVariants
+  defaultVariants: {
+    intent: 'primary',
+    size: 'medium'
+  }
+})
 
-[Documentation](https://ui.icebreaker.top/docs/cva-generate) | [中文文档](https://ui.icebreaker.top/zh-CN/docs/cva-generate)
+button()
+// => "font-semibold border rounded bg-blue-500 text-white border-transparent hover:bg-blue-600 text-base py-2 px-4 uppercase"
+
+button({ intent: 'secondary', size: 'small' })
+// => "font-semibold border rounded bg-white text-gray-800 border-gray-400 hover:bg-gray-100 text-sm py-1 px-2"
+```
+
+## Usage
+
+For example:
+
+`type="primary"` is called `query`, `["shadow-sm"]` is called `params`
+
+> The same `query` will be merged with `params` together
+
+> Note ⚠ ️: If you use `scss`, you can use the `//` below for comment, otherwise please use`/* */`
+
+```css
+/* @meta path="button" */
+.btn {
+  /* @b */
+}
+.btn-primary {
+  /* @v type="primary" */
+}
+.btn-xs {
+  /* @v size="xs" */
+}
+.uppercase {
+  /* @cv type="primary" size="xs" */
+}
+/* @dv type="primary" */
+
+/* @gb ["rounded"] */
+/* @gv type="primary" ["shadow-sm"] */
+/* @gcv type="primary" size="xs" ["p-1"] */
+```
+
+will generate:
+
+```ts
+import { cva, VariantProps } from 'class-variance-authority'
+const index = cva(['btn', 'rounded'], {
+  variants: {
+    type: {
+      primary: ['btn-primary', 'shadow-sm']
+    },
+    size: {
+      xs: ['btn-xs']
+    }
+  },
+  compoundVariants: [
+    {
+      class: ['uppercase', 'p-1'],
+      type: ['primary'],
+      size: ['xs']
+    }
+  ],
+  defaultVariants: {
+    type: 'primary'
+  }
+})
+export type Props = VariantProps<typeof index>
+export default index
+```
+
+## References
+
+| keyword | param              | type   | description                                   |
+| ------- | ------------------ | ------ | --------------------------------------------- |
+| `@b`    | `base`             | node   | add current node selector to base             |
+| `@v`    | `variants`         | node   | add current node selector to variants         |
+| `@cv`   | `compoundVariants` | node   | add current node selector to compoundVariants |
+| `@dv`   | `defaultVariants`  | global | define defaultVariants                        |
+| `@gb`   | `base`             | global | define base                                   |
+| `@gv`   | `variants`         | global | define variants                               |
+| `@gcv`  | `compoundVariants` | global | define defaultVariants                        |
+| `@meta` | `meta`             | global | define metadata                               |
+
+> You can use the `js` variables to dynamically generate functions
+
+## Options
+
+### outdir
+
+Type: `string`
+Default: `cva`
+
+The location of the output directory
+
+### importFrom
+
+Type: `string`
+Default: `class-variance-authority`
+
+From which package to import the cva function
+
+### dryRun
+
+Type: `boolean`
+Default: `false`
+
+### cwd
+
+Type: `string`
+Default: `process.cwd()`
+
+### format
+
+Type: `js` | `ts`
+Default: `ts`
+
+### prefix
+
+Type: `string`
+Default: `''`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

43055

increased by8.19%

Number of lines in readme file

159

increased by783.33%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes