test: add tests for more eslint rules

packages/eslint-plugin/src/rules/blocklist.test.ts

@@ -0,0 +1,71 @@
+import * as vueParser from 'vue-eslint-parser'
+import { $ as html, run } from 'eslint-vitest-rule-tester'
+import rule from './blocklist'
+
+run({
+  name: 'blocklist',
+  rule,
+  languageOptions: {
+    parser: vueParser,
+  },
+
+  valid: [
+    html`
+      <template>
+        <div class="m1 mx1 mr-1"></div>
+      </template>
+    `,
+  ],
+  invalid: [
+    {
+      code: html`
+        <template>
+          <div class="border"></div>
+        </template>
+      `,
+      errors: [
+        {
+          messageId: 'in-blocklist',
+          data: {
+            name: 'border',
+            reason: '',
+          },
+        },
+      ],
+    },
+    {
+      description: 'with message',
+      code: html`
+        <template>
+          <div class="bg-red-500"></div>
+        </template>
+      `,
+      errors: [
+        {
+          messageId: 'in-blocklist',
+          data: {
+            name: 'bg-red-500',
+            reason: ': Use bg-red-600 instead',
+          },
+        },
+      ],
+    },
+    {
+      description: 'dynamic blocklist with message',
+      code: html`
+        <template>
+          <div class="text-red"></div>
+        </template>
+      `,
+      errors: [
+        {
+          messageId: 'in-blocklist',
+          data: {
+            name: 'text-red',
+            reason: ': Use color-* instead',
+          },
+        },
+      ],
+    },
+  ],
+})

packages/eslint-plugin/src/rules/order.test.ts

@@ -0,0 +1,39 @@
+import * as vueParser from 'vue-eslint-parser'
+import { $ as html, run } from 'eslint-vitest-rule-tester'
+import { expect } from 'vitest'
+import rule from './order'
+
+run({
+  name: 'order',
+  rule,
+  languageOptions: {
+    parser: vueParser,
+  },
+
+  valid: [
+    html`
+      <template>
+        <div class="m1 mx1 mr-1"></div>
+      </template>
+    `,
+  ],
+  invalid: [
+    {
+      code: html`
+        <template>
+          <div class="mx1 m1 mr-1"></div>
+        </template>
+      `,
+      output: output => expect(output).toMatchInlineSnapshot(`
+        "<template>
+          <div class="m1 mx1 mr-1"></div>
+        </template>"
+      `),
+      errors: [
+        {
+          messageId: 'invalid-order',
+        },
+      ],
+    },
+  ],
+})

test/__snapshots__/postcss.test.ts.snap

@@ -2,8 +2,6 @@
 
 exports[`postcss > @apply > basic 1`] = `"div{--un-bg-opacity:1;background-color:rgb(248 113 113 / var(--un-bg-opacity));}.dark div>:focus:hover{font-size:20px;}div:hover{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity));}"`;
 
-exports[`postcss > @apply > media 1`] = `"div{}@media (min-width: 640px){div{--un-bg-opacity:1;background-color:rgb(248 113 113 / var(--un-bg-opacity));}}@media (min-width: 768px){div{--un-bg-opacity:1;background-color:rgb(96 165 250 / var(--un-bg-opacity));}}@media (min-width: 1024px){div{--un-bg-opacity:1;background-color:rgb(244 114 182 / var(--un-bg-opacity));}}@media (min-width: 1280px){div{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));}}"`;
-
 exports[`postcss > @screen 1`] = `
 "@media (min-width: 768px) and (max-width: 1023.9px) {
       div{--un-bg-opacity:1;background-color:rgb(248 113 113 / var(--un-bg-opacity));}

uno.config.ts

@@ -0,0 +1,15 @@
+// This file is for testing
+
+// eslint-disable-next-line no-restricted-imports
+import { defineConfig, presetUno } from 'unocss'
+
+export default defineConfig({
+  presets: [
+    presetUno(),
+  ],
+  blocklist: [
+    'border',
+    ['bg-red-500', { message: 'Use bg-red-600 instead' }],
+    [i => i.startsWith('text-'), { message: 'Use color-* instead' }],
+  ],
+})

vitest.config.ts

@@ -13,6 +13,5 @@ export default defineConfig({
     name: 'unit',
     setupFiles: ['./test/setup.ts'],
     exclude: [...defaultExclude, '**/svelte-scoped/**'],
-    globals: true,
   },
 })