feat: support script setup and css var inj for vue 2.7 (#1917)

Closes #1916

Author: danielwaltz

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.

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".',

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)

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)

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
         }
       ]

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,15 +127,15 @@ 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,
           endColumn: 31
         },
         {
           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,