feat(css): support internal Sass/SCSS in HTML(#17672)

packages/vite/src/node/plugins/html.ts

@@ -47,7 +47,7 @@ interface ScriptAssetsUrl {
 }
 
 const htmlProxyRE =
-  /\?html-proxy=?(?:&inline-css)?(?:&style-attr)?&index=(\d+)\.(?:js|css)$/
+  /\?html-proxy=?(?:&inline-css)?(?:&style-attr)?&index=(\d+)\.(?:js|css|less|sass|scss|styl|stylus|pcss|postcss)$/
 const isHtmlProxyRE = /\?html-proxy\b/
 
 const inlineCSSRE = /__VITE_INLINE_CSS__([a-z\d]{8}_\d+)__/g
@@ -598,14 +598,16 @@ export function buildHtmlPlugin(config: ResolvedConfig): Plugin {
 
           // <style>...</style>
           if (node.nodeName === 'style' && node.childNodes.length) {
+            const lang =
+              node.attrs.find((prop) => prop.name === 'lang')?.value || 'css'
             const styleNode =
               node.childNodes.pop() as DefaultTreeAdapterMap['textNode']
             const filePath = id.replace(normalizePath(config.root), '')
             inlineModuleIndex++
             addToHTMLProxyCache(config, filePath, inlineModuleIndex, {
               code: styleNode.value,
             })
-            js += `\nimport "${id}?html-proxy&inline-css&index=${inlineModuleIndex}.css"`
+            js += `\nimport "${id}?html-proxy&inline-css&index=${inlineModuleIndex}.${lang}"`
             const hash = getHash(cleanUrl(id))
             // will transform in `applyHtmlTransforms`
             s.update(

packages/vite/src/node/server/middlewares/indexHtml.ts

@@ -49,6 +49,7 @@ interface AssetNode {
   start: number
   end: number
   code: string
+  lang: string
 }
 
 interface InlineStyleAttribute {
@@ -321,10 +322,13 @@ const devHtmlHook: IndexHtmlTransformHook = async (
 
     if (node.nodeName === 'style' && node.childNodes.length) {
       const children = node.childNodes[0] as DefaultTreeAdapterMap['textNode']
+      const lang =
+        node.attrs.find((prop) => prop.name === 'lang')?.value || 'css'
       styleUrl.push({
         start: children.sourceCodeLocation!.startOffset,
         end: children.sourceCodeLocation!.endOffset,
         code: children.value,
+        lang,
       })
     }
 
@@ -354,8 +358,8 @@ const devHtmlHook: IndexHtmlTransformHook = async (
   })
 
   await Promise.all([
-    ...styleUrl.map(async ({ start, end, code }, index) => {
-      const url = `${proxyModulePath}?html-proxy&direct&index=${index}.css`
+    ...styleUrl.map(async ({ start, end, code, lang }, index) => {
+      const url = `${proxyModulePath}?html-proxy&direct&index=${index}.${lang}`
 
       // ensure module in graph after successful load
       const mod = await moduleGraph.ensureEntryFromUrl(url, false)
@@ -372,7 +376,11 @@ const devHtmlHook: IndexHtmlTransformHook = async (
               config.logger,
             )
           }
-          content = getCodeWithSourcemap('css', result.code, result.map)
+          content = getCodeWithSourcemap(
+            lang === 'js' ? 'js' : 'css',
+            result.code,
+            result.map,
+          )
         } else {
           content = result.code
         }

packages/vite/src/node/server/sourcemap.ts

@@ -91,7 +91,16 @@ export function genSourceMapUrl(map: SourceMap | string): string {
 }
 
 export function getCodeWithSourcemap(
-  type: 'js' | 'css',
+  type:
+    | 'js'
+    | 'css'
+    | 'less'
+    | 'sass'
+    | 'scss'
+    | 'styl'
+    | 'stylus'
+    | 'pcss'
+    | 'postcss',
   code: string,
   map: SourceMap,
 ): string {

playground/css/__tests__/css.spec.ts

@@ -537,6 +537,10 @@ test('@import scss', async () => {
   expect(await getColor('.at-import-scss')).toBe('red')
 })
 
+test('internal css with preprocessor', async () => {
+  expect(await getColor('.internal-style-preprocessor')).toBe('orange')
+})
+
 test.runIf(isBuild)('manual chunk path', async () => {
   // assert that the manual-chunk css is output in the directory specified in manualChunk (#12072)
   expect(

playground/css/index.html

@@ -205,6 +205,15 @@ <h1>CSS</h1>
 
   <p>Imports field</p>
   <p class="imports-field">import '#imports': this should be red</p>
+  <style lang="scss">
+    $color: orange;
+    .internal-style-preprocessor {
+      color: $color;
+    }
+  </style>
+  <p class="internal-style-preprocessor">
+    test internal style with preprocessor, this will be orange
+  </p>
 </div>
 <style>
   @import url(./imported.scss);