fix(module): use relative `tagPriority` for inline style tags by harlan-zw · Pull Request #6299 · nuxt/ui

harlan-zw · 2026-04-05T16:15:41Z

🔗 Linked issue

❓ Type of change

📚 Description

The hardcoded tagPriority: -2 on inline <style> tags overrides Unhead's CAPO weight entirely, forcing styles to render before <meta> tags in <head>. On sites with large inline styles (Tailwind, embedded SVGs), this pushes SEO/OG meta tags past the 1MB limit that social crawlers (Facebook, Twitter) parse, breaking OG previews.

Replaced with tagPriority: 'critical' which applies a relative offset (-8) to the natural CAPO style weight (60 - 8 = 52), keeping these CSS variable styles first among style tags without jumping ahead of meta tags.

coderabbitai · 2026-04-05T16:17:29Z

📝 Walkthrough

Walkthrough

This pull request updates tagPriority values for injected head entries: style tag descriptors changed from the numeric -2 to the string literal 'critical' in docs/app/composables/useTheme.ts (five style descriptors) and src/runtime/plugins/colors.ts (the #nuxt-ui-colors style). Inline script entries' tagPriority values were changed from -1 to the string 'high' in docs/app/plugins/data.ts and docs/app/plugins/theme.ts. No other logic, content, control flow, or exported API shapes were modified.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: replacing hardcoded tagPriority values with relative 'critical' priority for inline style tags to fix meta tag ordering.
Description check	✅ Passed	The description is well-detailed and directly related to the changeset, explaining the problem with hardcoded tagPriority and the solution using 'critical'.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

The absolute `tagPriority: -2` overrides the CAPO weight entirely, forcing style tags to render before meta tags in `<head>`. This can push SEO/OG meta tags past the 1MB mark that social crawlers parse. Using `'critical'` instead applies a -8 offset to the CAPO weight (60-8=52), keeping these styles first among style tags without jumping ahead of meta tags. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

pkg-pr-new · 2026-04-05T16:26:08Z

npm i https://pkg.pr.new/@nuxt/ui@6299

commit: d9d6baf

TypeScript widens `'critical'` to `string` in object literals, which doesn't match the `TagPriority` union type. Adding `as const` preserves the literal type. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

benjamincanac

Thanks @harlan-zw! Should we also replace tagPriority: -1 with tagPriority: 'high' across the docs or it doesn't matter?

coderabbitai

🧹 Nitpick comments (1)

docs/app/plugins/theme.ts (1)

98-118: Inconsistent tagPriority across inline scripts.

The black-as-primary script (lines 98-106) and font restoration script (lines 106-118) do not have tagPriority set, while the other four scripts in this useHead call use tagPriority: 'high'. This inconsistency could lead to unpredictable script ordering in the <head>.

For consistent behavior, consider adding tagPriority: 'high' to these two scripts as well.

♻️ Proposed fix to add tagPriority to remaining scripts

           } else {
               document.querySelector('style#nuxt-ui-black-as-primary').innerHTML = '';
             }
