From 275f04f79be66ede234aa828e556a5f864b34a5e Mon Sep 17 00:00:00 2001 From: OneNail Date: Tue, 3 Aug 2021 11:18:38 +0800 Subject: [PATCH 1/3] refactor: isCSSRequest for all css --- packages/vite/src/node/plugins/css.ts | 13 ++++++++----- packages/vite/src/node/server/hmr.ts | 8 ++++---- .../vite/src/node/server/middlewares/transform.ts | 11 +++++++++-- 3 files changed, 21 insertions(+), 11 deletions(-) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index e7c00e304620ce..35cefd6e4119cf 100644 --- 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 isIndirectCSSRequest = (request: string): boolean => + cssLangRE.test(request) && !directRequestRE.test(request) + const cssModulesCache = new WeakMap< ResolvedConfig, Map> @@ -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() 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 index 06a6e7c951224b..1eb3523aa55e64 100644 --- a/packages/vite/src/node/server/hmr.ts +++ b/packages/vite/src/node/server/hmr.ts @@ -10,7 +10,7 @@ import { RollupError } from 'rollup' import { prepareError } from './middlewares/error' import match from 'minimatch' import { Server } from 'http' -import { cssLangRE } from '../plugins/css' +import { isCSSRequest } from '../plugins/css' export const debugHmr = createDebugger('vite:hmr') @@ -227,7 +227,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, @@ -248,8 +248,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 index 5b1700b0943b62..8cc6c1568e8cd5 100644 --- 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, + isIndirectCSSRequest +} from '../../plugins/css' /** * Time (ms) Vite has to full-reload the page before returning @@ -147,7 +151,10 @@ 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 ( + isIndirectCSSRequest(url) && + req.headers.accept?.includes('text/css') + ) { url = injectQuery(url, 'direct') } From ddca342a988da73eb0a9adf775f7953efd054d5c Mon Sep 17 00:00:00 2001 From: OneNail Date: Tue, 3 Aug 2021 21:30:53 +0800 Subject: [PATCH 2/3] refactor: remove isIndirectCSSRequest --- packages/vite/src/node/plugins/css.ts | 3 --- packages/vite/src/node/server/middlewares/transform.ts | 9 +++------ 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 35cefd6e4119cf..2b0fdcd2548901 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -107,9 +107,6 @@ export const isCSSRequest = (request: string): boolean => export const isDirectCSSRequest = (request: string): boolean => cssLangRE.test(request) && directRequestRE.test(request) -export const isIndirectCSSRequest = (request: string): boolean => - cssLangRE.test(request) && !directRequestRE.test(request) - const cssModulesCache = new WeakMap< ResolvedConfig, Map> diff --git a/packages/vite/src/node/server/middlewares/transform.ts b/packages/vite/src/node/server/middlewares/transform.ts index 8cc6c1568e8cd5..01ace1865b6dc5 100644 --- a/packages/vite/src/node/server/middlewares/transform.ts +++ b/packages/vite/src/node/server/middlewares/transform.ts @@ -22,11 +22,7 @@ import { DEP_VERSION_RE, NULL_BYTE_PLACEHOLDER } from '../../constants' -import { - isCSSRequest, - isDirectCSSRequest, - isIndirectCSSRequest -} from '../../plugins/css' +import { isCSSRequest, isDirectCSSRequest } from '../../plugins/css' /** * Time (ms) Vite has to full-reload the page before returning @@ -152,7 +148,8 @@ export function transformMiddleware( // for CSS, we need to differentiate between normal CSS requests and // imports if ( - isIndirectCSSRequest(url) && + isCSSRequest(url) && + !isDirectCSSRequest(url) && req.headers.accept?.includes('text/css') ) { url = injectQuery(url, 'direct') From ce3561a0c3a82c4606e7cb1a9a6a4965a9989b8e Mon Sep 17 00:00:00 2001 From: OneNail Date: Wed, 4 Aug 2021 07:11:50 +0800 Subject: [PATCH 3/3] refactor: add isDirectRequest --- packages/vite/src/node/plugins/css.ts | 3 +++ packages/vite/src/node/server/middlewares/transform.ts | 8 ++++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 2b0fdcd2548901..31e7305c3d23ec 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -107,6 +107,9 @@ export const isCSSRequest = (request: string): boolean => 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> diff --git a/packages/vite/src/node/server/middlewares/transform.ts b/packages/vite/src/node/server/middlewares/transform.ts index 01ace1865b6dc5..6ee0567b6561ba 100644 --- 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 @@ -149,7 +153,7 @@ export function transformMiddleware( // imports if ( isCSSRequest(url) && - !isDirectCSSRequest(url) && + !isDirectRequest(url) && req.headers.accept?.includes('text/css') ) { url = injectQuery(url, 'direct')