From d36bf2c61d50b5553567441e2b246bd6061a16fb Mon Sep 17 00:00:00 2001
From: mussinbenarbia <mouhssine.benarbia@gmail.com>
Date: Tue, 21 Mar 2023 17:29:41 +0900
Subject: [PATCH 01/11] feat: add new `vue/enforce-style-attribute` rule
 (#2109)

---
 docs/rules/enforce-style-attribute.md      |  83 +++++++++++++++++
 lib/rules/enforce-style-attribute.js       | 102 +++++++++++++++++++++
 tests/lib/rules/enforce-style-attribute.js | 101 ++++++++++++++++++++
 3 files changed, 286 insertions(+)
 create mode 100644 docs/rules/enforce-style-attribute.md
 create mode 100644 lib/rules/enforce-style-attribute.js
 create mode 100644 tests/lib/rules/enforce-style-attribute.js

diff --git a/docs/rules/enforce-style-attribute.md b/docs/rules/enforce-style-attribute.md
new file mode 100644
index 000000000..f6bb19c17
--- /dev/null
+++ b/docs/rules/enforce-style-attribute.md
@@ -0,0 +1,83 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/enforce-style-attribute
+description: enforce either the `scoped` or `module`  attribute in SFC top level style tags
+---
+
+# vue/enforce-style-attribute
+
+> enfore either the `scoped` or `module` attribute in SFC top level style tags
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+
+## :wrench: Options
+
+```json
+{
+  "vue/attribute-hyphenation": ["error", "either" | "scoped" |  "module"]
+}
+```
+
+## :book: Rule Details
+
+This rule warns you about top level style tags that are missing either the `scoped` or `module` attribute.
+
+- `"either"` (default) ... Warn if a style tag doesn't have neither `scoped` nor `module` attributes.
+- `"scoped"` ... Warn if a style tag doesn't have the `scoped` attribute.
+- `"module"` ... Warn if a style tag doesn't have the `module` attribute.
+
+### `"either"`
+
+<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', 'either']}">
+
+```vue
+<!-- ✓ GOOD -->
+<style scoped></style>
+<style lang="scss" src="../path/to/style.scss" scoped></style>
+
+<!-- ✓ GOOD -->
+<style module></style>
+
+<!-- ✗ BAD -->
+<style></style>
+```
+
+</eslint-code-block>
+
+### `"scoped"`
+
+<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', 'scoped']}">
+
+```vue
+<!-- ✓ GOOD -->
+<style scoped></style>
+<style lang="scss" src="../path/to/style.scss" scoped></style>
+
+<!-- ✗ BAD -->
+<style></style>
+<style module></style>
+```
+
+</eslint-code-block>
+
+### `"module"`
+
+<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', 'module']}">
+
+```vue
+<!-- ✓ GOOD -->
+<style module></style>
+
+<!-- ✗ BAD -->
+<style></style>
+<style scoped></style>
+<style lang="scss" src="../path/to/style.scss" scoped></style>
+```
+
+</eslint-code-block>
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/enforce-style-attribute.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/enforce-style-attribute.js)
diff --git a/lib/rules/enforce-style-attribute.js b/lib/rules/enforce-style-attribute.js
new file mode 100644
index 000000000..b56cb6497
--- /dev/null
+++ b/lib/rules/enforce-style-attribute.js
@@ -0,0 +1,102 @@
+/**
+ * @author Mussin Benarbia
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const { isVElement } = require('../utils')
+
+/**
+ * check whether a tag has the `scoped` attribute
+ * @param {VElement} componentBlock
+ */
+function isScoped(componentBlock) {
+  return componentBlock.startTag.attributes.some(
+    (attribute) => !attribute.directive && attribute.key.name === 'scoped'
+  )
+}
+
+/**
+ * check whether a tag has the `module` attribute
+ * @param {VElement} componentBlock
+ */
+function isModule(componentBlock) {
+  return componentBlock.startTag.attributes.some(
+    (attribute) => !attribute.directive && attribute.key.name === 'module'
+  )
+}
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'enforce either the `scoped` or `module`  attribute in SFC top level style tags',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/enforce-style-attribute.html'
+    },
+    fixable: 'code',
+    schema: [{ enum: ['scoped', 'module', 'either'] }],
+    messages: {
+      needsScoped: 'The <style> tag should have the scoped attribute.',
+      needsModule: 'The <style> tag should have the module attribute.',
+      needsEither:
+        'The <style> tag should have either the scoped or module attribute.'
+    }
+  },
+
+  /** @param {RuleContext} context */
+  create(context) {
+    if (!context.parserServices.getDocumentFragment) {
+      return {}
+    }
+    const documentFragment = context.parserServices.getDocumentFragment()
+    if (!documentFragment) {
+      return {}
+    }
+
+    const topLevelElements = documentFragment.children.filter(isVElement)
+    const topLevelStyleTags = topLevelElements.filter(
+      (element) => element.rawName === 'style'
+    )
+
+    if (topLevelStyleTags.length === 0) {
+      return {}
+    }
+
+    const mode = context.options[0] || 'either'
+    const needsScoped = mode === 'scoped'
+    const needsModule = mode === 'module'
+    const needsEither = mode === 'either'
+
+    return {
+      Program() {
+        for (const styleTag of topLevelStyleTags) {
+          if (needsScoped && !isScoped(styleTag)) {
+            context.report({
+              node: styleTag,
+              messageId: 'needsScoped'
+            })
+            return
+          }
+
+          if (needsModule && !isModule(styleTag)) {
+            context.report({
+              node: styleTag,
+              messageId: 'needsModule'
+            })
+            return
+          }
+
+          if (needsEither && !isScoped(styleTag) && !isModule(styleTag)) {
+            context.report({
+              node: styleTag,
+              messageId: 'needsEither'
+            })
+            return
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/tests/lib/rules/enforce-style-attribute.js b/tests/lib/rules/enforce-style-attribute.js
new file mode 100644
index 000000000..c0854e89f
--- /dev/null
+++ b/tests/lib/rules/enforce-style-attribute.js
@@ -0,0 +1,101 @@
+/**
+ * @author Mussin Benarbia
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/enforce-style-attribute')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('enforce-style-attribute', rule, {
+  valid: [
+    // With default options
+    {
+      filename: 'test.vue',
+      code: '<template></template><script></script><style scoped></style>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template></template><script></script><style module></style>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template></template><script></script><style lang=scss" "src="../path/to/style.scss" scoped></style>'
+    },
+    // With scoped option
+    {
+      filename: 'test.vue',
+      code: '<template></template><script></script><style scoped></style>',
+      options: ['scoped']
+    },
+    {
+      filename: 'test.vue',
+      code: '<template></template><script></script><style lang=scss" "src="../path/to/style.scss" scoped></style>',
+      options: ['scoped']
+    },
+    // With module option
+    {
+      filename: 'test.vue',
+      code: '<template></template><script></script><style module></style>',
+      options: ['module']
+    }
+  ],
+  invalid: [
+    // With default options
+    {
+      code: `<template></template><script></script><style></style>`,
+      errors: [
+        {
+          message:
+            'The <style> tag should have either the scoped or module attribute.'
+        }
+      ]
+    },
+    // With scoped option
+    {
+      code: `<template></template><script></script><style></style>`,
+      errors: [
+        {
+          message: 'The <style> tag should have the scoped attribute.'
+        }
+      ],
+      options: ['scoped']
+    },
+    {
+      code: `<template></template><script></script><style module></style>`,
+      errors: [
+        {
+          message: 'The <style> tag should have the scoped attribute.'
+        }
+      ],
+      options: ['scoped']
+    },
+    // With module option
+    {
+      code: `<template></template><script></script><style></style>`,
+      errors: [
+        {
+          message: 'The <style> tag should have the module attribute.'
+        }
+      ],
+      options: ['module']
+    },
+    {
+      code: `<template></template><script></script><style scoped></style>`,
+      errors: [
+        {
+          message: 'The <style> tag should have the module attribute.'
+        }
+      ],
+      options: ['module']
+    }
+  ]
+})

From 06ba377540cce324e6535560ef7da6458c38e5f6 Mon Sep 17 00:00:00 2001
From: Mussin Benarbia <mussin.benarbia@gmail.com>
Date: Fri, 24 Nov 2023 17:42:51 +0900
Subject: [PATCH 02/11] refactor: allow multiple attributes

---
 lib/rules/enforce-style-attribute.js       | 81 +++++++++++++++----
 tests/lib/rules/enforce-style-attribute.js | 90 +++++++++++++++++-----
 2 files changed, 135 insertions(+), 36 deletions(-)

diff --git a/lib/rules/enforce-style-attribute.js b/lib/rules/enforce-style-attribute.js
index b56cb6497..adcf27f6b 100644
--- a/lib/rules/enforce-style-attribute.js
+++ b/lib/rules/enforce-style-attribute.js
@@ -26,22 +26,57 @@ function isModule(componentBlock) {
   )
 }
 
+/**
+ * check if a tag doesn't have either the `scoped` nor `module` attribute
+ * @param {VElement} componentBlock
+ */
+function hasNoAttributes(componentBlock) {
+  return !isScoped(componentBlock) && !isModule(componentBlock)
+}
+
+function getUserDefinedAllowedAttrs(context) {
+  if (context.options[0] && context.options[0].allows) {
+    return context.options[0].allows
+  }
+  return []
+}
+
+const defaultAllowedAttrs = ['scoped']
+
 module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
       description:
-        'enforce either the `scoped` or `module`  attribute in SFC top level style tags',
+        'enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags',
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/enforce-style-attribute.html'
     },
     fixable: 'code',
-    schema: [{ enum: ['scoped', 'module', 'either'] }],
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          allows: {
+            type: 'array',
+            minItems: 1,
+            uniqueItems: true,
+            items: {
+              type: 'string',
+              enum: ['no-attributes', 'scoped', 'module']
+            }
+          }
+        },
+        additionalProperties: false
+      }
+    ],
     messages: {
-      needsScoped: 'The <style> tag should have the scoped attribute.',
-      needsModule: 'The <style> tag should have the module attribute.',
-      needsEither:
-        'The <style> tag should have either the scoped or module attribute.'
+      notAllowedScoped:
+        'The scoped attribute is not allowed. Allowed: {{ allowedAttrsString }}',
+      notAllowedModule:
+        'The module attribute is not allowed. Allowed: {{ allowedAttrsString }}',
+      notAllowedNoAttributes:
+        '<style> tags without attributes are not allowed. Allowed: {{ allowedAttrsString }}'
     }
   },
 
