refactor: only rewrite css varaiable in <style scoped> when vars is present

packages/compiler-sfc/src/stylePluginScoped.ts

@@ -6,7 +6,7 @@ const animationRE = /^(-\w+-)?animation$/
 const cssVarRE = /\bvar\(--(global:)?([^)]+)\)/g
 
 export default postcss.plugin('vue-scoped', (options: any) => (root: Root) => {
-  const id: string = options
+  const { id, vars: hasInjectedVars } = options as { id: string; vars: boolean }
   const keyframes = Object.create(null)
 
   root.each(function rewriteSelectors(node) {
@@ -135,44 +135,45 @@ export default postcss.plugin('vue-scoped', (options: any) => (root: Root) => {
   })
 
   const hasKeyframes = Object.keys(keyframes).length
-  root.walkDecls(decl => {
-    // If keyframes are found in this <style>, find and rewrite animation names
-    // in declarations.
-    // Caveat: this only works for keyframes and animation rules in the same
-    // <style> element.
-    if (hasKeyframes) {
-      // individual animation-name declaration
-      if (animationNameRE.test(decl.prop)) {
-        decl.value = decl.value
-          .split(',')
-          .map(v => keyframes[v.trim()] || v.trim())
-          .join(',')
+  if (hasKeyframes || hasInjectedVars)
+    root.walkDecls(decl => {
+      // If keyframes are found in this <style>, find and rewrite animation names
+      // in declarations.
+      // Caveat: this only works for keyframes and animation rules in the same
+      // <style> element.
+      if (hasKeyframes) {
+        // individual animation-name declaration
+        if (animationNameRE.test(decl.prop)) {
+          decl.value = decl.value
+            .split(',')
+            .map(v => keyframes[v.trim()] || v.trim())
+            .join(',')
+        }
+        // shorthand
+        if (animationRE.test(decl.prop)) {
+          decl.value = decl.value
+            .split(',')
+            .map(v => {
+              const vals = v.trim().split(/\s+/)
+              const i = vals.findIndex(val => keyframes[val])
+              if (i !== -1) {
+                vals.splice(i, 1, keyframes[vals[i]])
+                return vals.join(' ')
+              } else {
+                return v
+              }
+            })
+            .join(',')
+        }
       }
-      // shorthand
-      if (animationRE.test(decl.prop)) {
-        decl.value = decl.value
-          .split(',')
-          .map(v => {
-            const vals = v.trim().split(/\s+/)
-            const i = vals.findIndex(val => keyframes[val])
-            if (i !== -1) {
-              vals.splice(i, 1, keyframes[vals[i]])
-              return vals.join(' ')
-            } else {
-              return v
-            }
-          })
-          .join(',')
-      }
-    }
 
-    // rewrite CSS variables
-    if (cssVarRE.test(decl.value)) {
-      decl.value = decl.value.replace(cssVarRE, (_, $1, $2) => {
-        return $1 ? `var(--${$2})` : `var(--${id}-${$2})`
-      })
-    }
-  })
+      // rewrite CSS variables
+      if (hasInjectedVars && cssVarRE.test(decl.value)) {
+        decl.value = decl.value.replace(cssVarRE, (_, $1, $2) => {
+          return $1 ? `var(--${$2})` : `var(--${id}-${$2})`
+        })
+      }
+    })
 })
 
 function isSpaceCombinator(node: Node) {