refactor: isCSSRequest for all css (#4484)

vitejs · Aug 4, 2021 · 7ad8ba2 · 7ad8ba2
1 parent c8e42d7
commit 7ad8ba2
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts
@@ -83,7 +83,7 @@ export interface CSSModulesOptions {
 }
 
 const cssLangs = `\\.(css|less|sass|scss|styl|stylus|pcss|postcss)($|\\?)`
-export const cssLangRE = new RegExp(cssLangs)
+const cssLangRE = new RegExp(cssLangs)
 const cssModuleRE = new RegExp(`\\.module${cssLangs}`)
 const directRequestRE = /(\?|&)direct\b/
 const commonjsProxyRE = /\?commonjs-proxy/
@@ -102,11 +102,14 @@ const enum PureCssLang {
 type CssLang = keyof typeof PureCssLang | keyof typeof PreprocessLang
 
 export const isCSSRequest = (request: string): boolean =>
-  cssLangRE.test(request) && !directRequestRE.test(request)
+  cssLangRE.test(request)
 
 export const isDirectCSSRequest = (request: string): boolean =>
   cssLangRE.test(request) && directRequestRE.test(request)
 
+export const isDirectRequest = (request: string): boolean =>
+  directRequestRE.test(request)
+
 const cssModulesCache = new WeakMap<
   ResolvedConfig,
   Map<string, Record<string, string>>
@@ -150,7 +153,7 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
     },
 
     async transform(raw, id) {
-      if (!cssLangRE.test(id) || commonjsProxyRE.test(id)) {
+      if (!isCSSRequest(id) || commonjsProxyRE.test(id)) {
         return
       }
 
@@ -202,7 +205,7 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
             const depModules = new Set<string | ModuleNode>()
             for (const file of deps) {
               depModules.add(
-                cssLangRE.test(file)
+                isCSSRequest(file)
                   ? moduleGraph.createFileOnlyEntry(file)
                   : await moduleGraph.ensureEntryFromUrl(
                       await fileToUrl(file, config, this)
@@ -259,7 +262,7 @@ export function cssPostPlugin(config: ResolvedConfig): Plugin {
     },
 
     async transform(css, id, ssr) {
-      if (!cssLangRE.test(id) || commonjsProxyRE.test(id)) {
+      if (!isCSSRequest(id) || commonjsProxyRE.test(id)) {
         return
       }
 

diff --git a/packages/vite/src/node/server/hmr.ts b/packages/vite/src/node/server/hmr.ts
@@ -9,7 +9,7 @@ import { CLIENT_DIR } from '../constants'
 import { RollupError } from 'rollup'
 import match from 'minimatch'
 import { Server } from 'http'
-import { cssLangRE } from '../plugins/css'
+import { isCSSRequest } from '../plugins/css'
 
 export const debugHmr = createDebugger('vite:hmr')
 
@@ -226,7 +226,7 @@ function propagateUpdate(
     // additionally check for CSS importers, since a PostCSS plugin like
     // Tailwind JIT may register any file as a dependency to a CSS file.
     for (const importer of node.importers) {
-      if (cssLangRE.test(importer.url) && !currentChain.includes(importer)) {
+      if (isCSSRequest(importer.url) && !currentChain.includes(importer)) {
         propagateUpdate(
           importer,
           timestamp,
@@ -247,8 +247,8 @@ function propagateUpdate(
   // For a non-CSS file, if all of its importers are CSS files (registered via
   // PostCSS plugins) it should be considered a dead end and force full reload.
   if (
-    !cssLangRE.test(node.url) &&
-    [...node.importers].every((i) => cssLangRE.test(i.url))
+    !isCSSRequest(node.url) &&
+    [...node.importers].every((i) => isCSSRequest(i.url))
   ) {
     return true
   }

diff --git a/packages/vite/src/node/server/middlewares/transform.ts b/packages/vite/src/node/server/middlewares/transform.ts
@@ -22,7 +22,11 @@ import {
   DEP_VERSION_RE,
   NULL_BYTE_PLACEHOLDER
 } from '../../constants'
-import { isCSSRequest, isDirectCSSRequest } from '../../plugins/css'
+import {
+  isCSSRequest,
+  isDirectCSSRequest,
+  isDirectRequest
+} from '../../plugins/css'
 
 /**
  * Time (ms) Vite has to full-reload the page before returning
@@ -147,7 +151,11 @@ export function transformMiddleware(
 
         // for CSS, we need to differentiate between normal CSS requests and
         // imports
-        if (isCSSRequest(url) && req.headers.accept?.includes('text/css')) {
+        if (
+          isCSSRequest(url) &&
+          !isDirectRequest(url) &&
+          req.headers.accept?.includes('text/css')
+        ) {
           url = injectQuery(url, 'direct')
         }