fix(vite): resolve css files without importer id first (#21770)

This commit is contained in:
Daniel Roe 2023-06-25 22:51:31 +01:00 committed by GitHub
parent 4cc9a7135d
commit dd913ce0d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 6 deletions

View File

@ -138,8 +138,8 @@ export function ssrStylesPlugin (options: SSRStylePluginOptions): Plugin {
const s = new MagicString(code) const s = new MagicString(code)
options.clientCSSMap[id] ||= new Set() options.clientCSSMap[id] ||= new Set()
for (const file of options.globalCSS) { for (const file of options.globalCSS) {
const resolved = await this.resolve(file, id) const resolved = await this.resolve(file) ?? await this.resolve(file, id)
const res = await this.resolve(file + '?inline&used', id) const res = await this.resolve(file + '?inline&used') ?? await this.resolve(file + '?inline&used', id)
if (!resolved || !res) { if (!resolved || !res) {
if (!warnCache.has(file)) { if (!warnCache.has(file)) {
warnCache.add(file) warnCache.add(file)
@ -179,8 +179,9 @@ export function ssrStylesPlugin (options: SSRStylePluginOptions): Plugin {
let styleCtr = 0 let styleCtr = 0
const ids = options.clientCSSMap[id] || [] const ids = options.clientCSSMap[id] || []
for (const file of ids) { for (const file of ids) {
const resolved = await this.resolve(file, id) const resolved = await this.resolve(file) ?? await this.resolve(file, id)
if (!resolved || !(await this.resolve(file + '?inline&used', id))) { const res = await this.resolve(file + '?inline&used') ?? await this.resolve(file + '?inline&used', id)
if (!resolved || !res) {
if (!warnCache.has(file)) { if (!warnCache.has(file)) {
warnCache.add(file) warnCache.add(file)
this.warn(`[nuxt] Cannot extract styles for \`${file}\`. Its styles will not be inlined when server-rendering.`) this.warn(`[nuxt] Cannot extract styles for \`${file}\`. Its styles will not be inlined when server-rendering.`)

View File

@ -1154,10 +1154,10 @@ describe.skipIf(isDev() || isWebpack)('inlining component styles', () => {
'{--global:"global";', // global css from nuxt.config '{--global:"global";', // global css from nuxt.config
'{--assets:"assets"}', // <script> '{--assets:"assets"}', // <script>
'{--postcss:"postcss"}', // <style lang=postcss> '{--postcss:"postcss"}', // <style lang=postcss>
'{--scoped:"scoped"}' // <style lang=css> '{--scoped:"scoped"}', // <style lang=css>
'{--server-only:"server-only"}' // server-only component not in client build
// TODO: ideally both client/server components would have inlined css when used // TODO: ideally both client/server components would have inlined css when used
// '{--client-only:"client-only"}', // client-only component not in server build // '{--client-only:"client-only"}', // client-only component not in server build
// '{--server-only:"server-only"}' // server-only component not in client build
// TODO: currently functional component not associated with ssrContext (upstream bug or perf optimization?) // TODO: currently functional component not associated with ssrContext (upstream bug or perf optimization?)
// '{--functional:"functional"}', // CSS imported ambiently in a functional component // '{--functional:"functional"}', // CSS imported ambiently in a functional component
] ]