From 366977e81f29eb3382de0d07ee514fe01b3da3b8 Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Wed, 23 Mar 2022 18:59:01 -0700
Subject: [PATCH 01/16] Fix #1819: Enforce order between script and script
 setup

---
 docs/rules/component-tags-order.md      | 25 ++++++++++++++++---------
 lib/rules/component-tags-order.js       | 16 ++++++++++++++--
 tests/lib/rules/component-tags-order.js | 12 ++++++++++++
 3 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/docs/rules/component-tags-order.md b/docs/rules/component-tags-order.md
index 9b053ab21..f0f208722 100644
--- a/docs/rules/component-tags-order.md
+++ b/docs/rules/component-tags-order.md
@@ -14,27 +14,28 @@ since: v6.1.0
 
 ## :book: Rule Details
 
-This rule warns about the order of the `<script>`, `<template>` & `<style>` tags.
+This rule warns about the order of the `<script>`, `<script setup>`, `<template>` & `<style>` tags.
 
 ## :wrench: Options
 
 ```json
 {
   "vue/component-tags-order": ["error", {
-    "order": [ [ "script", "template" ], "style" ]
+    "order": [ [ "script", "script/setup", "template" ], "style" ]
   }]
 }
 ```
 
-- `order` (`(string|string[])[]`) ... The order of top-level element names. default `[ [ "script", "template" ], "style" ]`.
+- `order` (`(string|string[])[]`) ... The order of top-level element names. default `[ [ "script", "script/setup", "template" ], "style" ]`.
 
-### `{ "order": [ [ "script", "template" ], "style" ] }` (default)
+### `{ "order": [ [ "script", "script/setup", "template" ], "style" ] }` (default)
 
 <eslint-code-block fix :rules="{'vue/component-tags-order': ['error']}">
 
 ```vue
 <!-- ✓ GOOD -->
 <script>/* ... */</script>
+<script setup>/* ... */</script>
 <template>...</template>
 <style>/* ... */</style>
 ```
@@ -47,6 +48,7 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 <!-- ✓ GOOD -->
 <template>...</template>
 <script>/* ... */</script>
+<script setup>/* ... */</script>
 <style>/* ... */</style>
 ```
 
@@ -57,6 +59,7 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 ```vue
 <!-- ✗ BAD -->
 <style>/* ... */</style>
+<script setup>/* ... */</script>
 <script>/* ... */</script>
 <template>...</template>
 ```
@@ -65,21 +68,23 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 
 ### `{ "order": ["template", "script", "style"] }`
 
-<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'style'] }]}">
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'script/setup', 'style'] }]}">
 
 ```vue
 <!-- ✓ GOOD -->
 <template>...</template>
+<script setup>/* ... */</script>
 <script>/* ... */</script>
 <style>/* ... */</style>
 ```
 
 </eslint-code-block>
 
-<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'style'] }]}">
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'script/setup', 'style'] }]}">
 
 ```vue
 <!-- ✗ BAD -->
+<script setup>/* ... */</script>
 <script>/* ... */</script>
 <template>...</template>
 <style>/* ... */</style>
@@ -87,26 +92,28 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 
 </eslint-code-block>
 
-### `{ "order": ["docs", "template", "script", "style"] }`
+### `{ "order": ["docs", "template", "script", "script/setup", "style"] }`
 
-<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['docs', 'template', 'script', 'style'] }]}">
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['docs', 'template', 'script', 'script/setup', 'style'] }]}">
 
 ```vue
 <!-- ✓ GOOD -->
 <docs> documentation </docs>
 <template>...</template>
 <script>/* ... */</script>
+<script setup>/* ... */</script>
 <style>/* ... */</style>
 ```
 
 </eslint-code-block>
 
-<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['docs', 'template', 'script', 'style'] }]}">
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['docs', 'template', 'script', 'script/setup', 'style'] }]}">
 
 ```vue
 <!-- ✗ BAD -->
 <template>...</template>
 <script>/* ... */</script>
+<script setup>/* ... */</script>
 <docs> documentation </docs>
 <style>/* ... */</style>
 ```
diff --git a/lib/rules/component-tags-order.js b/lib/rules/component-tags-order.js
index afb624f9f..d8e2e01c9 100644
--- a/lib/rules/component-tags-order.js
+++ b/lib/rules/component-tags-order.js
@@ -86,6 +86,12 @@ module.exports = {
       }
       return []
     }
