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