fix: fix incorrect match with experiments.css enabled

Author: h-a-n-a

Diff for: src/pitcher.ts

@@ -59,8 +59,21 @@ export const pitch = function () {
 
   // Inject style-post-loader before css-loader for scoped CSS and trimming
   const isWebpack5 = testWebpack5(context._compiler)
+  const options = (getOptions(context) || {}) as VueLoaderOptions
   if (query.type === `style`) {
     if (isWebpack5 && context._compiler?.options.experiments.css) {
+      // If user enables `experiments.css`, then we are trying to emit css code directly.
+      // Although we can target requests like `xxx.vue?type=style` to match `type: "css"`,
+      // it will make the plugin a mess.
+      if (!options.experimentalInlineMatchResource) {
+        context.emitError(
+          new Error(
+            '`experimentalInlineMatchResource` should be enabled if `experiments.css` enabled currently'
+          )
+        )
+        return ''
+      }
+
       if (query.inline || query.module) {
         context.emitError(
           new Error(
@@ -75,7 +88,9 @@ export const pitch = function () {
           return typeof loader === 'string' ? loader : loader.request
         })
         .join('!')
-      return `@import "-!${loaderString}!${context.resource}";`
+      return `@import "${context.resourcePath}${
+        query.lang ? `.${query.lang}` : ''
+      }${context.resourceQuery}!=!-!${loaderString}!${context.resource}";`
     }
     const cssLoaderIndex = loaders.findIndex(isCSSLoader)
     if (cssLoaderIndex > -1) {

Diff for: test/utils.ts

@@ -38,10 +38,6 @@ const baseConfig: webpack.Configuration = {
         test: /\.vue$/,
         use: [DEFAULT_VUE_USE],
       },
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
-      },
       {
         test: /\.ts$/,
         loader: process.env.WEBPACK4
@@ -80,6 +76,13 @@ export function bundle(
 }> {
   let config: BundleOptions = merge({}, baseConfig, options)
 
+  if (!options.experiments?.css) {
+    config.module?.rules?.push({
+      test: /\.css$/,
+      use: ['style-loader', 'css-loader'],
+    })
+  }
+
   if (config.vue && config.module) {
     const vueOptions = {
       // Test experimental inline match resource by default