Update from template

[alex-rawlings-yyc]

@coderabbitai ignore

This change is 

Summary by CodeRabbit

• Dependencies

  • Upgraded React to v19 and Tailwind CSS to v4

• Documentation

  • Updated Tailwind utility prefix guidance in documentation

• Bug Fixes

  • Fixed function binding issue in webpack resolver

• Configuration

  • Modernized styling configuration for Tailwind CSS v4 compatibility
  • Updated Tailwind prefix syntax across components

[coderabbitai]

📝 Walkthrough

Walkthrough

Tailwind CSS v3 is upgraded to v4 across the entire codebase: dependencies are updated to React 19 and Tailwind v4.3.0; PostCSS configuration switches to the @tailwindcss/postcss plugin; the tailwind.css file is rewritten with v4 directives including theme token mapping and oklch color values; all React components and tests are updated from tw- to tw: class prefix syntax.

Changes

Tailwind CSS v3 → v4 Migration

Layer / File(s)	Summary
Build configuration and tooling package.json, .stylelintrc.js, postcss.config.ts, tailwind.config.ts, webpack/web-view-resolve-webpack-plugin.ts	React peer dependency raised to >=19.0.0; Tailwind upgraded to ^4.3.0; PostCSS plugin changed to @tailwindcss/postcss; Stylelint extends Tailwind config and ignores v4 at-rules (config, theme, plugin, source, custom-variant); tailwind.config.ts removes v3 theme extensions and plugin wiring, retaining only typography configuration; webpack resolver binding fixed to pass bound function.
Tailwind v4 CSS theme setup src/tailwind.css	Rewritten for Tailwind v4 directives: @custom-variant dark, @import for Tailwind/utilities/shadcn/fonts, @config linkage, @theme inline token mapping, @utility no-scrollbar definition, updated :root/.light/.dark/.paratext-light/.paratext-dark theme selectors with oklch color values, and base-layer compatibility border rule.
Component class prefix migration src/components/ContinuousView.tsx, src/components/ContinuousScrollToggle.tsx, src/components/Interlinearizer.tsx, src/components/InterlinearizerLoader.tsx, src/components/PhraseBox.tsx, src/components/ScriptureNavControls.tsx, src/components/SegmentView.tsx, src/components/TokenChip.tsx, src/interlinearizer.web-view.tsx, src/hooks/useOptimisticBooleanSetting.ts	All Tailwind utility class names updated from tw- prefix to tw: prefix (e.g., tw-flex → tw:flex, tw:hover:bg-muted/30); explicit ref initializations added for jumpTargetRef and timeoutRef.
Test class-name assertions src/__tests__/components/ContinuousView.test.tsx, src/__tests__/components/PhraseBox.test.tsx	Updated selectors to match new tw: class prefix in gradient, border, cursor, text, and spacing class assertions.
Documentation AGENTS.md	Updated Tailwind prefix guidance to tw: (instead of tw-) with correct variant syntax (tw:hover:...).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• sillsdev/interlinearizer-extension#40: Prior work introducing continuous-scroll view components that are now updated with the new class prefix syntax.
• sillsdev/interlinearizer-extension#6: Initial WebView component implementation at src/interlinearizer.web-view.tsx that is now updated to use tw: class syntax.

Suggested reviewers

• imnasnainaec
• jasonleenaylor

Poem

🐰 From tw- to tw:, the classes now align,
Tailwind v4 shines with colors so divine,
oklch hues and themes in perfect harmony sweet,
React nineteen joins the dance, the upgrade complete!
Hop-hop-hooray, the migration's here to stay! 🎨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title 'Update from template' is vague and does not clearly convey the primary changes in this PR, which involve a substantial Tailwind CSS v3→v4 migration with config/prefix updates.	Revise the title to be more specific about the main changes, such as 'Migrate to Tailwind CSS v4 with tw: prefix and updated configurations' or similar.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	Docstring coverage is 88.89% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch update-from-template

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

AGENTS.md (1)

58-58: ⚡ Quick win

Clarify the negative example to isolate the variant-order issue.

The negative example hover:tw-px-3 mixes two problems: wrong variant order AND the old tw- prefix. This could confuse developers who are learning the new syntax. Consider using hover:tw:px-3 in the negative example to focus on the order issue while showing the correct new prefix.

📝 Proposed clarification

