PikaCSS

繁體中文

English

繁體中文

English

外觀

使用方式 ​

把 CSS property 與 nested selector 寫成靜態 JavaScript 值，傳給設定好的 Pika callable。Integration 會在 build time求值並把整個 call取代為 atomic class names。

第一個元件 ​

預設 single-entry project的 callable 是 global pika，不要 import：

vue
<script setup lang="ts">
const buttonClass = pika({
  padding: '0.5rem 1rem',
  borderRadius: '8px',
  backgroundColor: '#3b82f6',
  color: 'white',
  '$:hover': { backgroundColor: '#2563eb' },
})
</script>

<template>
  <button :class="buttonClass">Click me</button>
</template>

每個 declaration會變成 logical CSS module中的 atomic rule：

css
@layer utilities {
  .pk-a {
    padding: 0.5rem 1rem;
  }
  .pk-b {
    border: none;
  }
  .pk-c {
    border-radius: 8px;
  }
  .pk-d {
    background-color: #3b82f6;
  }
  .pk-e {
    color: white;
  }
  .pk-f {
    cursor: pointer;
  }
  .pk-g:hover {
    background-color: #2563eb;
  }
}

只有一個 callable，輸出格式由 project config決定 ​

現在只有設定好的 base callable，例如 pika(...)。舊的 .str() / .arr() callable variants已移除。

transformedFormat 決定 replacement shape：

ts
import { defineConfig } from '@pikacss/unplugin-pikacss'

export default defineConfig({
  transformedFormat: 'array', // 預設為 'string'
})

'string' 會產生空白分隔的 class string；'array' 會產生 class-name array。Compiler、Typegen 與 ESLint 都讀同一份 canonical project config。

靜態 authoring限制 ​

PikaCSS 是 compile-time transform。Base-call arguments必須落在支援的 bounded-static expression grammar內；任意 runtime value與一般函式呼叫不會被 PikaCSS 執行。

Plugin可提供 pika.sc、pika.var、pika.kf、pika.tk 等 static authoring members。這些 member只允許出現在 base pika(...) argument tree裡，並在 prepare階段求值。

常見寫法 ​

基本 CSS property ​

ts
const className = pika({
	color: 'red',
	fontSize: '16px',
})
css
@layer utilities {
  .pk-a {
    color: red;
  }
  .pk-b {
    font-size: 16px;
  }
}

Pseudo selector ​

$ 代表目前產生的 selector：

ts
const className = pika({
	color: 'blue',
	'$:hover': {
		color: 'red',
	},
})
css
@layer utilities {
  .pk-a {
    color: blue;
  }
  .pk-b:hover {
    color: red;
  }
}

Responsive styles ​

ts
const className = pika({
	fontSize: '14px',
	'@media (min-width: 768px)': {
		fontSize: '16px',
	},
	'@media (min-width: 1024px)': {
		fontSize: '18px',
	},
})
css
@layer utilities {
  .pk-a {
    font-size: 14px;
  }
  @media (min-width: 768px) {
    .pk-b {
      font-size: 16px;
    }
  }
  @media (min-width: 1024px) {
    .pk-c {
      font-size: 18px;
    }
  }
}

自訂 selector ​

Project config內使用現行 object-only grammar：

ts
import { defineConfig } from '@pikacss/unplugin-pikacss'

export default defineConfig({
  engine: {
    selectors: {
      definitions: [
        { name: '@dark', value: 'html.dark $' },
      ],
    },
  },
})
ts
const className = pika({
	color: 'black',
	'@dark': {
		color: 'white',
	},
})
css
@layer utilities {
  .pk-a {
    color: black;
  }
  html.dark .pk-b {
    color: white;
  }
}

Shortcut ​

Shortcut name本身就是普通 StyleItem，可以直接與 inline styles組合：

ts
pika('flex-center', { gap: '1rem' })

Shortcut definition內也能用 StyleItem[] 組合其他 shortcut；不再使用 __shortcut 偽屬性。

下一步 ​