From 23be6e4ef09d0241648010604d6af6a821fe68cc Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Sun, 18 Jul 2021 15:21:35 +0900
Subject: [PATCH] Update some rules to support style CSS vars injection (#1574)

* Update `vue/no-unused-properties` and `vue/script-setup-uses-vars` rule to support style CSS vars

* Add testcase

* upgrade vue-eslint-parser

* update test

* Update no-unsupported-features
---
 docs/rules/no-unsupported-features.md         |   3 +
 lib/rules/no-unsupported-features.js          |   3 +
 lib/rules/no-unused-properties.js             |  10 ++
 lib/rules/script-setup-uses-vars.js           |  12 +-
 .../syntaxes/style-css-vars-injection.js      |  28 +++++
 lib/utils/style-variables/index.js            |  61 +++++++++
 package.json                                  |   2 +-
 tests/lib/rules/no-parsing-error.js           |  26 ++++
 .../style-css-vars-injection.js               | 118 ++++++++++++++++++
 tests/lib/rules/no-unused-properties.js       |  32 +++++
 tests/lib/rules/script-setup-uses-vars.js     |  40 ++++++
 11 files changed, 333 insertions(+), 2 deletions(-)
 create mode 100644 lib/rules/syntaxes/style-css-vars-injection.js
 create mode 100644 lib/utils/style-variables/index.js
 create mode 100644 tests/lib/rules/no-unsupported-features/style-css-vars-injection.js

diff --git a/docs/rules/no-unsupported-features.md b/docs/rules/no-unsupported-features.md
index 48e222a99..858a8445d 100644
--- a/docs/rules/no-unsupported-features.md
+++ b/docs/rules/no-unsupported-features.md
@@ -32,6 +32,7 @@ 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]
@@ -107,6 +108,7 @@ The `"ignores"` option accepts an array of the following strings.
 - [Vue RFCs - 0005-replace-v-bind-sync-with-v-model-argument]
 - [Vue RFCs - 0011-v-model-api-change]
 - [Vue RFCs - 0040-script-setup]
+- [Vue RFCs - 0043-sfc-style-variables]
 - [Vue RFCs - v-bind .prop shorthand proposal]
 
 [Vue RFCs - 0001-new-slot-syntax]: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md
@@ -115,6 +117,7 @@ The `"ignores"` option accepts an array of the following strings.
 [Vue RFCs - 0005-replace-v-bind-sync-with-v-model-argument]: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0005-replace-v-bind-sync-with-v-model-argument.md
 [Vue RFCs - 0011-v-model-api-change]: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0011-v-model-api-change.md
 [Vue RFCs - 0040-script-setup]: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md
+[Vue RFCs - 0043-sfc-style-variables]: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0043-sfc-style-variables.md
 
 [Vue RFCs - v-bind .prop shorthand proposal]: https://github.com/vuejs/rfcs/pull/18
 
diff --git a/lib/rules/no-unsupported-features.js b/lib/rules/no-unsupported-features.js
index 821a23ae5..1ddc69342 100644
--- a/lib/rules/no-unsupported-features.js
+++ b/lib/rules/no-unsupported-features.js
@@ -27,6 +27,7 @@ const FEATURES = {
   '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')
 }
@@ -103,6 +104,8 @@ module.exports = {
       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/no-unused-properties.js b/lib/rules/no-unused-properties.js
index 0e5b0b3e7..8b6bfa132 100644
--- a/lib/rules/no-unused-properties.js
+++ b/lib/rules/no-unused-properties.js
@@ -10,6 +10,7 @@
 
 const utils = require('../utils')
 const eslintUtils = require('eslint-utils')
+const { getStyleVariablesContext } = require('../utils/style-variables')
 
 /**
  * @typedef {import('../utils').GroupName} GroupName
@@ -1056,6 +1057,15 @@ module.exports = {
       {
         /** @param {Program} node */
         'Program:exit'(node) {
+          const styleVars = getStyleVariablesContext(context)
+          if (styleVars) {
+            for (const { id } of styleVars.references) {
+              templatePropertiesContainer.usedProperties.addUsed(
+                id.name,
+                (context) => extractPatternOrThisProperties(id, context, true)
+              )
+            }
+          }
           if (!node.templateBody) {
             reportUnusedProperties()
           }
diff --git a/lib/rules/script-setup-uses-vars.js b/lib/rules/script-setup-uses-vars.js
index 68e0b3fc3..a73a33678 100644
--- a/lib/rules/script-setup-uses-vars.js
+++ b/lib/rules/script-setup-uses-vars.js
@@ -4,6 +4,7 @@
  */
 'use strict'
 
+const { getStyleVariablesContext } = require('../utils/style-variables')
 // ------------------------------------------------------------------------------
 // Requirements
 // ------------------------------------------------------------------------------
@@ -112,7 +113,16 @@ module.exports = {
           }
         }
       },
