From 815bed4bc58986641393c27ad911a71f6063deb0 Mon Sep 17 00:00:00 2001
From: Daniel Waltz <daniel.waltz@moserit.com>
Date: Mon, 20 Jun 2022 14:05:29 -0400
Subject: [PATCH] feat: support script setup and css var inj for vue 2.7

Closes #1916
---
 docs/rules/no-unsupported-features.md         |  5 +--
 lib/rules/no-unsupported-features.js          | 14 ++++----
 lib/rules/syntaxes/script-setup.js            |  2 +-
 .../syntaxes/style-css-vars-injection.js      |  2 +-
 .../no-unsupported-features/script-setup.js   |  8 ++++-
 .../style-css-vars-injection.js               | 33 +++++++++++++++++--
 6 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/docs/rules/no-unsupported-features.md b/docs/rules/no-unsupported-features.md
index 799b456cb..cc9efab3a 100644
--- a/docs/rules/no-unsupported-features.md
+++ b/docs/rules/no-unsupported-features.md
@@ -36,11 +36,12 @@ The `"ignores"` option accepts an array of the following strings.
   - Vue.js 3.1.0+
     - `"is-attribute-with-vue-prefix"` ... [`is` attribute with `vue:` prefix](https://v3.vuejs.org/api/special-attributes.html#is)
   - Vue.js 3.0.0+
-    - `"style-css-vars-injection"` ... [SFC CSS variable injection][Vue RFCs - 0043-sfc-style-variables]
-    - `"script-setup"` ... [`<script setup>`][Vue RFCs - 0040-script-setup]
     - `"v-model-argument"` ... [argument on `v-model`][Vue RFCs - 0005-replace-v-bind-sync-with-v-model-argument]
     - `"v-model-custom-modifiers"` ... [custom modifiers on `v-model`][Vue RFCs - 0011-v-model-api-change]
     - `"v-is"` ... [v-is](https://v3.vuejs.org/api/directives.html#v-is) directive.
+  - Vue.js 2.7.0+
+    - `"style-css-vars-injection"` ... [SFC CSS variable injection][Vue RFCs - 0043-sfc-style-variables]
+    - `"script-setup"` ... [`<script setup>`][Vue RFCs - 0040-script-setup]
   - Vue.js 2.6.0+
     - `"dynamic-directive-arguments"` ... [dynamic directive arguments](https://v3.vuejs.org/guide/template-syntax.html#dynamic-arguments).
     - `"v-slot"` ... [v-slot](https://v3.vuejs.org/api/directives.html#v-slot) directive.
diff --git a/lib/rules/no-unsupported-features.js b/lib/rules/no-unsupported-features.js
index f7d51dce9..803a62ca5 100644
--- a/lib/rules/no-unsupported-features.js
+++ b/lib/rules/no-unsupported-features.js
@@ -20,12 +20,13 @@ const FEATURES = {
   // Vue.js 2.6.0+
   'dynamic-directive-arguments': require('./syntaxes/dynamic-directive-arguments'),
   'v-slot': require('./syntaxes/v-slot'),
+  // Vue.js 2.7.0+
+  'script-setup': require('./syntaxes/script-setup'),
+  'style-css-vars-injection': require('./syntaxes/style-css-vars-injection'),
   // Vue.js 3.0.0+
   'v-model-argument': require('./syntaxes/v-model-argument'),
   'v-model-custom-modifiers': require('./syntaxes/v-model-custom-modifiers'),
   'v-is': require('./syntaxes/v-is'),
-  'script-setup': require('./syntaxes/script-setup'),
-  'style-css-vars-injection': require('./syntaxes/style-css-vars-injection'),
   // Vue.js 3.1.0+
   'is-attribute-with-vue-prefix': require('./syntaxes/is-attribute-with-vue-prefix'),
   // Vue.js 3.2.0+
@@ -95,16 +96,17 @@ module.exports = {
       forbiddenDynamicDirectiveArguments:
         'Dynamic arguments are not supported until Vue.js "2.6.0".',
       forbiddenVSlot: '`v-slot` are not supported until Vue.js "2.6.0".',
+      // Vue.js 2.7.0+
+      forbiddenScriptSetup:
+        '`<script setup>` is not supported until Vue.js "2.7.0".',
+      forbiddenStyleCssVarsInjection:
+        'SFC CSS variable injection is not supported until Vue.js ">=3.0.3 || >=2.7.0 <3.0.0".',
       // Vue.js 3.0.0+
       forbiddenVModelArgument:
         'Argument on `v-model` is not supported until Vue.js "3.0.0".',
       forbiddenVModelCustomModifiers:
         'Custom modifiers on `v-model` are not supported until Vue.js "3.0.0".',
       forbiddenVIs: '`v-is` are not supported until Vue.js "3.0.0".',
-      forbiddenScriptSetup:
-        '`<script setup>` are not supported until Vue.js "3.0.0".',
-      forbiddenStyleCssVarsInjection:
-        'SFC CSS variable injection is not supported until Vue.js "3.0.3".',
       // Vue.js 3.1.0+
       forbiddenIsAttributeWithVuePrefix:
         '`is="vue:"` are not supported until Vue.js "3.1.0".',
diff --git a/lib/rules/syntaxes/script-setup.js b/lib/rules/syntaxes/script-setup.js
index ef395d5ed..7c0538b3d 100644
--- a/lib/rules/syntaxes/script-setup.js
+++ b/lib/rules/syntaxes/script-setup.js
@@ -7,7 +7,7 @@
 const utils = require('../../utils')
 
 module.exports = {
-  supported: '>=3.0.0',
+  supported: '>=2.7.0',
   /** @param {RuleContext} context @returns {TemplateListener} */
   createScriptVisitor(context) {
     const scriptSetup = utils.getScriptSetupElement(context)
diff --git a/lib/rules/syntaxes/style-css-vars-injection.js b/lib/rules/syntaxes/style-css-vars-injection.js
index 1337cd0df..03608b5e1 100644
--- a/lib/rules/syntaxes/style-css-vars-injection.js
+++ b/lib/rules/syntaxes/style-css-vars-injection.js
@@ -7,7 +7,7 @@
 const { getStyleVariablesContext } = require('../../utils/style-variables')
 
 module.exports = {
-  supported: '>=3.0.3',
+  supported: '>=3.0.3 || >=2.7.0 <3.0.0',
   /** @param {RuleContext} context @returns {TemplateListener} */
   createScriptVisitor(context) {
     const styleVars = getStyleVariablesContext(context)
diff --git a/tests/lib/rules/no-unsupported-features/script-setup.js b/tests/lib/rules/no-unsupported-features/script-setup.js
index 584262364..51ffb1cea 100644
--- a/tests/lib/rules/no-unsupported-features/script-setup.js
+++ b/tests/lib/rules/no-unsupported-features/script-setup.js
@@ -24,6 +24,12 @@ tester.run('no-unsupported-features/script-setup', rule, {
       </script>`,
       options: buildOptions()
     },
+    {
+      code: `
+      <script setup>
+      </script>`,
+      options: buildOptions({ version: '^2.7.0' })
+    },
     {
       code: `
       <script>
@@ -39,7 +45,7 @@ tester.run('no-unsupported-features/script-setup', rule, {
       options: buildOptions({ version: '^2.6.0' }),
       errors: [
         {
-          message: '`<script setup>` are not supported until Vue.js "3.0.0".',
+          message: '`<script setup>` is not supported until Vue.js "2.7.0".',
           line: 2
         }
       ]
diff --git a/tests/lib/rules/no-unsupported-features/style-css-vars-injection.js b/tests/lib/rules/no-unsupported-features/style-css-vars-injection.js
index 6fc7c643d..df94061f7 100644
--- a/tests/lib/rules/no-unsupported-features/style-css-vars-injection.js
+++ b/tests/lib/rules/no-unsupported-features/style-css-vars-injection.js
@@ -54,6 +54,35 @@ tester.run('no-unsupported-features/style-css-vars-injection', rule, {
         <div class="text">hello</div>
       </template>
 
+      <script>
+        export default {
+          data() {
+            return {
+              color: 'red',
+              font: {
+                size: '2em',
+              },
+            }
+          },
+        }
+      </script>
+
+      <style>
+        .text {
+          color: v-bind(color);
+
+          /* expressions (wrap in quotes) */
+          font-size: v-bind('font.size');
+        }
+      </style>`,
+      options: buildOptions({ version: '^2.7.0' })
+    },
+    {
+      code: `
+      <template>
+        <div class="text">hello</div>
+      </template>
+
       <script>
       </script>
 
@@ -98,7 +127,7 @@ tester.run('no-unsupported-features/style-css-vars-injection', rule, {
       errors: [
         {
           message:
-            'SFC CSS variable injection is not supported until Vue.js "3.0.3".',
+            'SFC CSS variable injection is not supported until Vue.js ">=3.0.3 || >=2.7.0 <3.0.0".',
           line: 21,
           column: 18,
           endLine: 21,
@@ -106,7 +135,7 @@ tester.run('no-unsupported-features/style-css-vars-injection', rule, {
         },
         {
           message:
-            'SFC CSS variable injection is not supported until Vue.js "3.0.3".',
+            'SFC CSS variable injection is not supported until Vue.js ">=3.0.3 || >=2.7.0 <3.0.0".',
           line: 24,
           column: 22,
           endLine: 24,