-All UI uses Tailwind CSS (via `src/tailwind.css`). Every Tailwind class is prefixed `tw:` to avoid collisions with Platform.Bible's own styles (configured in `tailwind.config.ts`). For modifier variants the prefix comes first: `tw:hover:px-3`, not `hover:tw-px-3`.
+All UI uses Tailwind CSS (via `src/tailwind.css`). Every Tailwind class is prefixed `tw:` to avoid collisions with Platform.Bible's own styles (configured in `tailwind.config.ts`). For modifier variants the prefix comes first: `tw:hover:px-3`, not `hover:tw:px-3`.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@AGENTS.md` at line 58, The negative example in the Tailwind prefix guidance
mixes two issues (wrong variant order and an old prefix form); update the
negative example to isolate the variant-order problem by replacing the current
example that uses the obsolete prefix with the same correct prefix but wrong
order (use "hover:tw:px-3" as the negative example) and keep the positive
example "tw:hover:px-3"; reference the Tailwind prefix convention in
src/tailwind.css and the configuration in tailwind.config.ts when making the
change.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.stylelintrc.js:
- Around line 32-43: The Stylelint configuration's ignoreAtRules array is
missing Tailwind v4's "utility" at-rule, causing lint errors for `@utility`;
update the ignoreAtRules array in .stylelintrc.js (the ignoreAtRules setting) to
include 'utility' alongside the existing entries so Stylelint allows `@utility`
no-scrollbar in src/tailwind.css.

In `@src/tailwind.css`:
- Around line 42-49: Move the block of Tailwind imports and the `@config`
statement so they appear before any other at-rules: relocate the lines
containing "@import 'tailwindcss' prefix(tw);", "@import 'tw-animate-css';",
"@import 'shadcn/tailwind.css';", "@import
'@fontsource-variable/ibm-plex-sans';" and the "@config
'../tailwind.config.ts';" so they come at the very top of the stylesheet, ahead
of the "@layer base" and any "@utility" blocks; preserve the existing comments
and ordering of those imports when moving them.

---

Nitpick comments:
In `@AGENTS.md`:
- Line 58: The negative example in the Tailwind prefix guidance mixes two issues
(wrong variant order and an old prefix form); update the negative example to
isolate the variant-order problem by replacing the current example that uses the
obsolete prefix with the same correct prefix but wrong order (use
"hover:tw:px-3" as the negative example) and keep the positive example
"tw:hover:px-3"; reference the Tailwind prefix convention in src/tailwind.css
and the configuration in tailwind.config.ts when making the change.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2d4a02f5-4cd4-4d1f-9dd6-4b02065619fb

📥 Commits

Reviewing files that changed from the base of the PR and between 74bd141 and 119a4bf.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (19)

• .stylelintrc.js
• AGENTS.md
• package.json
• postcss.config.ts
• src/__tests__/components/ContinuousView.test.tsx
• src/__tests__/components/PhraseBox.test.tsx
• src/components/ContinuousScrollToggle.tsx
• src/components/ContinuousView.tsx
• src/components/Interlinearizer.tsx
• src/components/InterlinearizerLoader.tsx
• src/components/PhraseBox.tsx
• src/components/ScriptureNavControls.tsx
• src/components/SegmentView.tsx
• src/components/TokenChip.tsx
• src/hooks/useOptimisticBooleanSetting.ts
• src/interlinearizer.web-view.tsx
• src/tailwind.css
• tailwind.config.ts
• webpack/web-view-resolve-webpack-plugin.ts

[alex-rawlings-yyc]

@alex-rawlings-yyc reviewed 20 files and all commit messages, and resolved 2 discussions.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on imnasnainaec, jasonleenaylor, and myieye).

[alex-rawlings-yyc]

@alex-rawlings-yyc reviewed 3 files and all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on imnasnainaec and jasonleenaylor).

[imnasnainaec]

@imnasnainaec reviewed 20 files and all commit messages, and made 1 comment.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on alex-rawlings-yyc and jasonleenaylor).

---

a discussion (no related file):
This looks good, but wouldn't build for me. I had to delete both node_modules/ and package-lock.json and run npm i to regenerate package-lock.json (and also run npm run core:reset for good measure), and then it worked.

[alex-rawlings-yyc]

Previously, imnasnainaec (D. Ror.) wrote…

This looks good, but wouldn't build for me. I had to delete both node_modules/ and package-lock.json and run npm i to regenerate package-lock.json (and also run npm run core:reset for good measure), and then it worked.

Are there changes here that caused that as far as you can tell?

[imnasnainaec]

Previously, imnasnainaec (D. Ror.) wrote…
Are there changes here that caused that as far as you can tell?

I'm not sure, but it was webpack related. While trying to pin down the problem, I found that at least running npm run build:web-view.ts failed. (Even though the build failed, the menu item was successfully added.)

In any case, I'm suggesting you regenerate package-lock.json as part of this pr. I think that will be our usual practice when updating from the template.

[alex-rawlings-yyc]

I think we may just have to advise that people run the npm run core:reset when they update.

The current package-lock.json in this pr was generated from running npm install.

Good to merge for now?

[imnasnainaec]

I think we may just have to advise that people run the npm run core:reset when they update.

The current package-lock.json in this pr was generated from running npm install.

Good to merge for now?

Just running npm run core:reset wasn't enough to fix it for me. When you ran npm install, did you delete the package-lock.json and node-modules/ first?

[alex-rawlings-yyc]

Nope. Very odd

[alex-rawlings-yyc]

Perhaps we should add a script that runs

rm -rf node_modules package-lock.json
npm install