-      undefined,
+      {
+        Program() {
+          const styleVars = getStyleVariablesContext(context)
+          if (styleVars) {
+            for (const ref of styleVars.references) {
+              context.markVariableAsUsed(ref.id.name)
+            }
+          }
+        }
+      },
       {
         templateBodyTriggerSelector: 'Program'
       }
diff --git a/lib/rules/syntaxes/style-css-vars-injection.js b/lib/rules/syntaxes/style-css-vars-injection.js
new file mode 100644
index 000000000..1337cd0df
--- /dev/null
+++ b/lib/rules/syntaxes/style-css-vars-injection.js
@@ -0,0 +1,28 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const { getStyleVariablesContext } = require('../../utils/style-variables')
+
+module.exports = {
+  supported: '>=3.0.3',
+  /** @param {RuleContext} context @returns {TemplateListener} */
+  createScriptVisitor(context) {
+    const styleVars = getStyleVariablesContext(context)
+    if (!styleVars) {
+      return {}
+    }
+    return {
+      Program() {
+        for (const vBind of styleVars.vBinds) {
+          context.report({
+            node: vBind,
+            messageId: 'forbiddenStyleCssVarsInjection'
+          })
+        }
+      }
+    }
+  }
+}
diff --git a/lib/utils/style-variables/index.js b/lib/utils/style-variables/index.js
new file mode 100644
index 000000000..e2016a631
--- /dev/null
+++ b/lib/utils/style-variables/index.js
@@ -0,0 +1,61 @@
+const { isVElement } = require('..')
+
+module.exports = {
+  getStyleVariablesContext
+}
+
+class StyleVariablesContext {
+  /**
+   * @param {RuleContext} context
+   * @param {VElement[]} styles
+   */
+  constructor(context, styles) {
+    this.context = context
+    this.styles = styles
+    /** @type {VReference[]} */
+    this.references = []
+    /** @type {VExpressionContainer[]} */
+    this.vBinds = []
+    for (const style of styles) {
+      for (const node of style.children) {
+        if (node.type === 'VExpressionContainer') {
+          this.vBinds.push(node)
+          for (const ref of node.references.filter(
+            (ref) => ref.variable == null
+          )) {
+            this.references.push(ref)
+          }
+        }
+      }
+    }
+  }
+}
+
+/** @type {Map<VElement, StyleVariablesContext} */
+const cache = new Map()
+/**
+ * Get the style vars context
+ * @param {RuleContext} context
+ * @returns {StyleVariablesContext | null}
+ */
+function getStyleVariablesContext(context) {
+  const df =
+    context.parserServices.getDocumentFragment &&
+    context.parserServices.getDocumentFragment()
+  if (!df) {
+    return null
+  }
+  const styles = df.children
+    .filter(isVElement)
+    .filter((e) => e.name === 'style')
+  if (!styles.length) {
+    return null
+  }
+  let ctx = cache.get(styles[0])
+  if (ctx) {
+    return ctx
+  }
+  ctx = new StyleVariablesContext(context, styles)
+  cache.set(styles[0], ctx)
+  return ctx
+}
diff --git a/package.json b/package.json
index 5821b2500..299296e16 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,7 @@
     "eslint-utils": "^2.1.0",
     "natural-compare": "^1.4.0",
     "semver": "^6.3.0",
