Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
/nuxtPublic

fix(nuxt): ensure correct order of inlined styles#33116

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Draft
cernymatej wants to merge1 commit intonuxt:main
base:main
Choose a base branch
Loading
fromcernymatej:fix/inline-style-order
Draft
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 22 additions & 5 deletionstest/basic.test.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1825,27 +1825,44 @@

describe.skipIf(isDev() || isWebpack)('inlining component styles', () => {
const inlinedCSS = [
'{--plugin:"plugin"}', // CSS imported ambiently in JS/TS
'{--global:"global";', // global css from nuxt.config
'{--plugin:"plugin"}', // CSS imported ambiently in JS/TS
'{--server-only-child:"server-only-child"}', // child of a server-only component
'{--server-only:"server-only"}', // server-only component not in client build
'{--shared-component:"shared-component"}', // styles in a chunk shared between pages
'{--style-from-parent:"style-from-parent"}', // styles on a child component from <style> in parent
'{--assets:"assets"}', // <script>
'{--postcss:"postcss"}', // <style lang=postcss>
'{--scoped:"scoped"}', // <style lang=css>
'{--shared-component:"shared-component"}', // styles in a chunk shared between pages
'{--server-only-child:"server-only-child"}', // child of a server-only component
'{--server-only:"server-only"}', // server-only component not in client build
// TODO: ideally both client/server components would have inlined css when used
// '{--client-only:"client-only"}', // client-only component not in server build
// TODO: currently functional component not associated with ssrContext (upstream bug or perf optimization?)
// '{--functional:"functional"}', // CSS imported ambiently in a functional component
]

let stylesHtmlPromise: Promise<string>
function fetchStylesPage () {
if (stylesHtmlPromise) {
return stylesHtmlPromise
}

stylesHtmlPromise = $fetch<string>('/styles')
return stylesHtmlPromise
}

it('should inline styles', async () => {
const html = await$fetch<string>('/styles')
const html = awaitfetchStylesPage()
for (const style of inlinedCSS) {
expect.soft(html).toContain(style)
}
})

it('should have correct order of inlined styles', async () => {
const html = await fetchStylesPage()
const positions = inlinedCSS.map(style => html.indexOf(style))
expect(positions).toEqual(positions.slice().sort((a, b) => a - b))

Check failure on line 1863 in test/basic.test.ts

View workflow job for this annotation

GitHub Actions/ test-fixtures (ubuntu-latest, built, vite, async, manifest-on, json, lts/-1)

test/basic.test.ts > inlining component styles > should have correct order of inlined styles

AssertionError: expected [ 360, 494, 299, 250, 772, 643, …(3) ] to deeply equal [ 250, 299, 360, 494, 533, 589, …(3) ]- Expected+ Received  [-   250,-   299,    360,    494,-   533,-   589,+   299,+   250,+   772,    643,    704,-   772,+   533,+   589,  ] ❯ test/basic.test.ts:1863:23

Check failure on line 1863 in test/basic.test.ts

View workflow job for this annotation

GitHub Actions/ test-fixtures (ubuntu-latest, built, vite, async, manifest-off, json, lts/-1)

test/basic.test.ts > inlining component styles > should have correct order of inlined styles

AssertionError: expected [ 360, 494, 299, 250, 772, 643, …(3) ] to deeply equal [ 250, 299, 360, 494, 533, 589, …(3) ]- Expected+ Received  [-   250,-   299,    360,    494,-   533,-   589,+   299,+   250,+   772,    643,    704,-   772,+   533,+   589,  ] ❯ test/basic.test.ts:1863:23

Check failure on line 1863 in test/basic.test.ts

View workflow job for this annotation

GitHub Actions/ test-fixtures (ubuntu-latest, built, vite, default, manifest-on, json, lts/-1)

test/basic.test.ts > inlining component styles > should have correct order of inlined styles

AssertionError: expected [ 360, 494, 299, 250, 772, 643, …(3) ] to deeply equal [ 250, 299, 360, 494, 533, 589, …(3) ]- Expected+ Received  [-   250,-   299,    360,    494,-   533,-   589,+   299,+   250,+   772,    643,    704,-   772,+   533,+   589,  ] ❯ test/basic.test.ts:1863:23

Check failure on line 1863 in test/basic.test.ts

View workflow job for this annotation

GitHub Actions/ test-fixtures (windows-latest, built, vite, default, manifest-on, json, lts/-1)

test/basic.test.ts > inlining component styles > should have correct order of inlined styles

AssertionError: expected [ 360, 494, 299, 250, 772, 643, …(3) ] to deeply equal [ 250, 299, 360, 494, 533, 589, …(3) ]- Expected+ Received  [-   250,-   299,    360,    494,-   533,-   589,+   299,+   250,+   772,    643,    704,-   772,+   533,+   589,  ] ❯ test/basic.test.ts:1863:23

Check failure on line 1863 in test/basic.test.ts

View workflow job for this annotation

GitHub Actions/ test-fixtures (ubuntu-latest, built, vite, async, manifest-on, js, lts/-1)

test/basic.test.ts > inlining component styles > should have correct order of inlined styles

AssertionError: expected [ 360, 494, 299, 250, 772, 643, …(3) ] to deeply equal [ 250, 299, 360, 494, 533, 589, …(3) ]- Expected+ Received  [-   250,-   299,    360,    494,-   533,-   589,+   299,+   250,+   772,    643,    704,-   772,+   533,+   589,  ] ❯ test/basic.test.ts:1863:23

Check failure on line 1863 in test/basic.test.ts

View workflow job for this annotation

GitHub Actions/ test-fixtures (windows-latest, built, vite, async, manifest-off, json, lts/-1)

test/basic.test.ts > inlining component styles > should have correct order of inlined styles

AssertionError: expected [ 360, 494, 299, 250, 772, 643, …(3) ] to deeply equal [ 250, 299, 360, 494, 533, 589, …(3) ]- Expected+ Received  [-   250,-   299,    360,    494,-   533,-   589,+   299,+   250,+   772,    643,    704,-   772,+   533,+   589,  ] ❯ test/basic.test.ts:1863:23

Check failure on line 1863 in test/basic.test.ts

View workflow job for this annotation

GitHub Actions/ test-fixtures (ubuntu-latest, built, vite, default, manifest-off, json, lts/-1)

test/basic.test.ts > inlining component styles > should have correct order of inlined styles

AssertionError: expected [ 360, 494, 299, 250, 772, 643, …(3) ] to deeply equal [ 250, 299, 360, 494, 533, 589, …(3) ]- Expected+ Received  [-   250,-   299,    360,    494,-   533,-   589,+   299,+   250,+   772,    643,    704,-   772,+   533,+   589,  ] ❯ test/basic.test.ts:1863:23

Check failure on line 1863 in test/basic.test.ts

View workflow job for this annotation

GitHub Actions/ test-fixtures (windows-latest, built, vite, async, manifest-on, json, lts/-1)

test/basic.test.ts > inlining component styles > should have correct order of inlined styles

AssertionError: expected [ 360, 494, 299, 250, 772, 643, …(3) ] to deeply equal [ 250, 299, 360, 494, 533, 589, …(3) ]- Expected+ Received  [-   250,-   299,    360,    494,-   533,-   589,+   299,+   250,+   772,    643,    704,-   772,+   533,+   589,  ] ❯ test/basic.test.ts:1863:23

Check failure on line 1863 in test/basic.test.ts

View workflow job for this annotation

GitHub Actions/ test-fixtures (windows-latest, built, vite, default, manifest-off, json, lts/-1)

test/basic.test.ts > inlining component styles > should have correct order of inlined styles

AssertionError: expected [ 360, 494, 299, 250, 772, 643, …(3) ] to deeply equal [ 250, 299, 360, 494, 533, 589, …(3) ]- Expected+ Received  [-   250,-   299,    360,    494,-   533,-   589,+   299,+   250,+   772,    643,    704,-   772,+   533,+   589,  ] ❯ test/basic.test.ts:1863:23
})

it('should inline global css when accessing a page with `ssr: false` override via route rules', async () => {
const globalCSS = [
'{--plugin:"plugin"}', // CSS imported ambiently in JS/TS
Expand Down
6 changes: 5 additions & 1 deletiontest/fixtures/basic/app/pages/styles.vue
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@
<ClientOnlyScript />
<FunctionalComponent />
<ServerOnlyComponent />
<SharedComponent />
<SharedComponentclass="style-from-parent"/>
</div>
</template>

Expand All@@ -23,4 +23,8 @@ import '~/assets/assets.css'
div {
--scoped: 'scoped';
}

.style-from-parent {
--style-from-parent: 'style-from-parent';
}
</style>
Loading
[8]ページ先頭
©2009-2025 Movatter.jp