@@ -64,34 +99,48 @@ module.exports = {
       return {}
     }
 
-    const mode = context.options[0] || 'either'
-    const needsScoped = mode === 'scoped'
-    const needsModule = mode === 'module'
-    const needsEither = mode === 'either'
+    const userDefinedAllowedAttrs = getUserDefinedAllowedAttrs(context)
+    const allowedAttrs = userDefinedAllowedAttrs.length
+      ? userDefinedAllowedAttrs
+      : defaultAllowedAttrs
+
+    const allowsNoAttributes = allowedAttrs.includes('no-attributes')
+    const allowsScoped = allowedAttrs.includes('scoped')
+    const allowsModule = allowedAttrs.includes('module')
+    const allowedAttrsString = [...allowedAttrs].sort().join(', ')
 
     return {
       Program() {
         for (const styleTag of topLevelStyleTags) {
-          if (needsScoped && !isScoped(styleTag)) {
+          if (!allowsNoAttributes && hasNoAttributes(styleTag)) {
             context.report({
               node: styleTag,
-              messageId: 'needsScoped'
+              messageId: 'notAllowedNoAttributes',
+              data: {
+                allowedAttrsString
+              }
             })
             return
           }
 
-          if (needsModule && !isModule(styleTag)) {
+          if (!allowsScoped && isScoped(styleTag)) {
             context.report({
               node: styleTag,
-              messageId: 'needsModule'
+              messageId: 'notAllowedScoped',
+              data: {
+                allowedAttrsString
+              }
             })
             return
           }
 
-          if (needsEither && !isScoped(styleTag) && !isModule(styleTag)) {
+          if (!allowsModule && isModule(styleTag)) {
             context.report({
               node: styleTag,
-              messageId: 'needsEither'
+              messageId: 'notAllowedModule',
+              data: {
+                allowedAttrsString
+              }
             })
             return
           }
diff --git a/tests/lib/rules/enforce-style-attribute.js b/tests/lib/rules/enforce-style-attribute.js
index c0854e89f..2ae43b00b 100644
--- a/tests/lib/rules/enforce-style-attribute.js
+++ b/tests/lib/rules/enforce-style-attribute.js
@@ -17,45 +17,62 @@ const tester = new RuleTester({
 
 tester.run('enforce-style-attribute', rule, {
   valid: [
-    // With default options
+    // Default (scoped)
     {
       filename: 'test.vue',
       code: '<template></template><script></script><style scoped></style>'
     },
+    // With scoped option
     {
       filename: 'test.vue',
-      code: '<template></template><script></script><style module></style>'
+      code: '<template></template><script></script><style scoped></style>',
+      options: [{ allows: ['scoped'] }]
     },
+    // With module option
     {
       filename: 'test.vue',
-      code: '<template></template><script></script><style lang=scss" "src="../path/to/style.scss" scoped></style>'
+      code: '<template></template><script></script><style module></style>',
+      options: [{ allows: ['module'] }]
     },
-    // With scoped option
+    // With plain option
     {
       filename: 'test.vue',
-      code: '<template></template><script></script><style scoped></style>',
-      options: ['scoped']
+      code: '<template></template><script></script><style></style>',
+      options: [{ allows: ['no-attributes'] }]
     },
+    // With all options
     {
       filename: 'test.vue',
-      code: '<template></template><script></script><style lang=scss" "src="../path/to/style.scss" scoped></style>',
-      options: ['scoped']
+      code: '<template></template><script></script><style scoped></style>',
+      options: [{ allows: ['scoped', 'module', 'no-attributes'] }]
     },
-    // With module option
     {
       filename: 'test.vue',
       code: '<template></template><script></script><style module></style>',
-      options: ['module']
+      options: [{ allows: ['scoped', 'module', 'no-attributes'] }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template></template><script></script><style></style>',
+      options: [{ allows: ['scoped', 'module', 'no-attributes'] }]
     }
   ],
   invalid: [
-    // With default options
+    // With default (scoped)
     {
       code: `<template></template><script></script><style></style>`,
       errors: [
         {
           message:
-            'The <style> tag should have either the scoped or module attribute.'
+            '<style> tags without attributes are not allowed. Allowed: scoped'
+        }
+      ]
+    },
+    {
+      code: `<template></template><script></script><style module></style>`,
+      errors: [
+        {
+          message: 'The module attribute is not allowed. Allowed: scoped'
         }
       ]
     },
@@ -64,38 +81,71 @@ tester.run('enforce-style-attribute', rule, {
       code: `<template></template><script></script><style></style>`,
       errors: [
         {
-          message: 'The <style> tag should have the scoped attribute.'
+          message:
+            '<style> tags without attributes are not allowed. Allowed: scoped'
         }
       ],
-      options: ['scoped']
+      options: [{ allows: ['scoped'] }]
     },
     {
       code: `<template></template><script></script><style module></style>`,
       errors: [
         {
-          message: 'The <style> tag should have the scoped attribute.'
+          message: 'The module attribute is not allowed. Allowed: scoped'
         }
       ],
-      options: ['scoped']
+      options: [{ allows: ['scoped'] }]
     },
     // With module option
     {
       code: `<template></template><script></script><style></style>`,
       errors: [
         {
-          message: 'The <style> tag should have the module attribute.'
+          message:
+            '<style> tags without attributes are not allowed. Allowed: module'
+        }
+      ],
+      options: [{ allows: ['module'] }]
+    },
+    {
+      code: `<template></template><script></script><style scoped></style>`,
+      errors: [
+        {
+          message: 'The scoped attribute is not allowed. Allowed: module'
+        }
+      ],
+      options: [{ allows: ['module'] }]
+    },
+    // With different combinations of two options
+    {
+      code: `<template></template><script></script><style></style>`,
+      errors: [
+        {
+          message:
+            '<style> tags without attributes are not allowed. Allowed: module, scoped'
         }
       ],
-      options: ['module']
+      options: [{ allows: ['module', 'scoped'] }]
+    },
+    {
+      code: `<template></template><script></script><style module></style>`,
+      errors: [
+        {
+          message:
+            'The module attribute is not allowed. Allowed: no-attributes, scoped'
+        }
+      ],
+      options: [{ allows: ['scoped', 'no-attributes'] }]
     },
     {
       code: `<template></template><script></script><style scoped></style>`,
       errors: [
         {
-          message: 'The <style> tag should have the module attribute.'
+          message:
+            'The scoped attribute is not allowed. Allowed: module, no-attributes'
         }
       ],
-      options: ['module']
+      options: [{ allows: ['module', 'no-attributes'] }]
     }
   ]
 })

From 79fface4c2039c6690e1dd4de8e6466ead719be4 Mon Sep 17 00:00:00 2001
From: Mussin Benarbia <mussin.benarbia@gmail.com>
Date: Fri, 24 Nov 2023 21:34:21 +0900
Subject: [PATCH 03/11] style: apply formatter

---
 docs/rules/enforce-style-attribute.md      |  2 +-
 lib/rules/enforce-style-attribute.js       | 13 +++---
 tests/integrations/eslint-plugin-import.js | 10 +++--
 tests/lib/rules/enforce-style-attribute.js | 46 +++++++++++-----------
 4 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/docs/rules/enforce-style-attribute.md b/docs/rules/enforce-style-attribute.md
index f6bb19c17..8e670b28b 100644
--- a/docs/rules/enforce-style-attribute.md
+++ b/docs/rules/enforce-style-attribute.md
@@ -9,7 +9,7 @@ description: enforce either the `scoped` or `module`  attribute in SFC top level
 
 > enfore either the `scoped` or `module` attribute in SFC top level style tags
 
-- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
 
 ## :wrench: Options
 
diff --git a/lib/rules/enforce-style-attribute.js b/lib/rules/enforce-style-attribute.js
index adcf27f6b..2ee4260d4 100644
--- a/lib/rules/enforce-style-attribute.js
+++ b/lib/rules/enforce-style-attribute.js
@@ -72,11 +72,11 @@ module.exports = {
     ],
     messages: {
       notAllowedScoped:
-        'The scoped attribute is not allowed. Allowed: {{ allowedAttrsString }}',
+        'The scoped attribute is not allowed. Allowed: {{ allowedAttrsString }}.',
       notAllowedModule:
-        'The module attribute is not allowed. Allowed: {{ allowedAttrsString }}',
+        'The module attribute is not allowed. Allowed: {{ allowedAttrsString }}.',
       notAllowedNoAttributes:
-        '<style> tags without attributes are not allowed. Allowed: {{ allowedAttrsString }}'
+        'A <style> tag without attributes is not allowed. Allowed: {{ allowedAttrsString }}.'
     }
   },
 
@@ -100,9 +100,10 @@ module.exports = {
     }
 
     const userDefinedAllowedAttrs = getUserDefinedAllowedAttrs(context)
-    const allowedAttrs = userDefinedAllowedAttrs.length
-      ? userDefinedAllowedAttrs
-      : defaultAllowedAttrs
+    const allowedAttrs =
+      userDefinedAllowedAttrs.length > 0
+        ? userDefinedAllowedAttrs
+        : defaultAllowedAttrs
 
     const allowsNoAttributes = allowedAttrs.includes('no-attributes')
     const allowsScoped = allowedAttrs.includes('scoped')
diff --git a/tests/integrations/eslint-plugin-import.js b/tests/integrations/eslint-plugin-import.js
index a408fdcdd..4e26508ce 100644
--- a/tests/integrations/eslint-plugin-import.js
+++ b/tests/integrations/eslint-plugin-import.js
@@ -30,10 +30,12 @@ describe('Integration with eslint-plugin-import', () => {
     if (
       !semver.satisfies(
         process.version,
-        require(path.join(
-          __dirname,
-          'eslint-plugin-import/node_modules/eslint/package.json'
-        )).engines.node
+        require(
+          path.join(
+            __dirname,
+            'eslint-plugin-import/node_modules/eslint/package.json'
+          )
+        ).engines.node
       )
     ) {
       return
diff --git a/tests/lib/rules/enforce-style-attribute.js b/tests/lib/rules/enforce-style-attribute.js
index 2ae43b00b..99b97b0a0 100644
--- a/tests/lib/rules/enforce-style-attribute.js
+++ b/tests/lib/rules/enforce-style-attribute.js
@@ -64,7 +64,7 @@ tester.run('enforce-style-attribute', rule, {
       errors: [
         {
           message:
-            '<style> tags without attributes are not allowed. Allowed: scoped'
+            'A <style> tag without attributes is not allowed. Allowed: scoped.'
         }
       ]
     },
@@ -72,80 +72,80 @@ tester.run('enforce-style-attribute', rule, {
       code: `<template></template><script></script><style module></style>`,
       errors: [
         {
-          message: 'The module attribute is not allowed. Allowed: scoped'
+          message: 'The module attribute is not allowed. Allowed: scoped.'
         }
       ]
     },
     // With scoped option
     {
       code: `<template></template><script></script><style></style>`,
+      options: [{ allows: ['scoped'] }],
       errors: [
         {
           message:
-            '<style> tags without attributes are not allowed. Allowed: scoped'
+            'A <style> tag without attributes is not allowed. Allowed: scoped.'
         }
-      ],
-      options: [{ allows: ['scoped'] }]
+      ]
     },
     {
       code: `<template></template><script></script><style module></style>`,
+      options: [{ allows: ['scoped'] }],
       errors: [
         {
-          message: 'The module attribute is not allowed. Allowed: scoped'
+          message: 'The module attribute is not allowed. Allowed: scoped.'
         }
-      ],
-      options: [{ allows: ['scoped'] }]
+      ]
     },
     // With module option
     {
       code: `<template></template><script></script><style></style>`,
+      options: [{ allows: ['module'] }],
       errors: [
         {
           message:
-            '<style> tags without attributes are not allowed. Allowed: module'
+            'A <style> tag without attributes is not allowed. Allowed: module.'
         }
-      ],
-      options: [{ allows: ['module'] }]
+      ]
     },
     {
       code: `<template></template><script></script><style scoped></style>`,
+      options: [{ allows: ['module'] }],
       errors: [
         {
-          message: 'The scoped attribute is not allowed. Allowed: module'
+          message: 'The scoped attribute is not allowed. Allowed: module.'
         }
-      ],
-      options: [{ allows: ['module'] }]
+      ]
     },
     // With different combinations of two options
     {
       code: `<template></template><script></script><style></style>`,
+      options: [{ allows: ['module', 'scoped'] }],
       errors: [
         {
           message:
-            '<style> tags without attributes are not allowed. Allowed: module, scoped'
+            'A <style> tag without attributes is not allowed. Allowed: module, scoped.'
         }
-      ],
-      options: [{ allows: ['module', 'scoped'] }]
+      ]
     },
     {
       code: `<template></template><script></script><style module></style>`,
+      options: [{ allows: ['scoped', 'no-attributes'] }],
       errors: [
         {
           message:
-            'The module attribute is not allowed. Allowed: no-attributes, scoped'
+            'The module attribute is not allowed. Allowed: no-attributes, scoped.'
         }
-      ],
-      options: [{ allows: ['scoped', 'no-attributes'] }]
+      ]
     },
     {
       code: `<template></template><script></script><style scoped></style>`,
+      options: [{ allows: ['module', 'no-attributes'] }],
       errors: [
         {
           message:
-            'The scoped attribute is not allowed. Allowed: module, no-attributes'
+            'The scoped attribute is not allowed. Allowed: module, no-attributes.'
         }
-      ],
-      options: [{ allows: ['module', 'no-attributes'] }]
+      ]
     }
   ]
 })

From 43a086413df311c44269e770b456ad0f1659b897 Mon Sep 17 00:00:00 2001
From: Mussin Benarbia <mussin.benarbia@gmail.com>
Date: Sun, 3 Dec 2023 18:43:02 +0900
Subject: [PATCH 04/11] docs: update documentation to reflect new
 implementation

---
 docs/rules/enforce-style-attribute.md | 43 ++++++++++++++-------------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/docs/rules/enforce-style-attribute.md b/docs/rules/enforce-style-attribute.md
index 8e670b28b..5cc602fac 100644
--- a/docs/rules/enforce-style-attribute.md
+++ b/docs/rules/enforce-style-attribute.md
@@ -2,12 +2,12 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/enforce-style-attribute
-description: enforce either the `scoped` or `module`  attribute in SFC top level style tags
+description: enforce or forbid the use of the `scoped` and `module` attributes on top level style tags
 ---
 
 # vue/enforce-style-attribute
 
-> enfore either the `scoped` or `module` attribute in SFC top level style tags
+> enforce or forbid the use of the `scoped` and `module` attributes on top level style tags
 
 - :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
 
@@ -15,28 +15,29 @@ description: enforce either the `scoped` or `module`  attribute in SFC top level
 
 ```json
 {
-  "vue/attribute-hyphenation": ["error", "either" | "scoped" |  "module"]
+  "vue/enforce-style-attribute": [
+    "error",
+    { "allows": ["scoped", "module", "no-attributes"] }
+  ]
 }
 ```
 
-## :book: Rule Details
+- `"allows"` (["scoped" | "module" | "no-attributes"]) Array of attributes to allow on a top level style tag. Default: `["scoped"]`
 
-This rule warns you about top level style tags that are missing either the `scoped` or `module` attribute.
+## :book: Rule Details
 
-- `"either"` (default) ... Warn if a style tag doesn't have neither `scoped` nor `module` attributes.
-- `"scoped"` ... Warn if a style tag doesn't have the `scoped` attribute.
-- `"module"` ... Warn if a style tag doesn't have the `module` attribute.
+This rule allows you to selectively allow attributes on your top level style tags and warns when using an attribute that is not allowed.
 
-### `"either"`
+### `"scoped"`
 
-<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', 'either']}">
+<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', { allows: ["scoped"] }]}">
 
 ```vue
 <!-- ✓ GOOD -->
 <style scoped></style>
 <style lang="scss" src="../path/to/style.scss" scoped></style>
 
-<!-- ✓ GOOD -->
+<!-- ✗ BAD -->
 <style module></style>
 
 <!-- ✗ BAD -->
@@ -45,34 +46,36 @@ This rule warns you about top level style tags that are missing either the `scop
 
 </eslint-code-block>
 
-### `"scoped"`
+### `"module"`
 
-<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', 'scoped']}">
+<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', { allows: "module" }]}">
 
 ```vue
 <!-- ✓ GOOD -->
+<style module></style>
+
+<!-- ✗ BAD -->
 <style scoped></style>
-<style lang="scss" src="../path/to/style.scss" scoped></style>
 
 <!-- ✗ BAD -->
 <style></style>
-<style module></style>
 ```
 
 </eslint-code-block>
 
-### `"module"`
+### `"no-attributes"`
 
-<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', 'module']}">
+<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', { allows: ["no-attributes"]}]}">
 
 ```vue
 <!-- ✓ GOOD -->
-<style module></style>
+<style></style>
 
 <!-- ✗ BAD -->
-<style></style>
 <style scoped></style>
-<style lang="scss" src="../path/to/style.scss" scoped></style>
+
+<!-- ✗ BAD -->
+<style module></style>
 ```
 
 </eslint-code-block>

From 62b053f9e8aa3a8489cd64e6fde1f60928b3b6dc Mon Sep 17 00:00:00 2001
From: Mussin Benarbia <mussin.benarbia@gmail.com>
Date: Sun, 3 Dec 2023 19:02:23 +0900
Subject: [PATCH 05/11] refactor: use sourceCode parser services instead of
 context

---
 lib/rules/enforce-style-attribute.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/rules/enforce-style-attribute.js b/lib/rules/enforce-style-attribute.js
index 2ee4260d4..d8fcd71ab 100644
--- a/lib/rules/enforce-style-attribute.js
+++ b/lib/rules/enforce-style-attribute.js
@@ -82,10 +82,11 @@ module.exports = {
 
   /** @param {RuleContext} context */
   create(context) {
-    if (!context.parserServices.getDocumentFragment) {
+    const sourceCode = context.getSourceCode()
+    if (!sourceCode.parserServices.getDocumentFragment) {
       return {}
     }
-    const documentFragment = context.parserServices.getDocumentFragment()
+    const documentFragment = sourceCode.parserServices.getDocumentFragment()
     if (!documentFragment) {
       return {}
     }

From f1b495a9cb78e95df2db965090ae721a7fbeab70 Mon Sep 17 00:00:00 2001
From: Mussin Benarbia <mussin.benarbia@gmail.com>
Date: Sun, 3 Dec 2023 21:29:16 +0900
Subject: [PATCH 06/11] docs: move options section under rule details

---
 docs/rules/enforce-style-attribute.md | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/docs/rules/enforce-style-attribute.md b/docs/rules/enforce-style-attribute.md
index 5cc602fac..078bc519b 100644
--- a/docs/rules/enforce-style-attribute.md
+++ b/docs/rules/enforce-style-attribute.md
@@ -11,19 +11,6 @@ description: enforce or forbid the use of the `scoped` and `module` attributes o
 
 - :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
 
-## :wrench: Options
-
-```json
-{
-  "vue/enforce-style-attribute": [
-    "error",
-    { "allows": ["scoped", "module", "no-attributes"] }
-  ]
-}
-```
-
-- `"allows"` (["scoped" | "module" | "no-attributes"]) Array of attributes to allow on a top level style tag. Default: `["scoped"]`
-
 ## :book: Rule Details
 
 This rule allows you to selectively allow attributes on your top level style tags and warns when using an attribute that is not allowed.
@@ -80,6 +67,19 @@ This rule allows you to selectively allow attributes on your top level style tag
 
 </eslint-code-block>
 
+## :wrench: Options
+
+```json
+{
+  "vue/enforce-style-attribute": [
+    "error",
+    { "allows": ["scoped", "module", "no-attributes"] }
+  ]
+}
+```
+
+- `"allows"` (["scoped" | "module" | "no-attributes"]) Array of attributes to allow on a top level style tag. Default: `["scoped"]`
+
 ## :mag: Implementation
 
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/enforce-style-attribute.js)

From 0467dcc4ad247161259055befb5f825e8f3af2c0 Mon Sep 17 00:00:00 2001
From: Mussin Benarbia <mussin.benarbia@gmail.com>
Date: Mon, 4 Dec 2023 23:40:03 +0900
Subject: [PATCH 07/11] docs: run docs build

---
 docs/rules/enforce-style-attribute.md | 14 +++++++-------
 docs/rules/index.md                   |  1 +
 lib/index.js                          |  1 +
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/docs/rules/enforce-style-attribute.md b/docs/rules/enforce-style-attribute.md
index 078bc519b..4bcaf5937 100644
--- a/docs/rules/enforce-style-attribute.md
+++ b/docs/rules/enforce-style-attribute.md
@@ -2,14 +2,14 @@
 pageClass: rule-details
 sidebarDepth: 0
 title: vue/enforce-style-attribute
-description: enforce or forbid the use of the `scoped` and `module` attributes on top level style tags
+description: enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags
 ---
-
 # vue/enforce-style-attribute
 
-> enforce or forbid the use of the `scoped` and `module` attributes on top level style tags
+> enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags
 
 - :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -17,7 +17,7 @@ This rule allows you to selectively allow attributes on your top level style tag
 
 ### `"scoped"`
 
-<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', { allows: ["scoped"] }]}">
+<eslint-code-block fix :rules="{'vue/enforce-style-attribute': ['error', { allows: ['scoped'] }]}">
 
 ```vue
 <!-- ✓ GOOD -->
@@ -35,7 +35,7 @@ This rule allows you to selectively allow attributes on your top level style tag
 
 ### `"module"`
 
-<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', { allows: "module" }]}">
+<eslint-code-block fix :rules="{'vue/enforce-style-attribute': ['error', { allows: ['module'] }]}">
 
 ```vue
 <!-- ✓ GOOD -->
@@ -52,7 +52,7 @@ This rule allows you to selectively allow attributes on your top level style tag
 
 ### `"no-attributes"`
 
-<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', { allows: ["no-attributes"]}]}">
+<eslint-code-block fix :rules="{'vue/enforce-style-attribute': ['error', { allows: ['no-attributes']}]}">
 
 ```vue
 <!-- ✓ GOOD -->
@@ -78,7 +78,7 @@ This rule allows you to selectively allow attributes on your top level style tag
 }
 ```
 
-- `"allows"` (["scoped" | "module" | "no-attributes"]) Array of attributes to allow on a top level style tag. Default: `["scoped"]`
+- `"allows"` (`["scoped" | "module" | "no-attributes"]`) Array of attributes to allow on a top level style tag. Default: `["scoped"]`
 
 ## :mag: Implementation
 
diff --git a/docs/rules/index.md b/docs/rules/index.md
index 71a05d42e..d6ebdb60c 100644
--- a/docs/rules/index.md
+++ b/docs/rules/index.md
@@ -215,6 +215,7 @@ For example:
 | [vue/define-emits-declaration](./define-emits-declaration.md) | enforce declaration style of `defineEmits` |  | :hammer: |
 | [vue/define-macros-order](./define-macros-order.md) | enforce order of `defineEmits` and `defineProps` compiler macros | :wrench: | :lipstick: |
 | [vue/define-props-declaration](./define-props-declaration.md) | enforce declaration style of `defineProps` |  | :hammer: |
+| [vue/enforce-style-attribute](./enforce-style-attribute.md) | enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags | :wrench: | :hammer: |
 | [vue/html-button-has-type](./html-button-has-type.md) | disallow usage of button without an explicit type attribute |  | :hammer: |
 | [vue/html-comment-content-newline](./html-comment-content-newline.md) | enforce unified line brake in HTML comments | :wrench: | :lipstick: |
 | [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: | :lipstick: |
diff --git a/lib/index.js b/lib/index.js
index 3497a7b4f..3eb5208ce 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -35,6 +35,7 @@ module.exports = {
     'define-props-declaration': require('./rules/define-props-declaration'),
     'dot-location': require('./rules/dot-location'),
     'dot-notation': require('./rules/dot-notation'),
+    'enforce-style-attribute': require('./rules/enforce-style-attribute'),
     eqeqeq: require('./rules/eqeqeq'),
     'first-attribute-linebreak': require('./rules/first-attribute-linebreak'),
     'func-call-spacing': require('./rules/func-call-spacing'),

From 9e5fd3aa9f3f5ba6b3bff95a55266acb46ff6f29 Mon Sep 17 00:00:00 2001
From: Mussin Benarbia <mussin.benarbia@gmail.com>
Date: Tue, 5 Dec 2023 00:25:49 +0900
Subject: [PATCH 08/11] refactor: set fixable as null and regen docs

---
 docs/rules/enforce-style-attribute.md | 7 +++----
 docs/rules/index.md                   | 2 +-
 lib/rules/enforce-style-attribute.js  | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/docs/rules/enforce-style-attribute.md b/docs/rules/enforce-style-attribute.md
index 4bcaf5937..2fa64beab 100644
--- a/docs/rules/enforce-style-attribute.md
+++ b/docs/rules/enforce-style-attribute.md
@@ -9,7 +9,6 @@ description: enforce or forbid the use of the `scoped` and `module` attributes i
 > enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags
 
 - :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
@@ -17,7 +16,7 @@ This rule allows you to selectively allow attributes on your top level style tag
 
 ### `"scoped"`
 
-<eslint-code-block fix :rules="{'vue/enforce-style-attribute': ['error', { allows: ['scoped'] }]}">
+<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', { allows: ['scoped'] }]}">
 
 ```vue
 <!-- ✓ GOOD -->
@@ -35,7 +34,7 @@ This rule allows you to selectively allow attributes on your top level style tag
 
 ### `"module"`
 
-<eslint-code-block fix :rules="{'vue/enforce-style-attribute': ['error', { allows: ['module'] }]}">
+<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', { allows: ['module'] }]}">
 
 ```vue
 <!-- ✓ GOOD -->
@@ -52,7 +51,7 @@ This rule allows you to selectively allow attributes on your top level style tag
 
 ### `"no-attributes"`
 
-<eslint-code-block fix :rules="{'vue/enforce-style-attribute': ['error', { allows: ['no-attributes']}]}">
+<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', { allows: ['no-attributes']}]}">
 
 ```vue
 <!-- ✓ GOOD -->
diff --git a/docs/rules/index.md b/docs/rules/index.md
index d6ebdb60c..912d5ae46 100644
--- a/docs/rules/index.md
+++ b/docs/rules/index.md
@@ -215,7 +215,7 @@ For example:
 | [vue/define-emits-declaration](./define-emits-declaration.md) | enforce declaration style of `defineEmits` |  | :hammer: |
 | [vue/define-macros-order](./define-macros-order.md) | enforce order of `defineEmits` and `defineProps` compiler macros | :wrench: | :lipstick: |
 | [vue/define-props-declaration](./define-props-declaration.md) | enforce declaration style of `defineProps` |  | :hammer: |
-| [vue/enforce-style-attribute](./enforce-style-attribute.md) | enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags | :wrench: | :hammer: |
+| [vue/enforce-style-attribute](./enforce-style-attribute.md) | enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags |  | :hammer: |
 | [vue/html-button-has-type](./html-button-has-type.md) | disallow usage of button without an explicit type attribute |  | :hammer: |
 | [vue/html-comment-content-newline](./html-comment-content-newline.md) | enforce unified line brake in HTML comments | :wrench: | :lipstick: |
 | [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: | :lipstick: |
diff --git a/lib/rules/enforce-style-attribute.js b/lib/rules/enforce-style-attribute.js
index d8fcd71ab..a801f1b17 100644
--- a/lib/rules/enforce-style-attribute.js
+++ b/lib/rules/enforce-style-attribute.js
@@ -52,7 +52,7 @@ module.exports = {
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/enforce-style-attribute.html'
     },
-    fixable: 'code',
+    fixable: null,
     schema: [
       {
         type: 'object',

From 43e3f637bb00784aceaef36ff15f88779abf9286 Mon Sep 17 00:00:00 2001
From: Mussin Benarbia <mussin.benarbia@gmail.com>
Date: Tue, 5 Dec 2023 00:30:59 +0900
Subject: [PATCH 09/11] refactor: rename allows option into allow

---
 lib/rules/enforce-style-attribute.js       |  6 ++---
 tests/lib/rules/enforce-style-attribute.js | 26 +++++++++++-----------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/lib/rules/enforce-style-attribute.js b/lib/rules/enforce-style-attribute.js
index a801f1b17..29b7ef321 100644
--- a/lib/rules/enforce-style-attribute.js
+++ b/lib/rules/enforce-style-attribute.js
@@ -35,8 +35,8 @@ function hasNoAttributes(componentBlock) {
 }
 
 function getUserDefinedAllowedAttrs(context) {
-  if (context.options[0] && context.options[0].allows) {
-    return context.options[0].allows
+  if (context.options[0] && context.options[0].allow) {
+    return context.options[0].allow
   }
   return []
 }
@@ -57,7 +57,7 @@ module.exports = {
       {
         type: 'object',
         properties: {
-          allows: {
+          allow: {
             type: 'array',
             minItems: 1,
             uniqueItems: true,
diff --git a/tests/lib/rules/enforce-style-attribute.js b/tests/lib/rules/enforce-style-attribute.js
index 99b97b0a0..3270c6655 100644
--- a/tests/lib/rules/enforce-style-attribute.js
+++ b/tests/lib/rules/enforce-style-attribute.js
@@ -26,35 +26,35 @@ tester.run('enforce-style-attribute', rule, {
     {
       filename: 'test.vue',
       code: '<template></template><script></script><style scoped></style>',
-      options: [{ allows: ['scoped'] }]
+      options: [{ allow: ['scoped'] }]
     },
     // With module option
     {
       filename: 'test.vue',
       code: '<template></template><script></script><style module></style>',
-      options: [{ allows: ['module'] }]
+      options: [{ allow: ['module'] }]
     },
     // With plain option
     {
       filename: 'test.vue',
       code: '<template></template><script></script><style></style>',
-      options: [{ allows: ['no-attributes'] }]
+      options: [{ allow: ['no-attributes'] }]
     },
     // With all options
     {
       filename: 'test.vue',
       code: '<template></template><script></script><style scoped></style>',
-      options: [{ allows: ['scoped', 'module', 'no-attributes'] }]
+      options: [{ allow: ['scoped', 'module', 'no-attributes'] }]
     },
     {
       filename: 'test.vue',
       code: '<template></template><script></script><style module></style>',
-      options: [{ allows: ['scoped', 'module', 'no-attributes'] }]
+      options: [{ allow: ['scoped', 'module', 'no-attributes'] }]
     },
     {
       filename: 'test.vue',
       code: '<template></template><script></script><style></style>',
-      options: [{ allows: ['scoped', 'module', 'no-attributes'] }]
+      options: [{ allow: ['scoped', 'module', 'no-attributes'] }]
     }
   ],
   invalid: [
@@ -79,7 +79,7 @@ tester.run('enforce-style-attribute', rule, {
     // With scoped option
     {
       code: `<template></template><script></script><style></style>`,
-      options: [{ allows: ['scoped'] }],
+      options: [{ allow: ['scoped'] }],
       errors: [
         {
           message:
@@ -89,7 +89,7 @@ tester.run('enforce-style-attribute', rule, {
     },
     {
       code: `<template></template><script></script><style module></style>`,
-      options: [{ allows: ['scoped'] }],
+      options: [{ allow: ['scoped'] }],
       errors: [
         {
           message: 'The module attribute is not allowed. Allowed: scoped.'
@@ -99,7 +99,7 @@ tester.run('enforce-style-attribute', rule, {
     // With module option
     {
       code: `<template></template><script></script><style></style>`,
-      options: [{ allows: ['module'] }],
+      options: [{ allow: ['module'] }],
       errors: [
         {
           message:
@@ -109,7 +109,7 @@ tester.run('enforce-style-attribute', rule, {
     },
     {
       code: `<template></template><script></script><style scoped></style>`,
-      options: [{ allows: ['module'] }],
+      options: [{ allow: ['module'] }],
       errors: [
         {
           message: 'The scoped attribute is not allowed. Allowed: module.'
@@ -119,7 +119,7 @@ tester.run('enforce-style-attribute', rule, {
     // With different combinations of two options
     {
       code: `<template></template><script></script><style></style>`,
-      options: [{ allows: ['module', 'scoped'] }],
+      options: [{ allow: ['module', 'scoped'] }],
       errors: [
         {
           message:
@@ -129,7 +129,7 @@ tester.run('enforce-style-attribute', rule, {
     },
     {
       code: `<template></template><script></script><style module></style>`,
-      options: [{ allows: ['scoped', 'no-attributes'] }],
+      options: [{ allow: ['scoped', 'no-attributes'] }],
       errors: [
         {
           message:
@@ -139,7 +139,7 @@ tester.run('enforce-style-attribute', rule, {
     },
     {
       code: `<template></template><script></script><style scoped></style>`,
-      options: [{ allows: ['module', 'no-attributes'] }],
+      options: [{ allow: ['module', 'no-attributes'] }],
       errors: [
         {
           message:

From d33d6718920665a601559fe2ec855b33d0dddace Mon Sep 17 00:00:00 2001
From: Mussin Benarbia <mussin.benarbia@gmail.com>
Date: Tue, 5 Dec 2023 00:34:07 +0900
Subject: [PATCH 10/11] docs: update option name in docs

---
 docs/rules/enforce-style-attribute.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/rules/enforce-style-attribute.md b/docs/rules/enforce-style-attribute.md
index 2fa64beab..6c209e53c 100644
--- a/docs/rules/enforce-style-attribute.md
+++ b/docs/rules/enforce-style-attribute.md
@@ -16,7 +16,7 @@ This rule allows you to selectively allow attributes on your top level style tag
 
 ### `"scoped"`
 
-<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', { allows: ['scoped'] }]}">
+<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', { allow: ['scoped'] }]}">
 
 ```vue
 <!-- ✓ GOOD -->
@@ -34,7 +34,7 @@ This rule allows you to selectively allow attributes on your top level style tag
 
 ### `"module"`
 
-<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', { allows: ['module'] }]}">
+<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', { allow: ['module'] }]}">
 
 ```vue
 <!-- ✓ GOOD -->
@@ -51,7 +51,7 @@ This rule allows you to selectively allow attributes on your top level style tag
 
 ### `"no-attributes"`
 
-<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', { allows: ['no-attributes']}]}">
+<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', { allow: ['no-attributes']}]}">
 
 ```vue
 <!-- ✓ GOOD -->
@@ -72,12 +72,12 @@ This rule allows you to selectively allow attributes on your top level style tag
 {
   "vue/enforce-style-attribute": [
     "error",
-    { "allows": ["scoped", "module", "no-attributes"] }
+    { "allow": ["scoped", "module", "no-attributes"] }
   ]
 }
 ```
 
-- `"allows"` (`["scoped" | "module" | "no-attributes"]`) Array of attributes to allow on a top level style tag. Default: `["scoped"]`
+- `"allow"` (`["scoped" | "module" | "no-attributes"]`) Array of attributes to allow on a top level style tag. Default: `["scoped"]`
 
 ## :mag: Implementation
 

From 7a1ebfb83b0030a2dc2adee29a0dc7bbc47d4552 Mon Sep 17 00:00:00 2001
From: Mussin Benarbia <mussin.benarbia@gmail.com>
Date: Tue, 9 Jan 2024 13:03:22 +0900
Subject: [PATCH 11/11] refactor: rename rule option for better clarity

---
 docs/rules/enforce-style-attribute.md      | 13 ++++++-----
 lib/rules/enforce-style-attribute.js       | 14 +++++------
 tests/lib/rules/enforce-style-attribute.js | 27 ++++++++++------------
 3 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/docs/rules/enforce-style-attribute.md b/docs/rules/enforce-style-attribute.md
index 6c209e53c..6dc042353 100644
--- a/docs/rules/enforce-style-attribute.md
+++ b/docs/rules/enforce-style-attribute.md
@@ -4,15 +4,16 @@ sidebarDepth: 0
 title: vue/enforce-style-attribute
 description: enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags
 ---
+
 # vue/enforce-style-attribute
 
 > enforce or forbid the use of the `scoped` and `module` attributes in SFC top level style tags
 
-- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
 
 ## :book: Rule Details
 
-This rule allows you to selectively allow attributes on your top level style tags and warns when using an attribute that is not allowed.
+This rule allows you to explicitly allow the use of the `scoped` and `module` attributes on your top level style tags.
 
 ### `"scoped"`
 
@@ -49,9 +50,9 @@ This rule allows you to selectively allow attributes on your top level style tag
 
 </eslint-code-block>
 
-### `"no-attributes"`
+### `"plain"`
 
-<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', { allow: ['no-attributes']}]}">
+<eslint-code-block :rules="{'vue/enforce-style-attribute': ['error', { allow: ['plain']}]}">
 
 ```vue
 <!-- ✓ GOOD -->
@@ -72,12 +73,12 @@ This rule allows you to selectively allow attributes on your top level style tag
 {
   "vue/enforce-style-attribute": [
     "error",
-    { "allow": ["scoped", "module", "no-attributes"] }
+    { "allow": ["scoped", "module", "plain"] }
   ]
 }
 ```
 
-- `"allow"` (`["scoped" | "module" | "no-attributes"]`) Array of attributes to allow on a top level style tag. Default: `["scoped"]`
+- `"allow"` (`["scoped" | "module" | "plain"]`) Array of attributes to allow on a top level style tag. The option `plain` is used to allow style tags that have neither the `scoped` nor `module` attributes. Default: `["scoped"]`
 
 ## :mag: Implementation
 
diff --git a/lib/rules/enforce-style-attribute.js b/lib/rules/enforce-style-attribute.js
index 29b7ef321..b4b39a73f 100644
--- a/lib/rules/enforce-style-attribute.js
+++ b/lib/rules/enforce-style-attribute.js
@@ -30,7 +30,7 @@ function isModule(componentBlock) {
  * check if a tag doesn't have either the `scoped` nor `module` attribute
  * @param {VElement} componentBlock
  */
-function hasNoAttributes(componentBlock) {
+function isPlain(componentBlock) {
   return !isScoped(componentBlock) && !isModule(componentBlock)
 }
 
@@ -63,7 +63,7 @@ module.exports = {
             uniqueItems: true,
             items: {
               type: 'string',
-              enum: ['no-attributes', 'scoped', 'module']
+              enum: ['plain', 'scoped', 'module']
             }
           }
         },
@@ -75,8 +75,8 @@ module.exports = {
         'The scoped attribute is not allowed. Allowed: {{ allowedAttrsString }}.',
       notAllowedModule:
         'The module attribute is not allowed. Allowed: {{ allowedAttrsString }}.',
-      notAllowedNoAttributes:
-        'A <style> tag without attributes is not allowed. Allowed: {{ allowedAttrsString }}.'
+      notAllowedPlain:
+        'Plain <style> tags are not allowed. Allowed: {{ allowedAttrsString }}.'
     }
   },
 
@@ -106,7 +106,7 @@ module.exports = {
         ? userDefinedAllowedAttrs
         : defaultAllowedAttrs
 
-    const allowsNoAttributes = allowedAttrs.includes('no-attributes')
+    const allowsPlain = allowedAttrs.includes('plain')
     const allowsScoped = allowedAttrs.includes('scoped')
     const allowsModule = allowedAttrs.includes('module')
     const allowedAttrsString = [...allowedAttrs].sort().join(', ')
@@ -114,10 +114,10 @@ module.exports = {
     return {
       Program() {
         for (const styleTag of topLevelStyleTags) {
-          if (!allowsNoAttributes && hasNoAttributes(styleTag)) {
+          if (!allowsPlain && isPlain(styleTag)) {
             context.report({
               node: styleTag,
-              messageId: 'notAllowedNoAttributes',
+              messageId: 'notAllowedPlain',
               data: {
                 allowedAttrsString
               }
diff --git a/tests/lib/rules/enforce-style-attribute.js b/tests/lib/rules/enforce-style-attribute.js
index 3270c6655..994b785ed 100644
--- a/tests/lib/rules/enforce-style-attribute.js
+++ b/tests/lib/rules/enforce-style-attribute.js
@@ -38,23 +38,23 @@ tester.run('enforce-style-attribute', rule, {
     {
       filename: 'test.vue',
       code: '<template></template><script></script><style></style>',
-      options: [{ allow: ['no-attributes'] }]
+      options: [{ allow: ['plain'] }]
     },
     // With all options
     {
       filename: 'test.vue',
       code: '<template></template><script></script><style scoped></style>',
-      options: [{ allow: ['scoped', 'module', 'no-attributes'] }]
+      options: [{ allow: ['scoped', 'module', 'plain'] }]
     },
     {
       filename: 'test.vue',
       code: '<template></template><script></script><style module></style>',
-      options: [{ allow: ['scoped', 'module', 'no-attributes'] }]
+      options: [{ allow: ['scoped', 'module', 'plain'] }]
     },
     {
       filename: 'test.vue',
       code: '<template></template><script></script><style></style>',
-      options: [{ allow: ['scoped', 'module', 'no-attributes'] }]
+      options: [{ allow: ['scoped', 'module', 'plain'] }]
     }
   ],
   invalid: [
@@ -63,8 +63,7 @@ tester.run('enforce-style-attribute', rule, {
       code: `<template></template><script></script><style></style>`,
       errors: [
         {
-          message:
-            'A <style> tag without attributes is not allowed. Allowed: scoped.'
+          message: 'Plain <style> tags are not allowed. Allowed: scoped.'
         }
       ]
     },
@@ -82,8 +81,7 @@ tester.run('enforce-style-attribute', rule, {
       options: [{ allow: ['scoped'] }],
       errors: [
         {
-          message:
-            'A <style> tag without attributes is not allowed. Allowed: scoped.'
+          message: 'Plain <style> tags are not allowed. Allowed: scoped.'
         }
       ]
     },
@@ -102,8 +100,7 @@ tester.run('enforce-style-attribute', rule, {
       options: [{ allow: ['module'] }],
       errors: [
         {
-          message:
-            'A <style> tag without attributes is not allowed. Allowed: module.'
+          message: 'Plain <style> tags are not allowed. Allowed: module.'
         }
       ]
     },
@@ -123,27 +120,27 @@ tester.run('enforce-style-attribute', rule, {
       errors: [
         {
           message:
-            'A <style> tag without attributes is not allowed. Allowed: module, scoped.'
+            'Plain <style> tags are not allowed. Allowed: module, scoped.'
         }
       ]
     },
     {
       code: `<template></template><script></script><style module></style>`,
-      options: [{ allow: ['scoped', 'no-attributes'] }],
+      options: [{ allow: ['scoped', 'plain'] }],
       errors: [
         {
           message:
-            'The module attribute is not allowed. Allowed: no-attributes, scoped.'
+            'The module attribute is not allowed. Allowed: plain, scoped.'
         }
       ]
     },
     {
       code: `<template></template><script></script><style scoped></style>`,
-      options: [{ allow: ['module', 'no-attributes'] }],
+      options: [{ allow: ['module', 'plain'] }],
       errors: [
         {
           message:
-            'The scoped attribute is not allowed. Allowed: module, no-attributes.'
+            'The scoped attribute is not allowed. Allowed: module, plain.'
         }
       ]
     }