From a0b5e2bf102fb220d9664fd3af496fb719834e10 Mon Sep 17 00:00:00 2001
From: Pieter <pieter@pfiers.net>
Date: Mon, 22 Mar 2021 15:34:49 +0100
Subject: [PATCH] fix: Don't use rules that also match ".html"

This adds a check so that rules that match foo.vue.html but *also* foo.html are ignored.

Resolves #1625
---
 lib/plugin-webpack4.js | 7 ++++++-
 lib/plugin-webpack5.js | 9 ++++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/lib/plugin-webpack4.js b/lib/plugin-webpack4.js
index a56b5edce..47b5d4972 100644
--- a/lib/plugin-webpack4.js
+++ b/lib/plugin-webpack4.js
@@ -31,7 +31,12 @@ class VueLoaderPlugin {
     // find the rule that applies to vue files
     let vueRuleIndex = rawRules.findIndex(createMatcher(`foo.vue`))
     if (vueRuleIndex < 0) {
-      vueRuleIndex = rawRules.findIndex(createMatcher(`foo.vue.html`))
+      const vueHtmlRuleIndex = rawRules.findIndex(createMatcher(`foo.vue.html`))
+      const htmlOnlyRuleIndex = rawRules.findIndex(createMatcher(`foo.html`))
+      // Only use the .vue.html rules if they don't also match normal .html files
+      if (vueHtmlRuleIndex >= 0 && htmlOnlyRuleIndex < 0) {
+        vueRuleIndex = vueHtmlRuleIndex
+      }
     }
     const vueRule = rules[vueRuleIndex]
 
diff --git a/lib/plugin-webpack5.js b/lib/plugin-webpack5.js
index 9b156ff12..dcf6b5514 100644
--- a/lib/plugin-webpack5.js
+++ b/lib/plugin-webpack5.js
@@ -60,9 +60,16 @@ class VueLoaderPlugin {
       })
 
       if (!vueRules.length) {
-        vueRules = ruleSet.exec({
+        const vueHtmlRules = ruleSet.exec({
           resource: 'foo.vue.html'
         })
+        const htmlOnlyRules = ruleSet.exec({
+          resource: 'foo.html'
+        })
+        // Only use the .vue.html rules if they don't also match normal .html files
+        if (vueHtmlRules.length > htmlOnlyRules.length) {
+          vueRules = vueHtmlRules
+        }
       }
       if (vueRules.length > 0) {
         if (rawRule.oneOf) {