postcss-cva - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

package.json

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

README.md

@@ -22,2 +22,5 @@ # postcss-cva
     - [include / exclude](#include--exclude)
+  - [Troubleshooting](#troubleshooting)
+  - [Vite Config](#vite-config)
+  - [Demo and Sample](#demo-and-sample)
   - [License](#license)
@@ -244,4 +247,120 @@
 
+## Troubleshooting
+
+Don't make your `postcss-cva`'s `outdir` path included by `tailwind.config.js`'s content option. This will cause an endless loop of hot updates
+
+## Vite Config
+
+add `cva/*` to your `tsconfig.json`
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "cva/*": [
+        "cva/*"
+      ]
+    }
+  },
+}
+```
+
+add `alias` config to your `vite.config.ts`
+
+```ts
+import path from 'node:path'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  resolve: {
+    alias: [
+      {
+        find: 'cva',
+        replacement: path.resolve(__dirname, './cva')
+      }
+    ]
+  }
+})
+```
+
+## Demo and Sample
+
+[Demo Link](https://github.com/sonofmagic/icestack/blob/main/examples/start-from-scratch/src/components/IceCom.vue)
+
+```html
+<template>
+  <button :class="className">
+    <slot>postcss-cva</slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import buttonClass, { Props as ButtonProps } from 'cva/btn'
+const props = withDefaults(defineProps<{
+  type?: 'primary' | 'secondary',
+  size: 'md' | 'sm' | 'xs'
+}>(), {})
+const className = computed(() => {
+  return buttonClass(props)
+}) 
+</script>
+
+<style scoped>
+/* @meta path="btn" */
+/* @dv size="md" */
+.btn {
+  /* @b */
+  font-size: 16px;
+  background: gray;
+  border-radius: 4px;
+}
+
+.btn-primary {
+  /* @v type="primary" */
+  background: blue;
+  color: white;
+}
+
+.btn-secondary {
+  /* @v type="secondary" */
+  font-size: 22px;
+  color: yellow;
+}
+
+.btn-pointer {
+  /* @cv type="p" size="xs" */
+  cursor: pointer;
+}
+
+.btn-disabled {
+  /* @cv type="p" size="md" */
+  cursor: not-allowed;
+}
+
+
+
+.btn-md {
+  /* @v size="md" */
+  padding: 6px 10px;
+  font-size: 16px;
+}
+
+.btn-xs {
+  /* @v size="xs" */
+  padding: 2px 6px;
+  font-size: 14px;
+}
+
+.btn-sm {
+  /* @v size="sm" */
+  padding: 4px 8px;
+  font-size: 12px;
+}
+</style>
+```
+
 ## License
 
 [MIT](../../LICENSE) License &copy; 2023-PRESENT [sonofmagic](https://github.com/sonofmagic)

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

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

52329

increased by3.9%

Number of lines in readme file

365

increased by48.37%

No dependency changes