pyr0ball 7a704441a6 feat(snipe): Vue 3 frontend scaffold + Docker web service

- web/: Vue 3 + Vite + UnoCSS + Pinia, dark tactical theme (amber/#0d1117)
- AppNav, ListingCard, SearchView with filters/sort, composables
  (useSnipeMode, useKonamiCode, useMotion), Pinia search store
- Steal shimmer, auction countdown, Snipe Mode easter egg all native in Vue
- docker/web/: nginx + multi-stage Dockerfile (node build → nginx serve)
- compose.yml: api (8510) + web (8509) services
- Dockerfile CMD updated to uvicorn for upcoming FastAPI layer
- Clean build: 0 TS errors, 380 modules

2026-03-25 15:11:35 -07:00

2.1 KiB

Raw Blame History

@unocss/transformer-attributify-jsx

Support valueless attributify in JSX/TSX.

export function Component() {
  return (
    <div text-red text-center text-5xl animate-bounce>
      unocss
    </div>
  )
}

Will be transformed to:

export function Component() {
  return (
    <div text-red="" text-center="" text-5xl="" animate-bounce="">
      unocss
    </div>
  )
}

Without this transformer

JSX by default will treat valueless attributes as boolean attributes.

export function Component() {
  return (
    <div text-red={true} text-center={true} text-5xl={true} animate-bounce={true}>
      unocss
    </div>
  )
}

Install

npm i -D @unocss/transformer-attributify-jsx

import transformerAttributifyJsx from '@unocss/transformer-attributify-jsx'
// uno.config.ts
import { defineConfig, presetAttributify } from 'unocss'

export default defineConfig({
  // ...
  presets: [
    // ...
    presetAttributify()
  ],
  transformers: [
    transformerAttributifyJsx(), // <--
  ],
})

Caveats

⚠️ The rules are almost the same as those of preset-attributify, but there are several precautions

<div translate-x-100% />
<!-- cannot end with `%` -->

<div translate-x-[100px] />
<!-- cannot contain `[` or `]` -->

Instead, you may want to use valued attributes instead:

<div translate="x-100%" />

<div translate="x-[100px]" />

Blocklist

This transformer will only transform attributes that are valid UnoCSS utilities. You can also blocklist bypass some attributes from been transformed.

transformerAttributifyJsx({
  blocklist: [/text-[a-zA-Z]*/, 'text-5xl']
})

<div text-red text-center text-5xl animate-bounce>
  unocss
</div>

Will be compiled to:

<div text-red text-center text-5xl animate-bounce="">unocss</div>

2.1 KiB Raw Blame History

@unocss/transformer-attributify-jsx

Install

Caveats

Blocklist

License

2.1 KiB

Raw Blame History