Issue Station
Sign In
Tools hereToolbox

nextjs - ✅(Solved) Fix CSS pseudo element ::hightlight not supported in Turbopack [1 pull requests, 4 comments, 4 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#85398•Fetched 2026-04-08 02:15:57
View on GitHub
Comments
4
Participants
4
Timeline
13
Reactions
10
Author
daanveraartdaanveraart
Participants
ali6870ali6870daanveraartdaanveraartmunezerobagiramunezerobagiraNetailNetail
Timeline (top)
subscribed ×6commented ×3cross-referenced ×1issue_type_added ×1

Error Message

The ::highlight pseudo element throws error: Webpack renders this code without the error: npm run devwp

Fix Action

Fixed

PR fix notes

PR #980: fix(deps): update dependency next to v16 - abandoned

Description (problem / solution / changelog)

This PR contains the following updates:

PackageChangeAgeConfidence
next (source)15.5.4 -> 16.0.1ageconfidence

[!WARNING] Some dependencies could not be looked up. Check the Dependency Dashboard for more information.

Release Notes

<details> <summary>vercel/next.js (next)</summary>

v16.0.1

Compare Source

v16.0.0

Compare Source

v15.5.6

Compare Source

[!NOTE]
This release is backporting bug fixes. It does not include all pending features/changes on canary.

Core Changes
  • Turbopack: don't define process.cwd() in node_modules #​83452
Credits

Huge thanks to @​mischnic for helping!

v15.5.5

Compare Source

[!NOTE]
This release is backporting bug fixes. It does not include all pending features/changes on canary.

Core Changes
  • Split code-frame into separate compiled package (#​84238)
  • Add deprecation warning to Runtime config (#​84650)
  • fix: unstable_cache should perform blocking revalidation during ISR revalidation (#​84716)
  • feat: experimental.middlewareClientMaxBodySize body cloning limit (#​84722)
  • fix: missing next/link types with typedRoutes (#​84779)
Misc Changes
  • docs: early October improvements and fixes (#​84334)
Credits

Huge thanks to @​devjiwonchoi, @​ztanner, and @​icyJoseph for helping!

</details>

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

  • <!-- rebase-check -->If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0MS4xNTYuMSIsInVwZGF0ZWRJblZlciI6IjQxLjE1OS40IiwidGFyZ2V0QnJhbmNoIjoiZGV2IiwibGFiZWxzIjpbXX0=-->

Changed files

  • bun.lock (modified, +115/-11)
  • docs/package.json (modified, +1/-1)

Code Example

⨯ ./app/styles/global.css:5:13
Parsing CSS source code failed
  ::highlight(highlight-test) {

'highlight' is not recognized as a valid pseudo-element. Did you mean ':highlight' (pseudo-class) or is this a typo?

Import trace:
  Client Component Browser:
    ./app/styles/global.css [Client Component Browser]
    ./app/page.tsx [Client Component Browser]
    ./app/page.tsx [Server Component]

---

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 64630
  Available CPU cores: 16
Binaries:
  Node: 24.9.0
  npm: 11.6.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 16.0.1-canary.3 // Latest available version is detected (16.0.1-canary.3).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/decentaur/nextjs-highlight-issue

To Reproduce

  1. Run the application using npm run dev

Current vs. Expected behavior

The ::highlight pseudo element throws error:

 ⨯ ./app/styles/global.css:5:13
Parsing CSS source code failed
  ::highlight(highlight-test) {

'highlight' is not recognized as a valid pseudo-element. Did you mean ':highlight' (pseudo-class) or is this a typo?

Import trace:
  Client Component Browser:
    ./app/styles/global.css [Client Component Browser]
    ./app/page.tsx [Client Component Browser]
    ./app/page.tsx [Server Component]

Webpack renders this code without the error: npm run devwp

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 64630
  Available CPU cores: 16
Binaries:
  Node: 24.9.0
  npm: 11.6.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 16.0.1-canary.3 // Latest available version is detected (16.0.1-canary.3).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

CSS

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

extent analysis

TL;DR

The issue can likely be resolved by replacing the ::highlight pseudo-element with the correct syntax, :highlight, in the global.css file.

Guidance

  • Verify that the ::highlight pseudo-element is not a custom or deprecated syntax by checking the CSS documentation and the Next.js documentation.
  • Check if there are any other occurrences of ::highlight in the codebase and replace them with the correct syntax.
  • Try running the application with the corrected syntax to see if the error persists.
  • If the issue still occurs, investigate the differences in how Webpack and Next.js handle CSS parsing.

Example

No code example is provided as the fix is a simple syntax correction: replace ::highlight(highlight-test) with :highlight(highlight-test) in the global.css file.

Notes

The provided environment information and package versions may be relevant to the issue, but without further context, it's difficult to determine their impact. The fact that Webpack renders the code without errors suggests a potential difference in how CSS is parsed between Webpack and Next.js.

Recommendation

Apply workaround: Replace ::highlight with :highlight in the global.css file, as this is the most straightforward fix based on the provided error message.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#model loading#dependency error#configuration error#environment variable#network issue

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING