unocss-preset-block

UnoCSS Preset Block.

Features

• 🔥 Disable non-standard unocss class names

Usage

pnpm i -D unocss-preset-block unocss

// uno.config.ts
import { defineConfig } from 'unocss'
import { presetBlock } from 'unocss-preset-block'

export default defineConfig({
  presets: [
    // ...
    presetBlock(),
  ],
})

Rules

Disable px/rem unit

<!-- bad -->
<div class="m-1rem">...</div>
<!-- good -->
<div class="m-4">...</div>

Disable magic-number

<!-- bad -->
<div class="text-3">...</div>
<!-- good -->
<div class="text-xs">...</div>

Disable consecutive dashes

<!-- bad -->
<div class="m--3">...</div>
<!-- good -->
<div class="-m-3">...</div>

Lint

Recommended to work with @unocss/eslint-plugin

// .eslintrc.js
module.exports = {
  plugins: [
    // ...
    '@unocss',
  ],
  rules: {
    // ...
    '@unocss/blocklist': ['error']
  },
}

License

MIT License © 2023 Chizuki