fix: resolve @import of the proxied <style> (#7031)

vitejs · Feb 23, 2022 · c7aad02 · c7aad02
1 parent 8fd8f6e
commit c7aad02
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 0 deletions.
diff --git a/packages/playground/assets/index.html b/packages/playground/assets/index.html
@@ -200,6 +200,13 @@ <h3 class="import-css">@import</h3>
   @import url('./css/import.css');
 </style>
 
+<h3 class="foo-public">
+  @import CSS from publicDir should load (this should be red)
+</h3>
+<style>
+  @import '/foo.css';
+</style>
+
 <script type="module">
   import './css/fonts.css'
   import './css/css-url.css'

diff --git a/packages/playground/assets/static/foo.css b/packages/playground/assets/static/foo.css
@@ -0,0 +1,3 @@
+.foo-public {
+  color: red;
+}
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -686,9 +686,14 @@ async function compileCSS(
     postcssConfig && postcssConfig.plugins ? postcssConfig.plugins.slice() : []
 
   if (needInlineImport) {
+    const isHTMLProxy = htmlProxyRE.test(id)
     postcssPlugins.unshift(
       (await import('postcss-import')).default({
         async resolve(id, basedir) {
+          const publicFile = checkPublicFile(id, config)
+          if (isHTMLProxy && publicFile) {
+            return publicFile
+          }
           const resolved = await atImportResolvers.css(
             id,
             path.join(basedir, '*')