-    "vue-eslint-parser": "^7.8.0"
+    "vue-eslint-parser": "^7.9.0"
   },
   "devDependencies": {
     "@types/eslint": "^7.2.0",
diff --git a/tests/lib/rules/no-parsing-error.js b/tests/lib/rules/no-parsing-error.js
index 2b299f09a..12d195cb8 100644
--- a/tests/lib/rules/no-parsing-error.js
+++ b/tests/lib/rules/no-parsing-error.js
@@ -615,6 +615,32 @@ tester.run('no-parsing-error', rule, {
     {
       code: '<template><div xmlns=""></template>',
       errors: ['Parsing error: x-invalid-namespace.']
+    },
+
+    //style vars
+    {
+      filename: 'test.vue',
+      code: `
+        <template></template>
+        <style>
+          .text {
+            color: v-bind(color.);
+            font-size: v-bind('font size');
+          }
+        </style>
+        `,
+      errors: [
+        {
+          message: 'Parsing error: Unexpected end of expression.',
+          line: 5,
+          column: 33
+        },
+        {
+          message: 'Parsing error: Unexpected token size.',
+          line: 6,
+          column: 37
+        }
+      ]
     }
   ]
 })
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
new file mode 100644
index 000000000..6fc7c643d
--- /dev/null
+++ b/tests/lib/rules/no-unsupported-features/style-css-vars-injection.js
@@ -0,0 +1,118 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../../lib/rules/no-unsupported-features')
+const utils = require('./utils')
+
+const buildOptions = utils.optionsBuilder('style-css-vars-injection', '^3.0.3')
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    ecmaVersion: 2019,
+    sourceType: 'module'
+  }
+})
+
+tester.run('no-unsupported-features/style-css-vars-injection', rule, {
+  valid: [
+    {
+      code: `
+      <template>
+        <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()
+    },
+    {
+      code: `
+      <template>
+        <div class="text">hello</div>
+      </template>
+
+      <script>
+      </script>
+
+      <style>
+        .text {
+          color: red;
+          font-size: 2em;
+        }
+      </style>`,
+      options: buildOptions({ version: '^2.6.0' })
+    }
+  ],
+  invalid: [
+    {
+      code: `
+      <template>
+        <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: '^3.0.0' }),
+      errors: [
+        {
+          message:
+            'SFC CSS variable injection is not supported until Vue.js "3.0.3".',
+          line: 21,
+          column: 18,
+          endLine: 21,
+          endColumn: 31
+        },
+        {
+          message:
+            'SFC CSS variable injection is not supported until Vue.js "3.0.3".',
+          line: 24,
+          column: 22,
+          endLine: 24,
+          endColumn: 41
+        }
+      ]
+    }
+  ]
+})
diff --git a/tests/lib/rules/no-unused-properties.js b/tests/lib/rules/no-unused-properties.js
index 4af8091af..164e562ab 100644
--- a/tests/lib/rules/no-unused-properties.js
+++ b/tests/lib/rules/no-unused-properties.js
@@ -1562,6 +1562,38 @@ tester.run('no-unused-properties', rule, {
       }
       </script>`,
       options: allOptions
+    },
+
+    //style vars
+    {
+      filename: 'test.vue',
+      code: `
+        <template>
+          <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>
+        `
     }
   ],
 
diff --git a/tests/lib/rules/script-setup-uses-vars.js b/tests/lib/rules/script-setup-uses-vars.js
index 5d3c80060..dd49cf6a2 100644
--- a/tests/lib/rules/script-setup-uses-vars.js
+++ b/tests/lib/rules/script-setup-uses-vars.js
@@ -179,6 +179,25 @@ describe('script-setup-uses-vars', () => {
           <div ref="v"/>
         </template>
         `
+      },
+
+      //style vars
+      {
+        filename: 'test.vue',
+        code: `
+        <script setup>
+          /* eslint script-setup-uses-vars: 1 */
+          const color = 'red'
+          const font = { size: '2em' }
+        </script>
+
+        <style>
+          * {
+            color: v-bind(color);
+            font-size: v-bind('font.size');
+          }
+        </style>
+        `
       }
     ],
 
@@ -305,6 +324,27 @@ describe('script-setup-uses-vars', () => {
             line: 4
           }
         ]
+      },
+
+      //style vars
+      {
+        filename: 'test.vue',
+        code: `
+        <script setup>
+          /* eslint script-setup-uses-vars: 1 */
+          const color = 'red'
+        </script>
+
+        <style lang="scss">
+          .v-bind .color {
+            color: 'v-bind(color)';
+            background-color: 'v-bind(color)';
+          }
+          /* v-bind(color) */
+          // v-bind(color)
+        </style>
+        `,
+        errors: ["'color' is assigned a value but never used."]
       }
     ]
   })