Frame 3.png

使用 postcss-cva 來生成 cva 方法吧

• 使用 postcss-cva 來生成 cva 方法吧
  • 什么是 cva
    • 封裝示例
    • 組成參數(shù)
  • postcss-cva 的功能
    • Css 示例
    • 原子化設(shè)計(jì)
    • 注釋參考
    • 生成cva函數(shù)
  • Refers

什么是 cva

cva 全稱為 class-variance-authority, 它是一個非常適合制作那種肠套，創(chuàng)建控制Css變體方法的類庫墨缘，它非常的契合像 tailwindcss 這類的原子化思想竟闪。

在很多時候我們自己封裝組件, 尤其是使用原子化思想去編寫 css , 然后去封裝組件，用它就對了！

封裝示例

那么如何用它進(jìn)行封裝呢？我們以封裝一個直觀的 vue 組件 Button 為例:

<template>
  <button>
    <slot></slot>
  </button>
</template>

接下來我們要根據(jù)這個組件，傳入的 Props 來控制它的樣式漓骚，包括顏色種類蝌衔，大小，狀態(tài)蝌蹂，形狀等等噩斟。

那么假如使用樣式去控制這些，我們通常會這么寫:

<template>
  <button :class="className">
    <slot></slot>
  </button>
</template>

<script setup lang="ts">
import { computed } from 'vue';

function getButtonClass(props){
  let classNames = [/* base */]
  // do something with props like push, splice, unshift ...
  return classNames.join(' ')
}

const props = withDefaults(defineProps<{
  // ...
}>(), {
  // ... 
})
const className = computed(() => {
  return getButtonClass(props)
})
</script>

而 cva 就是幫助我們?nèi)ド蛇@個 getButtonClass 函數(shù)的一個方法孤个。

組成參數(shù)

一個 cva 的入?yún)⑻暝剩ǔ０?4 個部分: base,variants,compoundVariants,defaultVariants:

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'
  }
})

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"

很多時候我們可以去構(gòu)造出這樣的函數(shù)，來封裝我們的組件齐鲤。這會讓我們的代碼非常的直觀斥废，該控制樣式的就控制樣式，該控制行為的就控制行為给郊。所以用 cva 改造剛剛那個 vue Button 組件就很好牡肉。

但是假如我們項(xiàng)目不用原子化的Css類庫呢？或者我們希望在編寫 Css 時淆九，順便把 cva 函數(shù)給生成出來荚板，那么你就要來使用 postcss-cva 了。

postcss-cva 的功能

postcss-cva 是一個基于 css ast 分析的 postcss 插件吩屹。

它可以把你編寫的 Css 注釋，給轉(zhuǎn)化成 cva 函數(shù)拧抖。

Css 示例

來看一個簡單的例子煤搜，在 Button 組件的封裝過程中，寫下了以下的 Css

/* @meta path="./buttonClass" */
/* @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-disabled {
  /* @cv type="primary" size="xs" */
  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;
}

原子化設(shè)計(jì)

在其中我們定義了:

• 它的基礎(chǔ)類: base: .btn
• 它的變種類: variants:
  • .btn-primary,.btn-secondary 來控制顏色種類
  • .btn-md,.btn-xs,.btn-sm 來控制大小
  • 更多的來控制唧席，形狀或者其他等等
• 它的復(fù)合變種: compoundVariants: .btn-disabled (當(dāng)滿足傳入?yún)?shù) type="primary" size="xs" 時會觸發(fā))
• 它的默認(rèn)變種: defaultVariants: size="md"(默認(rèn)什么參數(shù)都不傳的情況下使用 size="md")

注釋參考

然后依照 postcss-cva 的注釋參考:

通過添加相對應(yīng)的注釋擦盾，我們定義了所有的變種。

defined by @meta path="./buttonClass"

同時也定義了 cva 函數(shù)的文件輸出目錄為淌哟，當(dāng)前 Button.vue 文件所在目錄下的 buttonClass.ts 文件 (默認(rèn)格式為ts)

生成cva函數(shù)

這樣迹卢，再我們主運(yùn)行函數(shù)，引入 vue 組件/ 注釋所在css文件時徒仓，一個 cva 函數(shù)就被生成了出來:

import { cva, VariantProps } from "class-variance-authority";
const index = cva(["btn"], {
  variants: {
    "type": {
      "primary": ["btn-primary"],
      "secondary": ["btn-secondary"]
    },
    "size": {
      "md": ["btn-md"],
      "xs": ["btn-xs"],
      "sm": ["btn-sm"]
    }
  },
  compoundVariants: [{
    "class": ["btn-disabled"],
    "type": ["primary"],
    "size": ["xs"]
  }],
  defaultVariants: {
    "size": "md"
  }
});
export type Props = VariantProps<typeof index>;
export default index;

然后腐碱，我們就可以直接引入進(jìn)行封裝了！

<template>
  <button :class="className">
    <slot>postcss-cva</slot>
  </button>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import buttonClass, { Props as ButtonProps } from './buttonClass'

const props = withDefaults(defineProps<{
  // ButtonProps
  type?: 'primary' | 'secondary',
  size?: 'md' | 'sm' | 'xs'
}>(), {})
const className = computed(() => {
  return buttonClass(props)
}) 
</script>

是不是非常的簡單呢掉弛？

postcss-cva 能夠讓你在設(shè)計(jì)和編寫 css 的時候症见，就把 cva 函數(shù)給規(guī)劃好了。

現(xiàn)在你不但可以直接把它作為一個外置的 postcss 插件來使用殃饿，而且已經(jīng)被集成到了
IceStack 里面谋作。

趕快用它來管理和生成你的 Css UI 吧。

Refers

IceStack

postcss-cva

cva.style