feat: add experimental css support

Author: h-a-n-a

src/descriptorCache.ts

@@ -1,5 +1,5 @@
 import * as fs from 'fs'
-import type { SFCDescriptor, SFCParseResult } from 'vue/compiler-sfc'
+import type { SFCDescriptor } from 'vue/compiler-sfc'
 import { compiler } from './compiler'
 
 const { parse } = compiler
@@ -9,28 +9,6 @@ export function setDescriptor(filename: string, entry: SFCDescriptor) {
   descriptorCache.set(cleanQuery(filename), entry)
 }
 
-export function cachedParse(
-  filename: string,
-  source: string,
-  sourceMap = true
-): SFCParseResult {
-  filename = cleanQuery(filename)
-  if (descriptorCache.has(filename)) {
-    // Should we also cache errors here?
-    return { descriptor: descriptorCache.get(filename)!, errors: [] }
-  }
-
-  const { descriptor, errors } = parse(source, {
-    filename,
-    sourceMap,
-  })
-  descriptorCache.set(filename, descriptor)
-  return {
-    descriptor,
-    errors,
-  }
-}
-
 export function getDescriptor(filename: string): SFCDescriptor {
   filename = cleanQuery(filename)
   if (descriptorCache.has(filename)) {

src/index.ts

@@ -4,14 +4,13 @@ import * as qs from 'querystring'
 
 import hash = require('hash-sum')
 
-// import { compiler } from './compiler'
+import { compiler } from './compiler'
 import type {
   TemplateCompiler,
   CompilerOptions,
   SFCBlock,
   SFCTemplateCompileOptions,
   SFCScriptCompileOptions,
-  // SFCParseResult,
 } from 'vue/compiler-sfc'
 import { selectBlock } from './select'
 import { genHotReloadCode } from './hotReload'
@@ -20,11 +19,7 @@ import { formatError } from './formatError'
 
 import VueLoaderPlugin from './plugin'
 import { canInlineTemplate } from './resolveScript'
-import {
-  cachedParse,
-  //  getDescriptor,
-  setDescriptor,
-} from './descriptorCache'
+import { setDescriptor } from './descriptorCache'
 import { getOptions, stringifyRequest as _stringifyRequest } from './util'
 
 export { VueLoaderPlugin }
@@ -62,7 +57,7 @@ export interface VueLoaderOptions {
 
 let errorEmitted = false
 
-// const { parse } = compiler
+const { parse } = compiler
 const exportHelperPath = JSON.stringify(require.resolve('./exportHelper'))
 // const vueLoader = __filename
 
@@ -113,8 +108,10 @@ export default function loader(
 
   const filename = resourcePath.replace(/\?.*$/, '')
 
-  // Parse if necessary
-  const { descriptor, errors } = cachedParse(filename, source, sourceMap)
+  const { descriptor, errors } = parse(source, {
+    filename,
+    sourceMap,
+  })
 
   const asCustomElement =
     typeof options.customElement === 'boolean'
@@ -408,7 +405,10 @@ function genMatchResource(
 
   // process non-external resources
   if ('vue' in parsedQuery && !('external' in parsedQuery)) {
-    loaders.push(context.loaders[context.loaderIndex].request)
+    const currentRequest = context.loaders
+      .slice(context.loaderIndex)
+      .map((obj) => obj.request)
+    loaders.push(...currentRequest)
   }
   const loaderString = loaders.join('!')
 

src/pitcher.ts

@@ -62,7 +62,19 @@ export const pitch = function () {
   const isWebpack5 = webpackVersion && webpackVersion[0] > '4'
   if (query.type === `style`) {
     if (isWebpack5 && context._compiler?.options.experiments.css) {
-      return `@import "${context.resource}";`
+      if (query.inline) {
+        context.emitError(
+          new Error('`inline` is not supported with `experiments.css` enabled')
+        )
+        return ''
+      }
+
+      const loaderString = [stylePostLoaderPath, ...loaders]
+        .map((loader) => {
+          return typeof loader === 'string' ? loader : loader.request
+        })
+        .join('!')
+      return `@import "-!${loaderString}!${context.resource}";`
     }
     const cssLoaderIndex = loaders.findIndex(isCSSLoader)
     if (cssLoaderIndex > -1) {

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "outDir": "dist",
-    "sourceMap": false,
+    "sourceMap": true,
     "target": "es2015",
     "module": "commonjs",
     "moduleResolution": "node",