+    /**
+     * @param {VElement} element
+     */
+    function isSetupScript(element) {
+      return element.name === 'script' && utils.getAttribute(element, 'setup')
+    }
 
     return {
       Program(node) {
@@ -101,6 +107,12 @@ module.exports = {
           }
           const firstUnordered = elements
             .slice(0, index)
+            .map((e) => {
+              return {
+                element: e,
+                name: isSetupScript(e) ? 'script/setup' : e.name
+              }
+            })
             .filter((e) => expectedIndex < getOrderPosition(e.name))
             .sort(
               (e1, e2) => getOrderPosition(e1.name) - getOrderPosition(e2.name)
@@ -113,12 +125,12 @@ module.exports = {
               data: {
                 name: element.name,
                 firstUnorderedName: firstUnordered.name,
-                line: firstUnordered.loc.start.line
+                line: firstUnordered.element.loc.start.line
               },
               *fix(fixer) {
                 // insert element before firstUnordered
                 const fixedElements = elements.flatMap((it) => {
-                  if (it === firstUnordered) {
+                  if (it === firstUnordered.element) {
                     return [element, it]
                   } else if (it === element) {
                     return []
diff --git a/tests/lib/rules/component-tags-order.js b/tests/lib/rules/component-tags-order.js
index 1992d6fd2..0f967e2fb 100644
--- a/tests/lib/rules/component-tags-order.js
+++ b/tests/lib/rules/component-tags-order.js
@@ -50,6 +50,8 @@ tester.run('component-tags-order', rule, {
     '<template></template><script></script><docs></docs><style></style>',
     '<script></script><template></template>',
     '<template></template><script></script>',
+    '<script setup></script><script></script>',
+    '<docs></docs><template></template><script></script><script setup></script><style></style>',
     `
       <template>
       </template>
@@ -102,6 +104,16 @@ tester.run('component-tags-order', rule, {
       output: null,
       options: [{ order: ['docs', 'script', 'template', 'style'] }]
     },
+    {
+      code: '<script setup></script><script></script><template></template><style></style>',
+      output: null,
+      options: [{ order: ['script/setup', 'script', 'template', 'style'] }]
+    },
+    {
+      code: '<template></template><script setup></script><script></script><style></style>',
+      output: null,
+      options: [{ order: [['script/setup', 'script', 'template'], 'style'] }]
+    },
     {
       code: '<template></template><docs></docs><script></script><style></style>',
       output: null,

From 7ea4ac4c61b97d22d3f12a5720f503d3863db254 Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Wed, 23 Mar 2022 19:16:34 -0700
Subject: [PATCH 02/16] update defaults to match documentation

---
 lib/rules/component-tags-order.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/lib/rules/component-tags-order.js b/lib/rules/component-tags-order.js
index d8e2e01c9..4b3fa9e4f 100644
--- a/lib/rules/component-tags-order.js
+++ b/lib/rules/component-tags-order.js
@@ -10,7 +10,10 @@
 
 const utils = require('../utils')
 
-const DEFAULT_ORDER = Object.freeze([['script', 'template'], 'style'])
+const DEFAULT_ORDER = Object.freeze([
+  ['script', 'script/setup', 'template'],
+  'style'
+])
 
 // ------------------------------------------------------------------------------
 // Rule Definition

From 9b9b218b842c94e0b002bb8e9b08fa3cc503e319 Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sun, 27 Mar 2022 02:15:49 -0700
Subject: [PATCH 03/16] Use CSS selector syntax

---
 docs/rules/component-tags-order.md      | 162 +++++++++++++++++++-----
 lib/rules/component-tags-order.js       | 119 +++++++++++------
 package.json                            |   1 +
 tests/lib/rules/component-tags-order.js |  37 +++++-
 4 files changed, 249 insertions(+), 70 deletions(-)

diff --git a/docs/rules/component-tags-order.md b/docs/rules/component-tags-order.md
index f0f208722..71fe5ad13 100644
--- a/docs/rules/component-tags-order.md
+++ b/docs/rules/component-tags-order.md
@@ -5,6 +5,7 @@ title: vue/component-tags-order
 description: enforce order of component top-level elements
 since: v6.1.0
 ---
+
 # vue/component-tags-order
 
 > enforce order of component top-level elements
@@ -20,24 +21,33 @@ This rule warns about the order of the `<script>`, `<script setup>`, `<template>
 
 ```json
 {
-  "vue/component-tags-order": ["error", {
-    "order": [ [ "script", "script/setup", "template" ], "style" ]
-  }]
+  "vue/component-tags-order": [
+    "error",
+    {
+      "order": [["script", "script[setup]", "template"], "style"]
+    }
+  ]
 }
 ```
 
-- `order` (`(string|string[])[]`) ... The order of top-level element names. default `[ [ "script", "script/setup", "template" ], "style" ]`.
+- `order` (`(string|string[])[]`) ... The order of top-level element names. default `[ [ "script", "script[setup]", "template" ], "style" ]`.
 
-### `{ "order": [ [ "script", "script/setup", "template" ], "style" ] }` (default)
+### `{ "order": [ [ "script", "script[setup]", "template" ], "style" ] }` (default)
 
 <eslint-code-block fix :rules="{'vue/component-tags-order': ['error']}">
 
 ```vue
 <!-- ✓ GOOD -->
-<script>/* ... */</script>
-<script setup>/* ... */</script>
+<script>
+/* ... */
+</script>
+<script setup>
+/* ... */
+</script>
 <template>...</template>
-<style>/* ... */</style>
+<style>
+/* ... */
+</style>
 ```
 
 </eslint-code-block>
@@ -47,9 +57,15 @@ This rule warns about the order of the `<script>`, `<script setup>`, `<template>
 ```vue
 <!-- ✓ GOOD -->
 <template>...</template>
-<script>/* ... */</script>
-<script setup>/* ... */</script>
-<style>/* ... */</style>
+<script>
+/* ... */
+</script>
+<script setup>
+/* ... */
+</script>
+<style>
+/* ... */
+</style>
 ```
 
 </eslint-code-block>
@@ -58,9 +74,15 @@ This rule warns about the order of the `<script>`, `<script setup>`, `<template>
 
 ```vue
 <!-- ✗ BAD -->
-<style>/* ... */</style>
-<script setup>/* ... */</script>
-<script>/* ... */</script>
+<style>
+/* ... */
+</style>
+<script setup>
+/* ... */
+</script>
+<script>
+/* ... */
+</script>
 <template>...</template>
 ```
 
@@ -68,54 +90,132 @@ This rule warns about the order of the `<script>`, `<script setup>`, `<template>
 
 ### `{ "order": ["template", "script", "style"] }`
 
-<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'script/setup', 'style'] }]}">
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'script[setup]', 'style'] }]}">
 
 ```vue
 <!-- ✓ GOOD -->
 <template>...</template>
-<script setup>/* ... */</script>
-<script>/* ... */</script>
-<style>/* ... */</style>
+<script setup>
+/* ... */
+</script>
+<script>
+/* ... */
+</script>
+<style>
+/* ... */
+</style>
 ```
 
 </eslint-code-block>
 
-<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'script/setup', 'style'] }]}">
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'script[setup]', 'style'] }]}">
 
 ```vue
 <!-- ✗ BAD -->
-<script setup>/* ... */</script>
-<script>/* ... */</script>
+<script setup>
+/* ... */
+</script>
+<script>
+/* ... */
+</script>
 <template>...</template>
-<style>/* ... */</style>
+<style>
+/* ... */
+</style>
 ```
 
 </eslint-code-block>
 
-### `{ "order": ["docs", "template", "script", "script/setup", "style"] }`
+### `{ "order": ["docs", "template", "script", "script[setup]", "style"] }`
 
-<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['docs', 'template', 'script', 'script/setup', 'style'] }]}">
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['docs', 'template', 'script', 'script[setup]', 'style'] }]}">
 
 ```vue
 <!-- ✓ GOOD -->
 <docs> documentation </docs>
 <template>...</template>
-<script>/* ... */</script>
-<script setup>/* ... */</script>
-<style>/* ... */</style>
+<script>
+/* ... */
+</script>
+<script setup>
+/* ... */
+</script>
+<style>
+/* ... */
+</style>
 ```
 
 </eslint-code-block>
 
-<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['docs', 'template', 'script', 'script/setup', 'style'] }]}">
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['docs', 'template', 'script', 'script[setup]', 'style'] }]}">
 
 ```vue
 <!-- ✗ BAD -->
 <template>...</template>
-<script>/* ... */</script>
-<script setup>/* ... */</script>
+<script>
+/* ... */
+</script>
+<script setup>
+/* ... */
+</script>
 <docs> documentation </docs>
-<style>/* ... */</style>
+<style>
+/* ... */
+</style>
+```
+
+</eslint-code-block>
+
+### `{ "order": ["docs", "template", "script", "script[setup]", "style"] }`
+
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['[locale=en]', 'i18n[local=ja]', 'script', 'script[setup]', 'style:not([scoped])', 'style'] }]}">
+
+```vue
+<!-- ✓ GOOD -->
+<i18n locale="en">
+/* ... */
+</i18n>
+<i18n locale="ja">
+/* ... */
+</i18n>
+<script>
+/* ... */
+</script>
+<script setup>
+/* ... */
+</script>
+<style>
+/* ... */
+</style>
+<style scoped>
+/* ... */
+</style>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['[locale=en]', 'i18n[local=ja]', 'script', 'script[setup]', 'style:not([scoped])', 'style'] }]}">
+
+```vue
+<!-- ✗ BAD -->
+<style>
+/* ... */
+</style>
+<style scoped>
+/* ... */
+</style>
+<i18n locale="en">
+/* ... */
+</i18n>
+<i18n locale="ja">
+/* ... */
+</i18n>
+<script>
+/* ... */
+</script>
+<script setup>
+/* ... */
+</script>
 ```
 
 </eslint-code-block>
diff --git a/lib/rules/component-tags-order.js b/lib/rules/component-tags-order.js
index 4b3fa9e4f..fd2937c12 100644
--- a/lib/rules/component-tags-order.js
+++ b/lib/rules/component-tags-order.js
@@ -9,11 +9,9 @@
 // ------------------------------------------------------------------------------
 
 const utils = require('../utils')
+const parser = require('postcss-selector-parser')
 
-const DEFAULT_ORDER = Object.freeze([
-  ['script', 'script/setup', 'template'],
-  'style'
-])
+const DEFAULT_ORDER = Object.freeze([['script', 'template'], 'style'])
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -46,11 +44,7 @@ module.exports = {
         },
         additionalProperties: false
       }
-    ],
-    messages: {
-      unexpected:
-        'The <{{name}}> should be above the <{{firstUnorderedName}}> on line {{line}}.'
-    }
+    ]
   },
   /**
    * @param {RuleContext} context - The rule context.
@@ -73,11 +67,74 @@ module.exports = {
     })
 
     /**
-     * @param {string} name
+     * @param {VElement} element
+     * @return {String}
+     */
+    function getAttributeString(element) {
+      return element.startTag.attributes
+        .map((attribute) => {
+          if (attribute.value && attribute.value.type !== 'VLiteral') {
+            return ''
+          }
+
+          return `${attribute.key.name}${
+            attribute.value && attribute.value.value
+              ? '=' + attribute.value.value
+              : ''
+          }`
+        })
+        .join(' ')
+    }
+
+    /**
+     * @param {String} ordering
+     * @param {VElement} element
+     * @return {Boolean} true if the element matches the selector, false otherwise
      */
-    function getOrderPosition(name) {
-      const num = orderMap.get(name)
-      return num == null ? -1 : num
+    function matches(ordering, element) {
+      let hasMatch = true
+      let isNegated = false
+
+      parser((selectors) => {
+        selectors.walk((selector) => {
+          switch (selector.type) {
+            case 'tag':
+              hasMatch = hasMatch && selector.value === element.name
+              break
+            case 'pseudo':
+              isNegated = selector.value === ':not'
+              break
+            case 'attribute':
+              hasMatch =
+                hasMatch &&
+                utils.hasAttribute(
+                  element,
+                  selector.qualifiedAttribute,
+                  selector.value
+                )
+              break
+          }
+        })
+      }).processSync(ordering)
+
+      if (isNegated) {
+        return !hasMatch
+      } else {
+        return hasMatch
+      }
+    }
+
+    /**
+     * @param {VElement} element
+     */
+    function getOrderPosition(element) {
+      for (const [ordering, index] of orderMap.entries()) {
+        if (matches(ordering, element)) {
+          return index
+        }
+      }
+
+      return -1
     }
     const documentFragment =
       context.parserServices.getDocumentFragment &&
@@ -89,12 +146,6 @@ module.exports = {
       }
       return []
     }
-    /**
-     * @param {VElement} element
-     */
-    function isSetupScript(element) {
-      return element.name === 'script' && utils.getAttribute(element, 'setup')
-    }
 
     return {
       Program(node) {
@@ -104,36 +155,30 @@ module.exports = {
         const elements = getTopLevelHTMLElements()
         const sourceCode = context.getSourceCode()
         elements.forEach((element, index) => {
-          const expectedIndex = getOrderPosition(element.name)
+          const expectedIndex = getOrderPosition(element)
           if (expectedIndex < 0) {
             return
           }
           const firstUnordered = elements
             .slice(0, index)
-            .map((e) => {
-              return {
-                element: e,
-                name: isSetupScript(e) ? 'script/setup' : e.name
-              }
-            })
-            .filter((e) => expectedIndex < getOrderPosition(e.name))
-            .sort(
-              (e1, e2) => getOrderPosition(e1.name) - getOrderPosition(e2.name)
-            )[0]
+            .filter((e) => expectedIndex < getOrderPosition(e))
+            .sort((e1, e2) => getOrderPosition(e1) - getOrderPosition(e2))[0]
           if (firstUnordered) {
+            const firstUnorderedttributes = getAttributeString(firstUnordered)
+            const elementAttributes = getAttributeString(element)
+
             context.report({
               node: element,
               loc: element.loc,
-              messageId: 'unexpected',
-              data: {
-                name: element.name,
-                firstUnorderedName: firstUnordered.name,
-                line: firstUnordered.element.loc.start.line
-              },
+              message: `The <${element.name}${
+                elementAttributes ? ' ' + elementAttributes : ''
+              }> should be above the <${firstUnordered.name}${
+                firstUnorderedttributes ? ' ' + firstUnorderedttributes : ''
+              }> on line ${firstUnordered.loc.start.line}.`,
               *fix(fixer) {
                 // insert element before firstUnordered
                 const fixedElements = elements.flatMap((it) => {
-                  if (it === firstUnordered.element) {
+                  if (it === firstUnordered) {
                     return [element, it]
                   } else if (it === element) {
                     return []
diff --git a/package.json b/package.json
index 7abecb3f1..fbe19064b 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
   "dependencies": {
     "eslint-utils": "^3.0.0",
     "natural-compare": "^1.4.0",
+    "postcss-selector-parser": "^6.0.9",
     "semver": "^7.3.5",
     "vue-eslint-parser": "^8.0.1"
   },
diff --git a/tests/lib/rules/component-tags-order.js b/tests/lib/rules/component-tags-order.js
index 0f967e2fb..3f1c6078c 100644
--- a/tests/lib/rules/component-tags-order.js
+++ b/tests/lib/rules/component-tags-order.js
@@ -107,18 +107,28 @@ tester.run('component-tags-order', rule, {
     {
       code: '<script setup></script><script></script><template></template><style></style>',
       output: null,
-      options: [{ order: ['script/setup', 'script', 'template', 'style'] }]
+      options: [{ order: ['script[setup]', 'script', 'template', 'style'] }]
     },
     {
       code: '<template></template><script setup></script><script></script><style></style>',
       output: null,
-      options: [{ order: [['script/setup', 'script', 'template'], 'style'] }]
+      options: [{ order: [['script[setup]', 'script', 'template'], 'style'] }]
     },
     {
       code: '<template></template><docs></docs><script></script><style></style>',
       output: null,
       options: [{ order: [['docs', 'script', 'template'], 'style'] }]
     },
+    {
+      code: '<i18n locale="en"></i18n><i18n locale="ja"></i18n>',
+      output: null,
+      options: [{ order: ['i18n[locale=en]', 'i18n[locale=ja]'] }]
+    },
+    {
+      code: '<style></style><style scoped></style>',
+      output: null,
+      options: [{ order: ['style:not([scoped])', 'style[scoped]'] }]
+    },
 
     `<script></script><style></style>`,
 
@@ -360,6 +370,29 @@ tester.run('component-tags-order', rule, {
         }
       ],
       output: '\n        <script></script>\n        <style></style>\n      '
+    },
+    {
+      code: '<i18n locale="ja"></i18n><i18n locale="en"></i18n>',
+      output: '<i18n locale="en"></i18n><i18n locale="ja"></i18n>',
+      options: [{ order: ['i18n[locale=en]', 'i18n[locale=ja]'] }],
+      errors: [
+        {
+          message:
+            'The <i18n locale=en> should be above the <i18n locale=ja> on line 1.',
+          line: 1
+        }
+      ]
+    },
+    {
+      code: '<style scoped></style><style></style>',
+      output: '<style></style><style scoped></style>',
+      options: [{ order: ['style:not([scoped])', 'style[scoped]'] }],
+      errors: [
+        {
+          message: 'The <style> should be above the <style scoped> on line 1.',
+          line: 1
+        }
+      ]
     }
   ]
 })

From 04f0d14819fef732a4f5bcb3606e052fd8d343e8 Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sun, 27 Mar 2022 02:23:16 -0700
Subject: [PATCH 04/16] remove incorrect documentation of default behavior for
 script setup

---
 docs/rules/component-tags-order.md | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/docs/rules/component-tags-order.md b/docs/rules/component-tags-order.md
index 71fe5ad13..f313f6a76 100644
--- a/docs/rules/component-tags-order.md
+++ b/docs/rules/component-tags-order.md
@@ -5,7 +5,6 @@ title: vue/component-tags-order
 description: enforce order of component top-level elements
 since: v6.1.0
 ---
-
 # vue/component-tags-order
 
 > enforce order of component top-level elements
@@ -24,15 +23,15 @@ This rule warns about the order of the `<script>`, `<script setup>`, `<template>
   "vue/component-tags-order": [
     "error",
     {
-      "order": [["script", "script[setup]", "template"], "style"]
+      "order": [["script", "template"], "style"]
     }
   ]
 }
 ```
 
-- `order` (`(string|string[])[]`) ... The order of top-level element names. default `[ [ "script", "script[setup]", "template" ], "style" ]`.
+- `order` (`(string|string[])[]`) ... The order of top-level element selectors. default `[ [ "script", "template" ], "style" ]`.
 
-### `{ "order": [ [ "script", "script[setup]", "template" ], "style" ] }` (default)
+### `{ "order": [ [ "script", "template" ], "style" ] }` (default)
 
 <eslint-code-block fix :rules="{'vue/component-tags-order': ['error']}">
 
@@ -41,9 +40,6 @@ This rule warns about the order of the `<script>`, `<script setup>`, `<template>
 <script>
 /* ... */
 </script>
-<script setup>
-/* ... */
-</script>
 <template>...</template>
 <style>
 /* ... */
@@ -60,9 +56,6 @@ This rule warns about the order of the `<script>`, `<script setup>`, `<template>
 <script>
 /* ... */
 </script>
-<script setup>
-/* ... */
-</script>
 <style>
 /* ... */
 </style>
@@ -77,9 +70,6 @@ This rule warns about the order of the `<script>`, `<script setup>`, `<template>
 <style>
 /* ... */
 </style>
-<script setup>
-/* ... */
-</script>
 <script>
 /* ... */
 </script>

From 918fca1e35534f79e04493a312e01ec3bd555249 Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Fri, 1 Apr 2022 22:52:05 -0700
Subject: [PATCH 05/16] Fix bug with multiple not pseudo-selectors

---
 lib/rules/component-tags-order.js       | 42 ++++++++-----
 tests/lib/rules/component-tags-order.js | 81 +++++++++++++++++++++++++
 2 files changed, 107 insertions(+), 16 deletions(-)

diff --git a/lib/rules/component-tags-order.js b/lib/rules/component-tags-order.js
index fd2937c12..b9508acc9 100644
--- a/lib/rules/component-tags-order.js
+++ b/lib/rules/component-tags-order.js
@@ -26,6 +26,10 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/component-tags-order.html'
     },
     fixable: 'code',
+    messages: {
+      unexpected:
+        'The <{{elementName}}{{elementAttributes}}> should be above the <{{firstUnorderedName}}{{firstUnorderedAttributes}}> on line {{line}}.'
+    },
     schema: [
       {
         type: 'object',
@@ -92,35 +96,34 @@ module.exports = {
      * @return {Boolean} true if the element matches the selector, false otherwise
      */
     function matches(ordering, element) {
-      let hasMatch = true
+      let attributeMatches = true
       let isNegated = false
+      let tagMatches = true
 
       parser((selectors) => {
         selectors.walk((selector) => {
           switch (selector.type) {
             case 'tag':
-              hasMatch = hasMatch && selector.value === element.name
+              tagMatches = selector.value === element.name
               break
             case 'pseudo':
               isNegated = selector.value === ':not'
               break
             case 'attribute':
-              hasMatch =
-                hasMatch &&
-                utils.hasAttribute(
-                  element,
-                  selector.qualifiedAttribute,
-                  selector.value
-                )
+              attributeMatches = utils.hasAttribute(
+                element,
+                selector.qualifiedAttribute,
+                selector.value
+              )
               break
           }
         })
       }).processSync(ordering)
 
       if (isNegated) {
-        return !hasMatch
+        return tagMatches && !attributeMatches
       } else {
-        return hasMatch
+        return tagMatches && attributeMatches
       }
     }
 
@@ -170,11 +173,18 @@ module.exports = {
             context.report({
               node: element,
               loc: element.loc,
-              message: `The <${element.name}${
-                elementAttributes ? ' ' + elementAttributes : ''
-              }> should be above the <${firstUnordered.name}${
-                firstUnorderedttributes ? ' ' + firstUnorderedttributes : ''
-              }> on line ${firstUnordered.loc.start.line}.`,
+              messageId: 'unexpected',
+              data: {
+                elementName: element.name,
+                elementAttributes: elementAttributes
+                  ? ' ' + elementAttributes
+                  : '',
+                firstUnorderedName: firstUnordered.name,
+                firstUnorderedAttributes: firstUnorderedttributes
+                  ? ' ' + firstUnorderedttributes
+                  : '',
+                line: firstUnordered.loc.start.line
+              },
               *fix(fixer) {
                 // insert element before firstUnordered
                 const fixedElements = elements.flatMap((it) => {
diff --git a/tests/lib/rules/component-tags-order.js b/tests/lib/rules/component-tags-order.js
index 3f1c6078c..19d23b471 100644
--- a/tests/lib/rules/component-tags-order.js
+++ b/tests/lib/rules/component-tags-order.js
@@ -114,6 +114,65 @@ tester.run('component-tags-order', rule, {
       output: null,
       options: [{ order: [['script[setup]', 'script', 'template'], 'style'] }]
     },
+    {
+      code: '<script></script><script setup></script><template></template><style></style>',
+      output: null,
+      options: [{ order: ['script', 'script[setup]', 'template', 'style'] }]
+    },
+    {
+      code: '<template></template><script></script><script setup></script><style></style>',
+      output: null,
+      options: [{ order: [['script', 'script[setup]', 'template'], 'style'] }]
+    },
+    {
+      code: '<script></script><script setup></script><template></template><style></style>',
+      output: null,
+      options: [
+        { order: ['script:not([setup])', 'script[setup]', 'template', 'style'] }
+      ]
+    },
+    {
+      code: '<template></template><script></script><script setup></script><style></style>',
+      output: null,
+      options: [
+        {
+          order: [['script:not([setup])', 'script[setup]', 'template'], 'style']
+        }
+      ]
+    },
+    {
+      code: '<template></template><script></script><script setup></script><style scoped></style><style></style><i18n lang="ja"></i18n><i18n lang="en"></i18n>',
+      output: null,
+      options: [
+        {
+          order: [
+            ['script:not([setup])', 'script[setup]', 'template'],
+            'style[scoped]',
+            'style:not([scoped])',
+            'i18n:not([lang=en])',
+            'i18n:not([lang=ja])'
+          ]
+        }
+      ]
+    },
+    ,
+    {
+      code: '<template></template><script></script><script setup></script><style scoped></style><style></style><i18n lang="en"></i18n><i18n lang="ja"></i18n>',
+      output: null,
+      options: [
+        {
+          order: [
+            'template',
+            'script:not([setup])',
+            'script[setup]',
+            'style[scoped]',
+            'style:not([scoped])',
+            'i18n[lang=en]',
+            'i18n[lang=ja]'
+          ]
+        }
+      ]
+    },
     {
       code: '<template></template><docs></docs><script></script><style></style>',
       output: null,
@@ -393,6 +452,28 @@ tester.run('component-tags-order', rule, {
           line: 1
         }
       ]
+    },
+    {
+      code: '<style></style><style scoped></style>',
+      output: '<style scoped></style><style></style>',
+      options: [{ order: ['style[scoped]', 'style:not([scoped])'] }],
+      errors: [
+        {
+          message: 'The <style scoped> should be above the <style> on line 1.',
+          line: 1
+        }
+      ]
+    },
+    {
+      code: '<style></style><script></script>',
+      output: '<script></script><style></style>',
+      options: [{ order: ['script:not([scoped])', 'style:not([scoped])'] }],
+      errors: [
+        {
+          message: 'The <script> should be above the <style> on line 1.',
+          line: 1
+        }
+      ]
     }
   ]
 })

From 2a5c7c299cc6a3721af9dc54619abc109c8e2afe Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sat, 2 Apr 2022 23:11:13 -0700
Subject: [PATCH 06/16] revert component tags order docs

---
 docs/rules/component-tags-order.md | 145 +++++------------------------
 1 file changed, 24 insertions(+), 121 deletions(-)

diff --git a/docs/rules/component-tags-order.md b/docs/rules/component-tags-order.md
index f313f6a76..9b053ab21 100644
--- a/docs/rules/component-tags-order.md
+++ b/docs/rules/component-tags-order.md
@@ -14,22 +14,19 @@ since: v6.1.0
 
 ## :book: Rule Details
 
-This rule warns about the order of the `<script>`, `<script setup>`, `<template>` & `<style>` tags.
+This rule warns about the order of the `<script>`, `<template>` & `<style>` tags.
 
 ## :wrench: Options
 
 ```json
 {
-  "vue/component-tags-order": [
-    "error",
-    {
-      "order": [["script", "template"], "style"]
-    }
-  ]
+  "vue/component-tags-order": ["error", {
+    "order": [ [ "script", "template" ], "style" ]
+  }]
 }
 ```
 
-- `order` (`(string|string[])[]`) ... The order of top-level element selectors. default `[ [ "script", "template" ], "style" ]`.
+- `order` (`(string|string[])[]`) ... The order of top-level element names. default `[ [ "script", "template" ], "style" ]`.
 
 ### `{ "order": [ [ "script", "template" ], "style" ] }` (default)
 
@@ -37,13 +34,9 @@ This rule warns about the order of the `<script>`, `<script setup>`, `<template>
 
 ```vue
 <!-- ✓ GOOD -->
-<script>
-/* ... */
-</script>
+<script>/* ... */</script>
 <template>...</template>
-<style>
-/* ... */
-</style>
+<style>/* ... */</style>
 ```
 
 </eslint-code-block>
@@ -53,12 +46,8 @@ This rule warns about the order of the `<script>`, `<script setup>`, `<template>
 ```vue
 <!-- ✓ GOOD -->
 <template>...</template>
-<script>
-/* ... */
-</script>
-<style>
-/* ... */
-</style>
+<script>/* ... */</script>
+<style>/* ... */</style>
 ```
 
 </eslint-code-block>
@@ -67,12 +56,8 @@ This rule warns about the order of the `<script>`, `<script setup>`, `<template>
 
 ```vue
 <!-- ✗ BAD -->
-<style>
-/* ... */
-</style>
-<script>
-/* ... */
-</script>
+<style>/* ... */</style>
+<script>/* ... */</script>
 <template>...</template>
 ```
 
@@ -80,132 +65,50 @@ This rule warns about the order of the `<script>`, `<script setup>`, `<template>
 
 ### `{ "order": ["template", "script", "style"] }`
 
-<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'script[setup]', 'style'] }]}">
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'style'] }]}">
 
 ```vue
 <!-- ✓ GOOD -->
 <template>...</template>
-<script setup>
-/* ... */
-</script>
-<script>
-/* ... */
-</script>
-<style>
-/* ... */
-</style>
+<script>/* ... */</script>
+<style>/* ... */</style>
 ```
 
 </eslint-code-block>
 
-<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'script[setup]', 'style'] }]}">
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script', 'style'] }]}">
 
 ```vue
 <!-- ✗ BAD -->
-<script setup>
-/* ... */
-</script>
-<script>
-/* ... */
-</script>
+<script>/* ... */</script>
 <template>...</template>
-<style>
-/* ... */
-</style>
+<style>/* ... */</style>
 ```
 
 </eslint-code-block>
 
-### `{ "order": ["docs", "template", "script", "script[setup]", "style"] }`
+### `{ "order": ["docs", "template", "script", "style"] }`
 
-<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['docs', 'template', 'script', 'script[setup]', 'style'] }]}">
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['docs', 'template', 'script', 'style'] }]}">
 
 ```vue
 <!-- ✓ GOOD -->
 <docs> documentation </docs>
 <template>...</template>
-<script>
-/* ... */
-</script>
-<script setup>
-/* ... */
-</script>
-<style>
-/* ... */
-</style>
+<script>/* ... */</script>
+<style>/* ... */</style>
 ```
 
 </eslint-code-block>
 
-<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['docs', 'template', 'script', 'script[setup]', 'style'] }]}">
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['docs', 'template', 'script', 'style'] }]}">
 
 ```vue
 <!-- ✗ BAD -->
 <template>...</template>
-<script>
-/* ... */
-</script>
-<script setup>
-/* ... */
-</script>
+<script>/* ... */</script>
 <docs> documentation </docs>
-<style>
-/* ... */
-</style>
-```
-
-</eslint-code-block>
-
-### `{ "order": ["docs", "template", "script", "script[setup]", "style"] }`
-
-<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['[locale=en]', 'i18n[local=ja]', 'script', 'script[setup]', 'style:not([scoped])', 'style'] }]}">
-
-```vue
-<!-- ✓ GOOD -->
-<i18n locale="en">
-/* ... */
-</i18n>
-<i18n locale="ja">
-/* ... */
-</i18n>
-<script>
-/* ... */
-</script>
-<script setup>
-/* ... */
-</script>
-<style>
-/* ... */
-</style>
-<style scoped>
-/* ... */
-</style>
-```
-
-</eslint-code-block>
-
-<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['[locale=en]', 'i18n[local=ja]', 'script', 'script[setup]', 'style:not([scoped])', 'style'] }]}">
-
-```vue
-<!-- ✗ BAD -->
-<style>
-/* ... */
-</style>
-<style scoped>
-/* ... */
-</style>
-<i18n locale="en">
-/* ... */
-</i18n>
-<i18n locale="ja">
-/* ... */
-</i18n>
-<script>
-/* ... */
-</script>
-<script setup>
-/* ... */
-</script>
+<style>/* ... */</style>
 ```
 
 </eslint-code-block>

From e24dd4056afb586bed4050903a0753d683277452 Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sat, 2 Apr 2022 23:20:54 -0700
Subject: [PATCH 07/16] update docs

---
 docs/rules/component-tags-order.md | 37 ++++++++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/docs/rules/component-tags-order.md b/docs/rules/component-tags-order.md
index 9b053ab21..7855c483c 100644
--- a/docs/rules/component-tags-order.md
+++ b/docs/rules/component-tags-order.md
@@ -14,7 +14,7 @@ since: v6.1.0
 
 ## :book: Rule Details
 
-This rule warns about the order of the `<script>`, `<template>` & `<style>` tags.
+This rule warns about the order of the top-level tags, such as `<script>`, `<template>` & `<style>`.
 
 ## :wrench: Options
 
@@ -26,7 +26,7 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 }
 ```
 
-- `order` (`(string|string[])[]`) ... The order of top-level element names. default `[ [ "script", "template" ], "style" ]`.
+- `order` (`(string|string[])[]`) ... The order of top-level element names. default `[ [ "script", "template" ], "style" ]`. May also be CSS selectors, such as `script[setup]` and `i18n:not(lang=en)`.
 
 ### `{ "order": [ [ "script", "template" ], "style" ] }` (default)
 
@@ -113,6 +113,39 @@ This rule warns about the order of the `<script>`, `<template>` & `<style>` tags
 
 </eslint-code-block>
 
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script:not([setup])', 'script[setup]'] }]}">
+
+```vue
+<!-- ✓ GOOD -->
+<template>...</template>
+<script>/* ... */</script>
+<script setup>/* ... */</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'style:not([scoped])', 'style[scoped]'] }]}">
+
+```vue
+<!-- ✗ BAD -->
+<template>...</template>
+<style scoped>/* ... */</style>
+<style>/* ... */</style>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'i18n:not([lang=en])', 'i18n[lang=en]'] }]}">
+
+```vue
+<!-- ✓ GOOD -->
+<template>...</template>
+<i18n lang="ja">/* ... */</i18n>
+<i18n lang="en">/* ... */</i18n>
+```
+
+</eslint-code-block>
+
 ## :books: Further Reading
 
 - [Style guide - Single-file component top-level element order](https://vuejs.org/style-guide/rules-recommended.html#single-file-component-top-level-element-order)

From 7e0e9656338546996de839958793fa71dd833a15 Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sat, 2 Apr 2022 23:25:12 -0700
Subject: [PATCH 08/16] Update error message

---
 lib/rules/component-tags-order.js       |  2 +-
 tests/lib/rules/component-tags-order.js | 38 ++++++++++++-------------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/lib/rules/component-tags-order.js b/lib/rules/component-tags-order.js
index b9508acc9..02ddfef5d 100644
--- a/lib/rules/component-tags-order.js
+++ b/lib/rules/component-tags-order.js
@@ -28,7 +28,7 @@ module.exports = {
     fixable: 'code',
     messages: {
       unexpected:
-        'The <{{elementName}}{{elementAttributes}}> should be above the <{{firstUnorderedName}}{{firstUnorderedAttributes}}> on line {{line}}.'
+        '<{{elementName}}{{elementAttributes}}> should be above <{{firstUnorderedName}}{{firstUnorderedAttributes}}> on line {{line}}.'
     },
     schema: [
       {
diff --git a/tests/lib/rules/component-tags-order.js b/tests/lib/rules/component-tags-order.js
index 19d23b471..be312edb7 100644
--- a/tests/lib/rules/component-tags-order.js
+++ b/tests/lib/rules/component-tags-order.js
@@ -200,12 +200,12 @@ tester.run('component-tags-order', rule, {
       code: '<style></style><template></template><script></script>',
       errors: [
         {
-          message: 'The <template> should be above the <style> on line 1.',
+          message: '<template> should be above <style> on line 1.',
           line: 1,
           column: 16
         },
         {
-          message: 'The <script> should be above the <style> on line 1.',
+          message: '<script> should be above <style> on line 1.',
           line: 1,
           column: 37
         }
@@ -217,7 +217,7 @@ tester.run('component-tags-order', rule, {
       options: [{ order: ['script', 'template', 'style'] }],
       errors: [
         {
-          message: 'The <script> should be above the <template> on line 1.',
+          message: '<script> should be above <template> on line 1.',
           line: 1,
           column: 22
         }
@@ -233,7 +233,7 @@ tester.run('component-tags-order', rule, {
         <script></script>`,
       errors: [
         {
-          message: 'The <script> should be above the <style> on line 4.',
+          message: '<script> should be above <style> on line 4.',
           line: 6
         }
       ],
@@ -254,7 +254,7 @@ tester.run('component-tags-order', rule, {
       options: [{ order: ['script', 'template', 'style'] }],
       errors: [
         {
-          message: 'The <script> should be above the <template> on line 2.',
+          message: '<script> should be above <template> on line 2.',
           line: 3
         }
       ],
@@ -274,7 +274,7 @@ tester.run('component-tags-order', rule, {
       options: [{ order: ['template', 'script', 'style'] }],
       errors: [
         {
-          message: 'The <template> should be above the <script> on line 2.',
+          message: '<template> should be above <script> on line 2.',
           line: 3
         }
       ],
@@ -295,7 +295,7 @@ tester.run('component-tags-order', rule, {
       options: [{ order: ['docs', 'template', 'script', 'style'] }],
       errors: [
         {
-          message: 'The <docs> should be above the <template> on line 2.',
+          message: '<docs> should be above <template> on line 2.',
           line: 3
         }
       ],
@@ -317,7 +317,7 @@ tester.run('component-tags-order', rule, {
       options: [{ order: ['script', 'template', 'style'] }],
       errors: [
         {
-          message: 'The <script> should be above the <template> on line 2.',
+          message: '<script> should be above <template> on line 2.',
           line: 4
         }
       ],
@@ -340,7 +340,7 @@ tester.run('component-tags-order', rule, {
       options: [{ order: ['script', 'template', 'style'] }],
       errors: [
         {
-          message: 'The <script> should be above the <template> on line 2.',
+          message: '<script> should be above <template> on line 2.',
           line: 5
         }
       ],
@@ -361,7 +361,7 @@ tester.run('component-tags-order', rule, {
       options: [{ order: ['template', 'script'] }],
       errors: [
         {
-          message: 'The <template> should be above the <script> on line 2.',
+          message: '<template> should be above <script> on line 2.',
           line: 3
         }
       ],
@@ -376,11 +376,11 @@ tester.run('component-tags-order', rule, {
       `,
       errors: [
         {
-          message: 'The <template> should be above the <style> on line 2.',
+          message: '<template> should be above <style> on line 2.',
           line: 3
         },
         {
-          message: 'The <script> should be above the <style> on line 2.',
+          message: '<script> should be above <style> on line 2.',
           line: 4
         }
       ],
@@ -400,11 +400,11 @@ tester.run('component-tags-order', rule, {
       `,
       errors: [
         {
-          message: 'The <template> should be above the <style> on line 2.',
+          message: '<template> should be above <style> on line 2.',
           line: 4
         },
         {
-          message: 'The <script> should be above the <style> on line 2.',
+          message: '<script> should be above <style> on line 2.',
           line: 5
         }
       ],
@@ -424,7 +424,7 @@ tester.run('component-tags-order', rule, {
       `,
       errors: [
         {
-          message: 'The <script> should be above the <style> on line 2.',
+          message: '<script> should be above <style> on line 2.',
           line: 3
         }
       ],
@@ -437,7 +437,7 @@ tester.run('component-tags-order', rule, {
       errors: [
         {
           message:
-            'The <i18n locale=en> should be above the <i18n locale=ja> on line 1.',
+            '<i18n locale=en> should be above <i18n locale=ja> on line 1.',
           line: 1
         }
       ]
@@ -448,7 +448,7 @@ tester.run('component-tags-order', rule, {
       options: [{ order: ['style:not([scoped])', 'style[scoped]'] }],
       errors: [
         {
-          message: 'The <style> should be above the <style scoped> on line 1.',
+          message: '<style> should be above <style scoped> on line 1.',
           line: 1
         }
       ]
@@ -459,7 +459,7 @@ tester.run('component-tags-order', rule, {
       options: [{ order: ['style[scoped]', 'style:not([scoped])'] }],
       errors: [
         {
-          message: 'The <style scoped> should be above the <style> on line 1.',
+          message: '<style scoped> should be above <style> on line 1.',
           line: 1
         }
       ]
@@ -470,7 +470,7 @@ tester.run('component-tags-order', rule, {
       options: [{ order: ['script:not([scoped])', 'style:not([scoped])'] }],
       errors: [
         {
-          message: 'The <script> should be above the <style> on line 1.',
+          message: '<script> should be above <style> on line 1.',
           line: 1
         }
       ]

From 4ef230823b1bed2d3d71cb8e3407b55a18bf7ae1 Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sat, 2 Apr 2022 23:48:43 -0700
Subject: [PATCH 09/16] update headers

---
 docs/rules/component-tags-order.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/rules/component-tags-order.md b/docs/rules/component-tags-order.md
index 7855c483c..c20edb753 100644
--- a/docs/rules/component-tags-order.md
+++ b/docs/rules/component-tags-order.md
@@ -113,6 +113,8 @@ This rule warns about the order of the top-level tags, such as `<script>`, `<tem
 
 </eslint-code-block>
 
+### `{ 'order': ['template', 'script:not([setup])', 'script[setup]'] }`
+
 <eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script:not([setup])', 'script[setup]'] }]}">
 
 ```vue
@@ -124,6 +126,8 @@ This rule warns about the order of the top-level tags, such as `<script>`, `<tem
 
 </eslint-code-block>
 
+### `{ 'order': ['template', 'style:not([scoped])', 'style[scoped]'] }`
+
 <eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'style:not([scoped])', 'style[scoped]'] }]}">
 
 ```vue
@@ -135,6 +139,8 @@ This rule warns about the order of the top-level tags, such as `<script>`, `<tem
 
 </eslint-code-block>
 
+### `{ 'order': ['template', 'i18n:not([lang=en])', 'i18n[lang=en]'] }`
+
 <eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'i18n:not([lang=en])', 'i18n[lang=en]'] }]}">
 
 ```vue

From b947ce15a2ae5467664ed11257d71c6c4dba2cab Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sat, 2 Apr 2022 23:50:51 -0700
Subject: [PATCH 10/16] update docs more better

---
 docs/rules/component-tags-order.md | 33 ++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/docs/rules/component-tags-order.md b/docs/rules/component-tags-order.md
index c20edb753..e9596f386 100644
--- a/docs/rules/component-tags-order.md
+++ b/docs/rules/component-tags-order.md
@@ -126,10 +126,32 @@ This rule warns about the order of the top-level tags, such as `<script>`, `<tem
 
 </eslint-code-block>
 
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'script:not([setup])', 'script[setup]'] }]}">
+
+```vue
+<!-- ✗ BAD -->
+<template>...</template>
+<script setup>/* ... */</script>
+<script>/* ... */</script>
+```
+
+</eslint-code-block>
+
 ### `{ 'order': ['template', 'style:not([scoped])', 'style[scoped]'] }`
 
 <eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'style:not([scoped])', 'style[scoped]'] }]}">
 
+```vue
+<!-- ✓ GOOD -->
+<template>...</template>
+<style>/* ... */</style>
+<style scoped>/* ... */</style>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'style:not([scoped])', 'style[scoped]'] }]}">
+
 ```vue
 <!-- ✗ BAD -->
 <template>...</template>
@@ -152,6 +174,17 @@ This rule warns about the order of the top-level tags, such as `<script>`, `<tem
 
 </eslint-code-block>
 
+<eslint-code-block fix :rules="{'vue/component-tags-order': ['error', { 'order': ['template', 'i18n:not([lang=en])', 'i18n[lang=en]'] }]}">
+
+```vue
+<!-- ✗ BAD -->
+<template>...</template>
+<i18n lang="en">/* ... */</i18n>
+<i18n lang="ja">/* ... */</i18n>
+```
+
+</eslint-code-block>
+
 ## :books: Further Reading
 
 - [Style guide - Single-file component top-level element order](https://vuejs.org/style-guide/rules-recommended.html#single-file-component-top-level-element-order)

From 10245d5bd3e0fb2fe5c4adddfa4b1a8e2dd6a3d0 Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sun, 10 Apr 2022 15:12:13 -0700
Subject: [PATCH 11/16] Update tests/lib/rules/component-tags-order.js

Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>
---
 tests/lib/rules/component-tags-order.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/lib/rules/component-tags-order.js b/tests/lib/rules/component-tags-order.js
index be312edb7..b5142af9b 100644
--- a/tests/lib/rules/component-tags-order.js
+++ b/tests/lib/rules/component-tags-order.js
@@ -122,7 +122,7 @@ tester.run('component-tags-order', rule, {
     {
       code: '<template></template><script></script><script setup></script><style></style>',
       output: null,
-      options: [{ order: [['script', 'script[setup]', 'template'], 'style'] }]
+      options: [{ order: [['script, 'template'], 'style'] }]
     },
     {
       code: '<script></script><script setup></script><template></template><style></style>',

From ee7c60ff9dc90bfbdef5f79cf0336bb9c5211bfc Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sun, 10 Apr 2022 15:12:22 -0700
Subject: [PATCH 12/16] Update tests/lib/rules/component-tags-order.js

Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>
---
 tests/lib/rules/component-tags-order.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/lib/rules/component-tags-order.js b/tests/lib/rules/component-tags-order.js
index b5142af9b..7befcc3bb 100644
--- a/tests/lib/rules/component-tags-order.js
+++ b/tests/lib/rules/component-tags-order.js
@@ -117,7 +117,7 @@ tester.run('component-tags-order', rule, {
     {
       code: '<script></script><script setup></script><template></template><style></style>',
       output: null,
-      options: [{ order: ['script', 'script[setup]', 'template', 'style'] }]
+      options: [{ order: ['script', 'template', 'style'] }]
     },
     {
       code: '<template></template><script></script><script setup></script><style></style>',

From 6b572e60f11513f2c9cecc031534150a92295eed Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sun, 10 Apr 2022 15:12:29 -0700
Subject: [PATCH 13/16] Update tests/lib/rules/component-tags-order.js

Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>
---
 tests/lib/rules/component-tags-order.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/lib/rules/component-tags-order.js b/tests/lib/rules/component-tags-order.js
index 7befcc3bb..c9fc67cc2 100644
--- a/tests/lib/rules/component-tags-order.js
+++ b/tests/lib/rules/component-tags-order.js
@@ -112,7 +112,7 @@ tester.run('component-tags-order', rule, {
     {
       code: '<template></template><script setup></script><script></script><style></style>',
       output: null,
-      options: [{ order: [['script[setup]', 'script', 'template'], 'style'] }]
+      options: [{ order: [['script[setup]', 'script:not([setup])', 'template'], 'style'] }]
     },
     {
       code: '<script></script><script setup></script><template></template><style></style>',

From c19117a3b3b9429b0e8069c78764f402ff876722 Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sun, 10 Apr 2022 15:12:45 -0700
Subject: [PATCH 14/16] Update tests/lib/rules/component-tags-order.js

Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>
---
 tests/lib/rules/component-tags-order.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/lib/rules/component-tags-order.js b/tests/lib/rules/component-tags-order.js
index c9fc67cc2..84c2daeb6 100644
--- a/tests/lib/rules/component-tags-order.js
+++ b/tests/lib/rules/component-tags-order.js
@@ -107,7 +107,7 @@ tester.run('component-tags-order', rule, {
     {
       code: '<script setup></script><script></script><template></template><style></style>',
       output: null,
-      options: [{ order: ['script[setup]', 'script', 'template', 'style'] }]
+      options: [{ order: ['script[setup]', 'script:not([setup])', 'template', 'style'] }]
     },
     {
       code: '<template></template><script setup></script><script></script><style></style>',

From 7a9fbbf6eddbd59b0cbb095ebe398a367013737e Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sun, 10 Apr 2022 15:13:00 -0700
Subject: [PATCH 15/16] Update docs/rules/component-tags-order.md

Co-authored-by: Yosuke Ota <otameshiyo23@gmail.com>
---
 docs/rules/component-tags-order.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/rules/component-tags-order.md b/docs/rules/component-tags-order.md
index e9596f386..cc4aebbfa 100644
--- a/docs/rules/component-tags-order.md
+++ b/docs/rules/component-tags-order.md
@@ -26,7 +26,7 @@ This rule warns about the order of the top-level tags, such as `<script>`, `<tem
 }
 ```
 
-- `order` (`(string|string[])[]`) ... The order of top-level element names. default `[ [ "script", "template" ], "style" ]`. May also be CSS selectors, such as `script[setup]` and `i18n:not(lang=en)`.
+- `order` (`(string|string[])[]`) ... The order of top-level element names. default `[ [ "script", "template" ], "style" ]`. May also be CSS selectors, such as `script[setup]` and `i18n:not([lang=en])`.
 
 ### `{ "order": [ [ "script", "template" ], "style" ] }` (default)
 

From 7207f19639e9d8f8aaaba0878446c8fa7459ec77 Mon Sep 17 00:00:00 2001
From: Douglas Wade <douglas.b.wade@gmail.com>
Date: Sun, 10 Apr 2022 15:16:01 -0700
Subject: [PATCH 16/16] don't move the message block

---
 lib/rules/component-tags-order.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/lib/rules/component-tags-order.js b/lib/rules/component-tags-order.js
index 02ddfef5d..289bc381f 100644
--- a/lib/rules/component-tags-order.js
+++ b/lib/rules/component-tags-order.js
@@ -26,10 +26,6 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/component-tags-order.html'
     },
     fixable: 'code',
-    messages: {
-      unexpected:
-        '<{{elementName}}{{elementAttributes}}> should be above <{{firstUnorderedName}}{{firstUnorderedAttributes}}> on line {{line}}.'
-    },
     schema: [
       {
         type: 'object',
@@ -48,7 +44,11 @@ module.exports = {
         },
         additionalProperties: false
       }
-    ]
+    ],
+    messages: {
+      unexpected:
+        '<{{elementName}}{{elementAttributes}}> should be above <{{firstUnorderedName}}{{firstUnorderedAttributes}}> on line {{line}}.'
+    }
   },
   /**
    * @param {RuleContext} context - The rule context.