postcss-cva
Advanced tools
postcss-cva - npm Package Compare versions
Comparing version 0.1.3 to 0.1.4
| { | ||
| "name": "postcss-cva", | ||
| "description": "generate cva functions by css comment", | ||
| "version": "0.1.3", | ||
| "version": "0.1.4", | ||
| "keywords": [ | ||
@@ -6,0 +6,0 @@ "cva", |
@@ -5,2 +5,21 @@ # postcss-cva | ||
| - [postcss-cva](#postcss-cva) | ||
| - [What is cva (class-variance-authority)?](#what-is-cva-class-variance-authority) | ||
| - [Concept](#concept) | ||
| - [Usage](#usage) | ||
| - [Install](#install) | ||
| - [postcss.config.\[c\]js](#postcssconfigcjs) | ||
| - [References](#references) | ||
| - [@meta](#meta) | ||
| - [Options](#options) | ||
| - [outdir](#outdir) | ||
| - [importFrom](#importfrom) | ||
| - [dryRun](#dryrun) | ||
| - [cwd](#cwd) | ||
| - [format](#format) | ||
| - [prefix](#prefix) | ||
| - [remove](#remove) | ||
| - [include / exclude](#include--exclude) | ||
| - [License](#license) | ||
| ## What is cva (class-variance-authority)? | ||
@@ -65,2 +84,4 @@ | ||
| add `postcss-cva` to your postcss config: | ||
| ```js | ||
@@ -71,5 +92,2 @@ module.exports = { | ||
| 'postcss-cva': {}, | ||
| // 'postcss-cva': { | ||
| // | ||
| // }, | ||
| } | ||
@@ -79,8 +97,6 @@ } | ||
| For example, in this plugin | ||
| Then you can write some comment start with `@` in your css: | ||
| `type="primary"` is called `query`, `["shadow-sm"]` is called `params` | ||
| > tip: `command + /` can get `/* */` quickly | ||
| > The same `query` will be merged with `params` together | ||
| ```css | ||
@@ -107,14 +123,20 @@ /* @meta path="button" */ | ||
| will generate: | ||
| > In this plugin, `type="primary"` is called `query`, `["shadow-sm"]` is called `params` | ||
| > | ||
| > The same `query` will be merged with `params` together | ||
| Above css will generate `button.ts` at your `$cwd/cva` dir: | ||
| ```ts | ||
| import { cva, VariantProps } from 'class-variance-authority' | ||
| // @b and @gb | ||
| // ⬇️ @b | ||
| // ⬇️ @gb ["rounded"] | ||
| const index = cva(['btn', 'rounded'], { | ||
| variants: { | ||
| // @v type="primary" and @dv type="primary" | ||
| // ⬇️ @v type="primary" | ||
| // ⬇️ @gv type="primary" ["shadow-sm"] | ||
| type: { | ||
| primary: ['btn-primary', 'shadow-sm'] | ||
| }, | ||
| // @v size="xs" | ||
| // ⬇️ @v size="xs" | ||
| size: { | ||
@@ -124,3 +146,4 @@ xs: ['btn-xs'] | ||
| }, | ||
| // @cv type="primary" size="xs" and @gcv type="primary" size="xs" ["p-1"] | ||
| // ⬇️ @cv type="primary" size="xs" | ||
| // ⬇️ @gcv type="primary" size="xs" ["p-1"] | ||
| compoundVariants: [ | ||
@@ -133,3 +156,3 @@ { | ||
| ], | ||
| // @dv type="primary" | ||
| // ⬇️ @dv type="primary" | ||
| defaultVariants: { | ||
@@ -143,5 +166,7 @@ type: 'primary' | ||
| > you should install `class-variance-authority`, run `npm i class-variance-authority` | ||
| ## References | ||
| | keyword | param | type | description | | ||
| | keyword | target | type | description | | ||
| | ------- | ------------------ | ------ | --------------------------------------------- | | ||
@@ -157,2 +182,8 @@ | `@b` | `base` | node | add current node selector to base | | ||
| type `node` will add **current** css node selector (the last `class selector`) to their target. | ||
| type `global` will define some `query` and `params`. It can be defined anywhere. The one defined later will overwrite the one defined before. | ||
| ### @meta | ||
| `@meta` query: | ||
@@ -164,14 +195,8 @@ | ||
| > You can use the `js` variables to dynamically generate functions | ||
| `path` is generate cva file path, can be `a/b/c/button` | ||
| ### Type explain | ||
| `format` can be `js` or `ts` | ||
| #### node | ||
| > You can use the `js` variables to dynamically generate functions | ||
| Get the last class node in the current selector and add it to the corresponding results | ||
| #### global | ||
| It will not be calculated based on the defined position. It can be defined anywhere. The one defined later will overwrite the one defined before. | ||
| ## Options | ||
@@ -178,0 +203,0 @@ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis 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
- increased by1.9%
50363
- Number of lines in readme file
- increased by11.31%
246