Or perhaps just tell people to run that after template updates? I can't think of any other way to fix this

[alex-rawlings-yyc]

I reverted to latest main commit, ran npm ci, ran npm run build, changed to this branch, ran npm run build (which failed, as expected), ran npm i, ran npm run build again, and had no issues. I'm flabbergasted. Can you share some output?

[imnasnainaec]

I did a fresh install for both core and this branch and build broke again (see below). One possible difference is that I have yalc set up locally. I'll work on a script for deleting the node-module folders and the extension's package-lock.json then reinstalling (to be used when updating from the extenion).

paranext\interlinearizer-extension> npm run build:web-view

> interlinearizer@0.0.1 build:web-view
> webpack --config ./webpack/webpack.config.web-view.ts

asset src\temp-build\interlinearizer.web-view.js 2.37 KiB [emitted] (name: src\interlinearizer.web-view.tsx)
./src/interlinearizer.web-view.tsx 39 bytes [not cacheable] [built] [code generated] [1 error]

ERROR in ./src/interlinearizer.web-view.tsx
Module build failed (from ./node_modules/swc-loader/src/index.js):
Error: Failed to load native binding
    at Object.<anonymous> (C:\Users\danie\paranext\interlinearizer-extension\node_modules\@swc\core\binding.js:333:11)
    at Module._compile (node:internal/modules/cjs/loader:1706:14)
    at node:internal/modules/cjs/loader:1839:10
    at Object.require.extensions.<computed> [as .js] (C:\Users\danie\paranext\interlinearizer-extension\node_modules\ts-node\src\index.ts:1608:43)
    at Module.load (node:internal/modules/cjs/loader:1441:32)
    at Function._load (node:internal/modules/cjs/loader:1263:12)
    at TracingChannel.traceSync (node:diagnostics_channel:328:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:237:24)
    at Module.require (node:internal/modules/cjs/loader:1463:12)
    at require (node:internal/modules/helpers:147:16)

webView (webpack 5.106.2) compiled with 1 error in 86 ms

paranext\interlinearizer-extension> npm run build:main    

> interlinearizer@0.0.1 build:main
> webpack --config ./webpack/webpack.config.main.ts

assets by path contributions/*.json 1.84 KiB
  asset contributions/menus.json 850 bytes [emitted] [from: contributions/menus.json] [copied]
  asset contributions/localizedStrings.json 700 bytes [emitted] [from: contributions/localizedStrings.json] [copied]
  asset contributions/projectSettings.json 329 bytes [emitted] [from: contributions/projectSettings.json] [copied]
  asset contributions/settings.json 3 bytes [emitted] [from: contributions/settings.json] [copied]
  asset contributions/themes.json 3 bytes [emitted] [from: contributions/themes.json] [copied]
assets by path *.json 5.27 KiB
  asset package.json 4.71 KiB [emitted] [from: package.json] [copied]
  asset manifest.json 575 bytes [emitted] [from: manifest.json] [copied]
assets by path assets/ 511 bytes
  asset assets/displayData.json 386 bytes [emitted] [from: assets/displayData.json] [copied]
  asset assets/descriptions/description-en.md 125 bytes [emitted] [from: assets/descriptions/description-en.md] [copied]
asset src/types/interlinearizer.d.ts 39.5 KiB [emitted] [from: src/types/interlinearizer.d.ts] [copied]
asset ./src/main.js 2.41 KiB [emitted] (name: main)
./src/main.ts 39 bytes [not cacheable] [built] [code generated] [1 error]

ERROR in ./src/main.ts
Module build failed (from ./node_modules/swc-loader/src/index.js):
Error: Failed to load native binding
    at Object.<anonymous> (C:\Users\danie\paranext\interlinearizer-extension\node_modules\@swc\core\binding.js:333:11)
    at Module._compile (node:internal/modules/cjs/loader:1706:14)
    at node:internal/modules/cjs/loader:1839:10
    at Object.require.extensions.<computed> [as .js] (C:\Users\danie\paranext\interlinearizer-extension\node_modules\ts-node\src\index.ts:1608:43)
    at Module.load (node:internal/modules/cjs/loader:1441:32)
    at Function._load (node:internal/modules/cjs/loader:1263:12)
    at TracingChannel.traceSync (node:diagnostics_channel:328:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:237:24)
    at Module.require (node:internal/modules/cjs/loader:1463:12)
    at require (node:internal/modules/helpers:147:16)

main (webpack 5.106.2) compiled with 1 error in 98 ms

[imnasnainaec]

@imnasnainaec reviewed 5 files and all commit messages, and resolved 1 discussion.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on jasonleenaylor).

[alex-rawlings-yyc]

@alex-rawlings-yyc reviewed 10 files and all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on imnasnainaec and jasonleenaylor).

[alex-rawlings-yyc]

@alex-rawlings-yyc reviewed 1 file and all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on imnasnainaec and jasonleenaylor).

[imnasnainaec]

@imnasnainaec reviewed 5 files and all commit messages.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on jasonleenaylor).