feat: add unocss optional plugin

README.md

@@ -334,9 +334,9 @@ export default antfu({
 
 ### Optional Configs
 
-#### React
+We provide some optional configs for specific use cases, that we don't include their dependencies by default.
 
-We do include configs for React. But due to the install size of React plugins we didn't include the dependencies by default.
+#### React
 
 To enable React support, need to explicitly turn it on:
 
@@ -349,12 +349,31 @@ export default antfu({
 })
 ```
 
-Running `npx eslint` should prompt you to install the required dependencies, otherwise you can install them manually:
+Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
 
 ```bash
 npm i -D eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh
 ```
 
+#### UnoCSS
+
+To enable UnoCSS support, need to explicitly turn it on:
+
+```js
+// eslint.config.js
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  unocss: true,
+})
+```
+
+Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
+
+```bash
+npm i -D @unocss/eslint-plugin
+```
+
 ### Optional Rules
 
 This config also provides some optional plugins/rules for extended usages.
@@ -415,7 +434,7 @@ npm i -D lint-staged simple-git-hooks
 
 ## Versioning Policy
 
-This project follows [Semantic Versioning](https://semver.org/) for releases. However, since this is just a config and involved with opinions and many moving parts, we don't treat rules changes as breaking changes.
+This project follows [Semantic Versioning](https://semver.org/) for releases. However, since this is just a config and involves opinions and many moving parts, we don't treat rules changes as breaking changes.
 
 ### Changes Considered as Breaking Changes
 
@@ -452,7 +471,7 @@ This config does NOT lint CSS. I personally use [UnoCSS](https://github.com/unoc
 
 ### I prefer XXX...
 
-Sure, you can config and override rules locally in your project to fit your needs. If that still does not work for you, you can always fork this repo and maintain your own.
+Sure, you can configure and override rules locally in your project to fit your needs. If that still does not work for you, you can always fork this repo and maintain your own.
 
 ## Check Also
 

package.json

@@ -36,12 +36,16 @@
     "prepare": "simple-git-hooks"
   },
   "peerDependencies": {
+    "@unocss/eslint-plugin": ">=0.50.0",
     "eslint": ">=8.40.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4"
   },
   "peerDependenciesMeta": {
+    "@unocss/eslint-plugin": {
+      "optional": true
+    },
     "eslint-plugin-react": {
       "optional": true
     },
@@ -95,6 +99,7 @@
     "@types/node": "^20.9.4",
     "@types/prompts": "^2.4.9",
     "@types/yargs": "^17.0.32",
+    "@unocss/eslint-plugin": "^0.57.7",
     "bumpp": "^9.2.0",
     "eslint": "^8.54.0",
     "eslint-flat-config-viewer": "^0.1.3",

src/configs/index.ts

@@ -15,3 +15,4 @@ export * from './yaml'
 export * from './test'
 export * from './perfectionist'
 export * from './react'
+export * from './unocss'

src/configs/unocss.ts

@@ -0,0 +1,43 @@
+import { ensurePackages, interopDefault } from '../utils'
+import type { FlatConfigItem, OptionsUnoCSS } from '../types'
+
+export async function unocss(
+  options: OptionsUnoCSS = {},
+): Promise<FlatConfigItem[]> {
+  const {
+    attributify = true,
+    strict = false,
+  } = options
+
+  await ensurePackages([
+    '@unocss/eslint-plugin',
+  ])
+
+  const [
+    pluginUnoCSS,
+  ] = await Promise.all([
+    interopDefault(import('@unocss/eslint-plugin')),
+  ] as const)
+
+  return [
+    {
+      name: 'antfu:unocss',
+      plugins: {
+        unocss: pluginUnoCSS,
+      },
+      rules: {
+        'unocss/order': 'warn',
+        ...attributify
+          ? {
+              'unocss/order-attributify': 'warn',
+            }
+          : {},
+        ...strict
+          ? {
+              'unocss/blocklist': 'error',
+            }
+          : {},
+      },
+    },
+  ]
+}

src/factory.ts

@@ -19,6 +19,7 @@ import {
   test,
   typescript,
   unicorn,
+  unocss,
   vue,
   yaml,
 } from './configs'
@@ -56,6 +57,7 @@ export async function antfu(
     overrides = {},
     react: enableReact = false,
     typescript: enableTypeScript = isPackageExists('typescript'),
+    unocss: enableUnoCSS = false,
     vue: enableVue = VuePackages.some(i => isPackageExists(i)),
   } = options
 
@@ -138,6 +140,12 @@ export async function antfu(
     }))
   }
 
+  if (enableUnoCSS) {
+    configs.push(unocss(
+      typeof enableUnoCSS === 'boolean' ? {} : enableUnoCSS,
+    ))
+  }
+
   if (options.jsonc ?? true) {
     configs.push(
       jsonc({

src/types.ts

@@ -121,6 +121,19 @@ export interface OptionsIsInEditor {
   isInEditor?: boolean
 }
 
+export interface OptionsUnoCSS {
+  /**
+   * Enable attributify support.
+   * @default true
+   */
+  attributify?: boolean
+  /**
+   * Enable strict mode by throwing errors about blocklisted classes.
+   * @default false
+   */
+  strict?: boolean
+}
+
 export interface OptionsConfig extends OptionsComponentExts {
   /**
    * Enable gitignore support.
@@ -195,10 +208,25 @@ export interface OptionsConfig extends OptionsComponentExts {
   /**
    * Enable react rules.
    *
-   * @default true
+   * Requires installing:
+   * - `eslint-plugin-react`
+   * - `eslint-plugin-react-hooks`
+   * - `eslint-plugin-react-refresh`
+   *
+   * @default false
    */
   react?: boolean
 
+  /**
+   * Enable unocss rules.
+   *
+   * Requires installing:
+   * - `@unocss/eslint-plugin`
+   *
+   * @default false
+   */
+  unocss?: boolean | OptionsUnoCSS
+
   /**
    * Control to disable some rules in editors.
    * @default auto-detect based on the process.env