From b53baec7502b02af9b6235ab194a9cb281ba6245 Mon Sep 17 00:00:00 2001 From: Manu MA Date: Wed, 2 Nov 2022 11:38:58 +0100 Subject: [PATCH 1/8] feat: deprecated default export of css imports --- packages/vite/client.d.ts | 40 +++++++++++++++++++++++++++++++-------- 1 file changed, 32 insertions(+), 8 deletions(-) diff --git a/packages/vite/client.d.ts b/packages/vite/client.d.ts index 08e1e4cb424c84..031df3c60dd072 100644 --- a/packages/vite/client.d.ts +++ b/packages/vite/client.d.ts @@ -38,35 +38,59 @@ declare module '*.module.sss' { // CSS declare module '*.css' { - const css: string + /** + * @deprecated Use `import style from './style.css?inline'` instead. + */ + const css: unknown export default css } declare module '*.scss' { - const css: string + /** + * @deprecated Use `import style from './style.scss?inline'` instead. + */ + const css: unknown export default css } declare module '*.sass' { - const css: string + /** + * @deprecated Use `import style from './style.sass?inline'` instead. + */ + const css: unknown export default css } declare module '*.less' { - const css: string + /** + * @deprecated Use `import style from './style.less?inline'` instead. + */ + const css: unknown export default css } declare module '*.styl' { - const css: string + /** + * @deprecated Use `import style from './style.styl?inline'` instead. + */ + const css: unknown export default css } declare module '*.stylus' { - const css: string + /** + * @deprecated Use `import style from './style.stylus?inline'` instead. + */ + const css: unknown export default css } declare module '*.pcss' { - const css: string + /** + * @deprecated Use `import style from './style.pcss?inline'` instead. + */ + const css: unknown export default css } declare module '*.sss' { - const css: string + /** + * @deprecated Use `import style from './style.sss?inline'` instead. + */ + const css: unknown export default css } From 1498fdcd4344d95e8bdde5e6460e88c3c214288e Mon Sep 17 00:00:00 2001 From: Manu MA Date: Wed, 2 Nov 2022 11:45:40 +0100 Subject: [PATCH 2/8] fix: stuff --- packages/vite/client.d.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/vite/client.d.ts b/packages/vite/client.d.ts index 031df3c60dd072..f3d7436b3fedf2 100644 --- a/packages/vite/client.d.ts +++ b/packages/vite/client.d.ts @@ -41,56 +41,56 @@ declare module '*.css' { /** * @deprecated Use `import style from './style.css?inline'` instead. */ - const css: unknown + const css: string export default css } declare module '*.scss' { /** * @deprecated Use `import style from './style.scss?inline'` instead. */ - const css: unknown + const css: string export default css } declare module '*.sass' { /** * @deprecated Use `import style from './style.sass?inline'` instead. */ - const css: unknown + const css: string export default css } declare module '*.less' { /** * @deprecated Use `import style from './style.less?inline'` instead. */ - const css: unknown + const css: string export default css } declare module '*.styl' { /** * @deprecated Use `import style from './style.styl?inline'` instead. */ - const css: unknown + const css: string export default css } declare module '*.stylus' { /** * @deprecated Use `import style from './style.stylus?inline'` instead. */ - const css: unknown + const css: string export default css } declare module '*.pcss' { /** * @deprecated Use `import style from './style.pcss?inline'` instead. */ - const css: unknown + const css: string export default css } declare module '*.sss' { /** * @deprecated Use `import style from './style.sss?inline'` instead. */ - const css: unknown + const css: string export default css } From 5563ac7fa6ddd5e5001163c509fcd31a114964ef Mon Sep 17 00:00:00 2001 From: bluwy Date: Sun, 20 Nov 2022 16:29:15 +0800 Subject: [PATCH 3/8] refactor: css langs --- packages/vite/src/node/constants.ts | 3 +++ packages/vite/src/node/optimizer/scan.ts | 20 ++++++++++--------- packages/vite/src/node/plugins/css.ts | 20 +++++++++++-------- .../vite/src/node/plugins/splitVendorChunk.ts | 10 ++++++---- 4 files changed, 32 insertions(+), 21 deletions(-) diff --git a/packages/vite/src/node/constants.ts b/packages/vite/src/node/constants.ts index 83f97586e6ea6d..72504abc1cdabf 100644 --- a/packages/vite/src/node/constants.ts +++ b/packages/vite/src/node/constants.ts @@ -46,6 +46,9 @@ export const DEFAULT_CONFIG_FILES = [ export const JS_TYPES_RE = /\.(?:j|t)sx?$|\.mjs$/ +export const CSS_LANGS_RE = + /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)($|\\?)/ + export const OPTIMIZABLE_ENTRY_RE = /\.[cm]?[jt]s$/ export const SPECIAL_QUERY_RE = /[?&](?:worker|sharedworker|raw|url)\b/ diff --git a/packages/vite/src/node/optimizer/scan.ts b/packages/vite/src/node/optimizer/scan.ts index 662f6050a470a0..aca0d770bdcf9c 100644 --- a/packages/vite/src/node/optimizer/scan.ts +++ b/packages/vite/src/node/optimizer/scan.ts @@ -6,7 +6,12 @@ import type { Loader, OnLoadResult, Plugin } from 'esbuild' import { build, transform } from 'esbuild' import colors from 'picocolors' import type { ResolvedConfig } from '..' -import { JS_TYPES_RE, KNOWN_ASSET_TYPES, SPECIAL_QUERY_RE } from '../constants' +import { + CSS_LANGS_RE, + JS_TYPES_RE, + KNOWN_ASSET_TYPES, + SPECIAL_QUERY_RE +} from '../constants' import { cleanUrl, createDebugger, @@ -430,14 +435,11 @@ function esbuildScanPlugin( // they are done after the bare import resolve because a package name // may end with these extensions - // css & json & wasm - build.onResolve( - { - filter: - /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss|json|wasm)$/ - }, - externalUnlessEntry - ) + // css + build.onResolve({ filter: CSS_LANGS_RE }, externalUnlessEntry) + + // json & wasm + build.onResolve({ filter: /\.(json|json5|wasm)$/ }, externalUnlessEntry) // known asset types build.onResolve( diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index 3be227204d9b40..b2e0c9cc52af7b 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -26,7 +26,11 @@ import { getCodeWithSourcemap, injectSourcesContent } from '../server/sourcemap' import type { ModuleNode } from '../server/moduleGraph' import type { ResolveFn, ViteDevServer } from '../' import { toOutputFilePathInCss } from '../build' -import { CLIENT_PUBLIC_PATH, SPECIAL_QUERY_RE } from '../constants' +import { + CLIENT_PUBLIC_PATH, + CSS_LANGS_RE, + SPECIAL_QUERY_RE +} from '../constants' import type { ResolvedConfig } from '../config' import type { Plugin } from '../plugin' import { @@ -102,10 +106,7 @@ export interface CSSModulesOptions { localsConvention?: 'camelCase' | 'camelCaseOnly' | 'dashes' | 'dashesOnly' } -const cssLangs = `\\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)($|\\?)` -const cssLangRE = new RegExp(cssLangs) -// eslint-disable-next-line regexp/no-unused-capturing-group -const cssModuleRE = new RegExp(`\\.module${cssLangs}`) +const cssModuleRE = new RegExp(`\\.module${CSS_LANGS_RE}`) const directRequestRE = /(?:\?|&)direct\b/ const htmlProxyRE = /(?:\?|&)html-proxy\b/ const commonjsProxyRE = /\?commonjs-proxy/ @@ -135,10 +136,13 @@ type CssLang = | keyof typeof PostCssDialectLang export const isCSSRequest = (request: string): boolean => - cssLangRE.test(request) + CSS_LANGS_RE.test(request) + +export const isModuleCSSRequest = (request: string): boolean => + cssModuleRE.test(request) export const isDirectCSSRequest = (request: string): boolean => - cssLangRE.test(request) && directRequestRE.test(request) + CSS_LANGS_RE.test(request) && directRequestRE.test(request) export const isDirectRequest = (request: string): boolean => directRequestRE.test(request) @@ -773,7 +777,7 @@ async function compileCSS( // crawl them in order to register watch dependencies. const needInlineImport = code.includes('@import') const hasUrl = cssUrlRE.test(code) || cssImageSetRE.test(code) - const lang = id.match(cssLangRE)?.[1] as CssLang | undefined + const lang = id.match(CSS_LANGS_RE)?.[1] as CssLang | undefined const postcssConfig = await resolvePostcssConfig(config, getCssDialect(lang)) // 1. plain css that needs no processing diff --git a/packages/vite/src/node/plugins/splitVendorChunk.ts b/packages/vite/src/node/plugins/splitVendorChunk.ts index fcfed8b06ea91b..4e47d4c5248484 100644 --- a/packages/vite/src/node/plugins/splitVendorChunk.ts +++ b/packages/vite/src/node/plugins/splitVendorChunk.ts @@ -8,10 +8,12 @@ import type { UserConfig } from '../../node' import type { Plugin } from '../plugin' // This file will be built for both ESM and CJS. Avoid relying on other modules as possible. -const cssLangs = `\\.(?:css|less|sass|scss|styl|stylus|pcss|postcss)(?:$|\\?)` -const cssLangRE = new RegExp(cssLangs) -export const isCSSRequest = (request: string): boolean => - cssLangRE.test(request) + +// copy from constants.ts +const CSS_LANGS_RE = + // eslint-disable-next-line regexp/no-unused-capturing-group + /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\\?)/ +const isCSSRequest = (request: string): boolean => CSS_LANGS_RE.test(request) // Use splitVendorChunkPlugin() to get the same manualChunks strategy as Vite 2.7 // We don't recommend using this strategy as a general solution moving forward From 74a248aba369a790ded587ab610fe2fa0d21c0b2 Mon Sep 17 00:00:00 2001 From: bluwy Date: Sun, 20 Nov 2022 17:10:32 +0800 Subject: [PATCH 4/8] feat: add deprecation warning --- packages/vite/src/node/plugins/css.ts | 2 +- .../vite/src/node/plugins/importAnalysis.ts | 29 ++++++++++++++++++- playground/css/main.js | 17 +++++++---- 3 files changed, 40 insertions(+), 8 deletions(-) diff --git a/packages/vite/src/node/plugins/css.ts b/packages/vite/src/node/plugins/css.ts index b2e0c9cc52af7b..3af635a5111c71 100644 --- a/packages/vite/src/node/plugins/css.ts +++ b/packages/vite/src/node/plugins/css.ts @@ -106,7 +106,7 @@ export interface CSSModulesOptions { localsConvention?: 'camelCase' | 'camelCaseOnly' | 'dashes' | 'dashesOnly' } -const cssModuleRE = new RegExp(`\\.module${CSS_LANGS_RE}`) +const cssModuleRE = new RegExp(`\\.module${CSS_LANGS_RE.source}`) const directRequestRE = /(?:\?|&)direct\b/ const htmlProxyRE = /(?:\?|&)html-proxy\b/ const commonjsProxyRE = /\?commonjs-proxy/ diff --git a/packages/vite/src/node/plugins/importAnalysis.ts b/packages/vite/src/node/plugins/importAnalysis.ts index 8162f621988630..ed1bfbe4ef5103 100644 --- a/packages/vite/src/node/plugins/importAnalysis.ts +++ b/packages/vite/src/node/plugins/importAnalysis.ts @@ -63,7 +63,7 @@ import { ERR_OUTDATED_OPTIMIZED_DEP, throwOutdatedRequest } from './optimizedDeps' -import { isCSSRequest, isDirectCSSRequest } from './css' +import { isCSSRequest, isDirectCSSRequest, isModuleCSSRequest } from './css' import { browserExternalId } from './resolve' const isDebug = !!process.env.DEBUG @@ -436,6 +436,33 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin { str().remove(end + 1, expEnd) } + if ( + !isDynamicImport && + specifier && + isCSSRequest(specifier) && + !isModuleCSSRequest(specifier) && + !specifier.includes('?') // ignore custom queries + ) { + const sourceExp = source.slice(expStart, start) + if ( + sourceExp.includes('from') && // check default and named imports + !sourceExp.includes('__vite_glob_') // ignore glob + ) { + const newImport = + sourceExp + specifier + `?inline` + source.slice(end, expEnd) + this.warn( + `\n` + + colors.cyan(importerModule.file) + + `\n` + + generateCodeFrame(source, start) + + `\n` + + `Default and named imports from CSS files are deprecated. ` + + `Use the ?inline query instead. ` + + `For example: ${newImport}` + ) + } + } + // static import or valid string in dynamic import // If resolvable, let's resolve it if (specifier) { diff --git a/playground/css/main.js b/playground/css/main.js index 68299638b78369..369feab21444fd 100644 --- a/playground/css/main.js +++ b/playground/css/main.js @@ -1,18 +1,23 @@ import './minify.css' -import css from './imported.css' +import './imported.css' +import css from './imported.css?inline' text('.imported-css', css) -import sugarss from './sugarss.sss' +import './sugarss.sss' +import sugarss from './sugarss.sss?inline' text('.imported-sugarss', sugarss) -import sass from './sass.scss' +import './sass.scss' +import sass from './sass.scss?inline' text('.imported-sass', sass) -import less from './less.less' +import './less.less' +import less from './less.less?inline' text('.imported-less', less) -import stylus from './stylus.styl' +import './stylus.styl' +import stylus from './stylus.styl?inline' text('.imported-stylus', stylus) import rawCss from './raw-imported.css?raw' @@ -44,7 +49,7 @@ text( import inlineMod from './inline.module.css?inline' text('.modules-inline', inlineMod) -import charset from './charset.css' +import charset from './charset.css?inline' text('.charset-css', charset) import './layered/index.css' From 6df444dbad2755dcd4f7a6dd829cb6fac607a853 Mon Sep 17 00:00:00 2001 From: bluwy Date: Sun, 20 Nov 2022 17:24:09 +0800 Subject: [PATCH 5/8] feat: warn in glob --- packages/vite/src/node/optimizer/scan.ts | 3 +- .../vite/src/node/plugins/importAnalysis.ts | 30 +++++++++++-------- .../vite/src/node/plugins/importMetaGlob.ts | 29 +++++++++++++++++- playground/css/main.js | 7 +++-- 4 files changed, 52 insertions(+), 17 deletions(-) diff --git a/packages/vite/src/node/optimizer/scan.ts b/packages/vite/src/node/optimizer/scan.ts index aca0d770bdcf9c..d2c73cf5f1dadd 100644 --- a/packages/vite/src/node/optimizer/scan.ts +++ b/packages/vite/src/node/optimizer/scan.ts @@ -222,7 +222,8 @@ function esbuildScanPlugin( transpiledContents, id, config.root, - resolve + resolve, + config.logger ) return result?.s.toString() || transpiledContents diff --git a/packages/vite/src/node/plugins/importAnalysis.ts b/packages/vite/src/node/plugins/importAnalysis.ts index ed1bfbe4ef5103..1d08cceb00f3fb 100644 --- a/packages/vite/src/node/plugins/importAnalysis.ts +++ b/packages/vite/src/node/plugins/importAnalysis.ts @@ -446,7 +446,7 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin { const sourceExp = source.slice(expStart, start) if ( sourceExp.includes('from') && // check default and named imports - !sourceExp.includes('__vite_glob_') // ignore glob + !sourceExp.includes('__vite_glob_') // glob handles deprecation message itself ) { const newImport = sourceExp + specifier + `?inline` + source.slice(end, expEnd) @@ -454,11 +454,13 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin { `\n` + colors.cyan(importerModule.file) + `\n` + - generateCodeFrame(source, start) + + colors.reset(generateCodeFrame(source, start)) + `\n` + - `Default and named imports from CSS files are deprecated. ` + - `Use the ?inline query instead. ` + - `For example: ${newImport}` + colors.yellow( + `Default and named imports from CSS files are deprecated. ` + + `Use the ?inline query instead. ` + + `For example: ${newImport}` + ) ) } } @@ -594,14 +596,16 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin { `\n` + colors.cyan(importerModule.file) + `\n` + - generateCodeFrame(source, start) + - `\nThe above dynamic import cannot be analyzed by Vite.\n` + - `See ${colors.blue( - `https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations` - )} ` + - `for supported dynamic import formats. ` + - `If this is intended to be left as-is, you can use the ` + - `/* @vite-ignore */ comment inside the import() call to suppress this warning.\n` + colors.reset(generateCodeFrame(source, start)) + + colors.yellow( + `\nThe above dynamic import cannot be analyzed by Vite.\n` + + `See ${colors.blue( + `https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations` + )} ` + + `for supported dynamic import formats. ` + + `If this is intended to be left as-is, you can use the ` + + `/* @vite-ignore */ comment inside the import() call to suppress this warning.\n` + ) ) } } diff --git a/packages/vite/src/node/plugins/importMetaGlob.ts b/packages/vite/src/node/plugins/importMetaGlob.ts index f0aac1e8dc98b5..a71bb20c147a75 100644 --- a/packages/vite/src/node/plugins/importMetaGlob.ts +++ b/packages/vite/src/node/plugins/importMetaGlob.ts @@ -1,5 +1,6 @@ import { isAbsolute, posix } from 'node:path' import micromatch from 'micromatch' +import colors from 'picocolors' import { stripLiteral } from 'strip-literal' import type { ArrayExpression, @@ -21,7 +22,14 @@ import type { Plugin } from '../plugin' import type { ViteDevServer } from '../server' import type { ModuleNode } from '../server/moduleGraph' import type { ResolvedConfig } from '../config' -import { normalizePath, slash, transformStableResult } from '../utils' +import { + generateCodeFrame, + normalizePath, + slash, + transformStableResult +} from '../utils' +import type { Logger } from '../logger' +import { isCSSRequest } from './css' const { isMatch, scan } = micromatch @@ -68,6 +76,7 @@ export function importGlobPlugin(config: ResolvedConfig): Plugin { id, config.root, (im) => this.resolve(im, id).then((i) => i?.id || im), + config.logger, config.experimental.importGlobRestoreExtension ) if (result) { @@ -318,6 +327,7 @@ export async function transformGlobImport( id: string, root: string, resolveId: IdResolver, + logger: Logger, restoreQueryExtension = false ): Promise { id = slash(id) @@ -374,6 +384,23 @@ export async function transformGlobImport( if (query && !query.startsWith('?')) query = `?${query}` + if ( + !query.match(/(?:\?|&)inline\b/) && + files.some((file) => isCSSRequest(file)) + ) { + logger.warn( + `\n` + + colors.cyan(id) + + `\n` + + colors.reset(generateCodeFrame(code, start)) + + `\n` + + colors.yellow( + `Globbing CSS files without the ?inline query is deprecated. ` + + `Add the \`{ query: '?inline' }\` glob option to fix this.` + ) + ) + } + const resolvePaths = (file: string) => { if (!dir) { if (isRelative) diff --git a/playground/css/main.js b/playground/css/main.js index 369feab21444fd..37ba9b74d035df 100644 --- a/playground/css/main.js +++ b/playground/css/main.js @@ -95,7 +95,7 @@ import inlined from './inlined.css?inline' text('.inlined-code', inlined) // glob -const glob = import.meta.glob('./glob-import/*.css') +const glob = import.meta.glob('./glob-import/*.css', { query: '?inline' }) Promise.all( Object.keys(glob).map((key) => glob[key]().then((i) => i.default)) ).then((res) => { @@ -103,7 +103,10 @@ Promise.all( }) // globEager -const globEager = import.meta.glob('./glob-import/*.css', { eager: true }) +const globEager = import.meta.glob('./glob-import/*.css', { + eager: true, + query: '?inline' +}) text('.imported-css-globEager', JSON.stringify(globEager, null, 2)) import postcssSourceInput from './postcss-source-input.css?query=foo' From b80f7c744f3b14e725799c2a4ef69af97d738216 Mon Sep 17 00:00:00 2001 From: bluwy Date: Sun, 20 Nov 2022 17:26:58 +0800 Subject: [PATCH 6/8] test: fix unit --- .../plugins/importGlob/fixture.test.ts | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/fixture.test.ts b/packages/vite/src/node/__tests__/plugins/importGlob/fixture.test.ts index 7b3206df31e82a..580423b8bf53e1 100644 --- a/packages/vite/src/node/__tests__/plugins/importGlob/fixture.test.ts +++ b/packages/vite/src/node/__tests__/plugins/importGlob/fixture.test.ts @@ -4,12 +4,14 @@ import { fileURLToPath } from 'node:url' import { describe, expect, it } from 'vitest' import { transformGlobImport } from '../../../plugins/importMetaGlob' import { transformWithEsbuild } from '../../../plugins/esbuild' +import { createLogger } from '../../../logger' const __dirname = resolve(fileURLToPath(import.meta.url), '..') describe('fixture', async () => { const resolveId = (id: string) => id const root = resolve(__dirname, '..') + const logger = createLogger() it('transform', async () => { const id = resolve(__dirname, './fixture-a/index.ts') @@ -18,7 +20,9 @@ describe('fixture', async () => { ).code expect( - (await transformGlobImport(code, id, root, resolveId))?.s.toString() + ( + await transformGlobImport(code, id, root, resolveId, logger) + )?.s.toString() ).toMatchSnapshot() }) @@ -30,7 +34,13 @@ describe('fixture', async () => { ].join('\n') expect( ( - await transformGlobImport(code, 'virtual:module', root, resolveId) + await transformGlobImport( + code, + 'virtual:module', + root, + resolveId, + logger + ) )?.s.toString() ).toMatchSnapshot() @@ -39,7 +49,8 @@ describe('fixture', async () => { "import.meta.glob('./modules/*.ts')", 'virtual:module', root, - resolveId + resolveId, + logger ) expect('no error').toBe('should throw an error') } catch (err) { @@ -56,7 +67,9 @@ describe('fixture', async () => { ).code expect( - (await transformGlobImport(code, id, root, resolveId, true))?.s.toString() + ( + await transformGlobImport(code, id, root, resolveId, logger, true) + )?.s.toString() ).toMatchSnapshot() }) }) From b873b14df3b11d17bcc09b21b85ed349adc1517b Mon Sep 17 00:00:00 2001 From: bluwy Date: Mon, 28 Nov 2022 11:06:31 +0800 Subject: [PATCH 7/8] chore: fix merge --- packages/vite/src/node/plugins/splitVendorChunk.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/vite/src/node/plugins/splitVendorChunk.ts b/packages/vite/src/node/plugins/splitVendorChunk.ts index 4e47d4c5248484..44173170c0aabd 100644 --- a/packages/vite/src/node/plugins/splitVendorChunk.ts +++ b/packages/vite/src/node/plugins/splitVendorChunk.ts @@ -13,7 +13,8 @@ import type { Plugin } from '../plugin' const CSS_LANGS_RE = // eslint-disable-next-line regexp/no-unused-capturing-group /\.(css|less|sass|scss|styl|stylus|pcss|postcss|sss)(?:$|\\?)/ -const isCSSRequest = (request: string): boolean => CSS_LANGS_RE.test(request) +export const isCSSRequest = (request: string): boolean => + CSS_LANGS_RE.test(request) // Use splitVendorChunkPlugin() to get the same manualChunks strategy as Vite 2.7 // We don't recommend using this strategy as a general solution moving forward From 60934c95a569e9ffde2ee7b983e8bd2e8633e9bd Mon Sep 17 00:00:00 2001 From: bluwy Date: Mon, 28 Nov 2022 11:34:52 +0800 Subject: [PATCH 8/8] chore: fix test hmr --- playground/css/__tests__/css.spec.ts | 12 +++++++----- playground/css/imported-inline.css | 3 +++ playground/css/main.js | 18 +++--------------- 3 files changed, 13 insertions(+), 20 deletions(-) create mode 100644 playground/css/imported-inline.css diff --git a/playground/css/__tests__/css.spec.ts b/playground/css/__tests__/css.spec.ts index 837abcd776345e..7f87c0b73aa606 100644 --- a/playground/css/__tests__/css.spec.ts +++ b/playground/css/__tests__/css.spec.ts @@ -17,16 +17,18 @@ import { // note: tests should retrieve the element at the beginning of test and reuse it // in later assertions to ensure CSS HMR doesn't reload the page test('imported css', async () => { + const glob = await page.textContent('.imported-css-glob') + expect(glob).toContain('.dir-import') + const globEager = await page.textContent('.imported-css-globEager') + expect(globEager).toContain('.dir-import') +}) + +test('inline imported css', async () => { const css = await page.textContent('.imported-css') expect(css).toMatch(/\.imported ?\{/) if (isBuild) { expect(css.trim()).not.toContain('\n') // check minified } - - const glob = await page.textContent('.imported-css-glob') - expect(glob).toContain('.dir-import') - const globEager = await page.textContent('.imported-css-globEager') - expect(globEager).toContain('.dir-import') }) test('linked css', async () => { diff --git a/playground/css/imported-inline.css b/playground/css/imported-inline.css new file mode 100644 index 00000000000000..65af30a2064c86 --- /dev/null +++ b/playground/css/imported-inline.css @@ -0,0 +1,3 @@ +.imported { + color: green; +} diff --git a/playground/css/main.js b/playground/css/main.js index 37ba9b74d035df..8af0e8355db719 100644 --- a/playground/css/main.js +++ b/playground/css/main.js @@ -1,24 +1,12 @@ import './minify.css' - import './imported.css' -import css from './imported.css?inline' -text('.imported-css', css) - import './sugarss.sss' -import sugarss from './sugarss.sss?inline' -text('.imported-sugarss', sugarss) - import './sass.scss' -import sass from './sass.scss?inline' -text('.imported-sass', sass) - import './less.less' -import less from './less.less?inline' -text('.imported-less', less) - import './stylus.styl' -import stylus from './stylus.styl?inline' -text('.imported-stylus', stylus) + +import css from './imported-inline.css?inline' +text('.imported-css', css) import rawCss from './raw-imported.css?raw' text('.raw-imported-css', rawCss)