fix: css v-bind in production mode

vuejs · Jun 20, 2022 · 655e5f8 · 655e5f8
1 parent 7d90c7b
commit 655e5f8
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/lib/codegen/styleInjection.js b/lib/codegen/styleInjection.js
@@ -9,7 +9,8 @@ module.exports = function genStyleInjectionCode(
   resourcePath,
   stringifyRequest,
   needsHotReload,
-  needsExplicitInjection
+  needsExplicitInjection,
+  isProduction
 ) {
   let styleImportsCode = ``
   let styleInjectionCode = ``
@@ -25,7 +26,8 @@ module.exports = function genStyleInjectionCode(
     // make sure to only pass id when necessary so that we don't inject
     // duplicate tags when multiple components import the same css file
     const idQuery = style.scoped ? `&id=${id}` : ``
-    const query = `?vue&type=style&index=${i}${idQuery}${attrsQuery}${inheritQuery}`
+    const prodQuery = isProduction ? `&prod` : ``
+    const query = `?vue&type=style&index=${i}${idQuery}${prodQuery}${attrsQuery}${inheritQuery}`
     return stringifyRequest(src + query)
   }
 

diff --git a/lib/index.js b/lib/index.js
@@ -31,6 +31,7 @@ module.exports = function (source) {
   const stringifyRequest = (r) => loaderUtils.stringifyRequest(loaderContext, r)
 
   const {
+    mode,
     target,
     request,
     minimize,
@@ -48,7 +49,11 @@ module.exports = function (source) {
   const isServer = target === 'node'
   const isShadow = !!options.shadowMode
   const isProduction =
-    options.productionMode || minimize || process.env.NODE_ENV === 'production'
+    mode === 'production' ||
+    options.productionMode ||
+    minimize ||
+    process.env.NODE_ENV === 'production'
+
   const filename = path.basename(resourcePath)
   const context = rootContext || process.cwd()
   const sourceRoot = path.dirname(path.relative(context, resourcePath))
@@ -141,7 +146,8 @@ module.exports = function (source) {
       resourcePath,
       stringifyRequest,
       needsHotReload,
-      isServer || isShadow // needs explicit injection?
+      isServer || isShadow, // needs explicit injection?
+      isProduction
     )
   }
 

diff --git a/lib/loaders/stylePostLoader.js b/lib/loaders/stylePostLoader.js
@@ -13,6 +13,7 @@ module.exports = function (source, inMap) {
     id: `data-v-${query.id}`,
     map: inMap,
     scoped: !!query.scoped,
+    isProd: query.prod != null,
     trim: true
   })