-          `.replace(/\s+/g, ' ')
+          `.replace(/\s+/g, ' '),
+          type: 'text/javascript',
+          tagPriority: 'high'
         }, {
           innerHTML: [
             `if (localStorage.getItem('nuxt-ui-font')) {`,
             `var font = localStorage.getItem('nuxt-ui-font');`,
             `document.querySelector('style#nuxt-ui-font').innerHTML = ':root { --font-sans: \\'' + font + '\\', sans-serif; }';`,
             `if (font !== 'Public Sans') {`,
             `var lnk = document.createElement('link');`,
             `lnk.rel = 'stylesheet';`,
             `lnk.href = 'https://fonts.googleapis.com/css2?family=' + encodeURIComponent(font) + ':wght@400;500;600;700&display=swap';`,
             `lnk.id = 'font-' + font.toLowerCase().replace(/\\s+/g, '-');`,
             `document.head.appendChild(lnk);`,
             `}}`
-          ].join(' ')
+          ].join(' '),
+          type: 'text/javascript',
+          tagPriority: 'high'
         }, {

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/app/plugins/theme.ts` around lines 98 - 118, The two inline script
entries that set/restores theme/font inside the useHead call (the scripts
manipulating style#nuxt-ui-black-as-primary and style#nuxt-ui-font / creating
link id 'font-...') are missing tagPriority and should be given tagPriority:
'high' to match the other head scripts; update the two script objects (the one
whose innerHTML toggles ':root { --ui-primary... }' and the one that reads
localStorage 'nuxt-ui-font' and appends the Google Fonts link) to include
tagPriority: 'high' so head ordering is consistent.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@docs/app/plugins/theme.ts`:
- Around line 98-118: The two inline script entries that set/restores theme/font
inside the useHead call (the scripts manipulating style#nuxt-ui-black-as-primary
and style#nuxt-ui-font / creating link id 'font-...') are missing tagPriority
and should be given tagPriority: 'high' to match the other head scripts; update
the two script objects (the one whose innerHTML toggles ':root { --ui-primary...
}' and the one that reads localStorage 'nuxt-ui-font' and appends the Google
Fonts link) to include tagPriority: 'high' so head ordering is consistent.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4c568476-b93a-4fb9-95b7-ba6d6319f84d

📥 Commits

Reviewing files that changed from the base of the PR and between 4400c2c and d9d6baf.

📒 Files selected for processing (3)

docs/app/plugins/data.ts
docs/app/plugins/theme.ts
src/runtime/plugins/colors.ts

🚧 Files skipped from review as they are similar to previous changes (1)

src/runtime/plugins/colors.ts

harlan-zw · 2026-04-08T14:01:40Z

Oh sorry, yes that looks good, thanks for the assist :)

harlan-zw requested a review from benjamincanac as a code owner April 5, 2026 16:15

github-actions bot added the v4 #4488 label Apr 5, 2026

harlan-zw force-pushed the fix/remove-hardcoded-tag-priority-v2 branch from af3ebc6 to 9d84180 Compare April 5, 2026 16:17

harlan-zw force-pushed the fix/remove-hardcoded-tag-priority-v2 branch from 9d84180 to 6a378d4 Compare April 5, 2026 16:19

harlan-zw changed the title ~~fix: remove hardcoded tagPriority from style tags~~ fix: use relative tagPriority for inline style tags Apr 5, 2026

vercel bot deployed to Preview – ui April 5, 2026 16:31 View deployment

vercel bot deployed to Preview – ui April 5, 2026 16:48 View deployment

benjamincanac changed the title ~~fix: use relative tagPriority for inline style tags~~ fix(module): use relative tagPriority for inline style tags Apr 7, 2026

benjamincanac reviewed Apr 7, 2026

View reviewed changes

benjamincanac added 2 commits April 8, 2026 09:55

Merge branch 'v4' into fix/remove-hardcoded-tag-priority-v2

4400c2c

fix: replace all tagPriority

d9d6baf

coderabbitai bot reviewed Apr 8, 2026

View reviewed changes

vercel bot deployed to Preview – ui April 8, 2026 08:13 View deployment

benjamincanac merged commit ae693d0 into nuxt:v4 Apr 8, 2026
40 of 44 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(module): use relative `tagPriority` for inline style tags#6299

fix(module): use relative `tagPriority` for inline style tags#6299
benjamincanac merged 4 commits intonuxt:v4from
harlan-zw:fix/remove-hardcoded-tag-priority-v2

harlan-zw commented Apr 5, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Apr 5, 2026 •

edited

Loading

Walkthrough

Estimated code review effort

❌ Failed checks (1 warning)

Uh oh!

pkg-pr-new bot commented Apr 5, 2026 •

edited

Loading

Uh oh!

benjamincanac left a comment •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

harlan-zw commented Apr 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

harlan-zw commented Apr 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

❓ Type of change

📚 Description

Uh oh!

coderabbitai bot commented Apr 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

❌ Failed checks (1 warning)

Uh oh!

pkg-pr-new bot commented Apr 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

benjamincanac left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

harlan-zw commented Apr 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

harlan-zw commented Apr 5, 2026 •

edited

Loading

coderabbitai bot commented Apr 5, 2026 •

edited

Loading

pkg-pr-new bot commented Apr 5, 2026 •

edited

Loading

benjamincanac left a comment •

edited

Loading