fix: resolve tailwind import for production build

[imnasnainaec]

Fixes cryptic npm run build:production failure:

[...]
main:
  assets by status 1.49 MiB [cached] 18 assets
  orphan modules 1.39 MiB [orphan] 5 modules
  runtime modules 1.34 KiB 4 modules
  built modules 1.45 MiB [built]
    ./src/main.ts + 5 modules 1.45 MiB [not cacheable] [built] [code generated]
    ./src/interlinearizer.web-view.scss?inline 1 bytes [built] [code generated] [1 error]

  ERROR in ./src/interlinearizer.web-view.scss?inline
  Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):

  SyntaxError

  (1:1) from "tailwindcss" plugin: C:\Users\danie\paranext\interlinearizer-extension\src\interlinearizer.web-view.scss Cannot apply utility class `tw:relative` because the `tw` variant does not exist.
[...]

---

Devin: https://app.devin.ai/review/sillsdev/interlinearizer-extension/pull/181

---

This change is 

Summary by CodeRabbit

• Style
  • Updated stylesheet imports to improve compatibility with the application’s styling setup.

[coderabbitai]

📝 Walkthrough

Walkthrough

The web-view stylesheet now imports tailwind.css directly instead of using Tailwind’s SCSS module import.

Changes

Tailwind stylesheet integration

Layer / File(s)	Summary
Update Tailwind stylesheet inclusion src/interlinearizer.web-view.scss	Replaces @use 'tailwind'; with @import './tailwind.css';.

Estimated code review effort: 1 (Trivial) | ~2 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the Tailwind import fix needed for the production build.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/build-production-tw-err

---

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.}

[coderabbitai]

Actionable comments posted: 1

🤖 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 `@src/interlinearizer.web-view.scss`:
- Line 1: Update the WebView style-loading flow for the inline SCSS source near
interlinearizer.web-view.scss so it passes through the existing CSS/Tailwind
loader chain without the ?inline query, ensuring `@import` './tailwind.css' and
its Tailwind directives are resolved before the resulting styles string is
provided to webViews.openWebView.

🪄 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 Plus

Run ID: c31481c5-d676-4afb-9eb5-b37c5cb224c0

📥 Commits

Reviewing files that changed from the base of the PR and between 54346dd and 09d8524.

📒 Files selected for processing (1)

• src/interlinearizer.web-view.scss

[coderabbitai]

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
rg -n "postcss-import|tailwind\.css|interlinearizer\.web-view\.scss" webpack src

Repository: sillsdev/interlinearizer-extension

Length of output: 631

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf 'Tracked files of interest:\n'
git ls-files | rg '(^|/)(webpack|package\.json|tailwind\.config\.(cjs|mjs|js|ts)|postcss\.config\.(cjs|mjs|js|ts))$|src/(main\.ts|interlinearizer\.web-view\.scss|tailwind\.css)$' || true

printf '\nwebpack candidates and relevant snippets:\n'
for f in $(git ls-files webpack | sed 's#.# `#g`' | head -50); do
  echo "--- $f"
  wc -l "$f"
  rg -n "`@inline`|inline=true|resolve|postcss|tailwind|scss|css" "$f" || true
done

printf '\npackage/config relevant snippets:\n'
for f in package.json webpack/tailwind.config.js webpack/postcss.config.js src/tailwind.css src/interlinearizer.web-view.scss; do
  if [ -f "$f" ]; then
    echo "--- $f"
    sed -n '1,220p' "$f"
  fi
done

Repository: sillsdev/interlinearizer-extension

Length of output: 13483

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

files="package.json webpack/tailwind.config.js webpack/postcss.config.js src/tailwind.css src/interlinearizer.web-view.scss"
for f in $files; do
  if [ -f "$f" ]; then echo "--- $f"; sed -n '1,240p' "$f"; fi
done

printf '\nWebpack candidates summary:\n'
git ls-files webpack | while read -r f; do
  echo "--- $f ($(wc -l < "$f") lines)"
  rg -n "postcss|sass|scss|css|inline|resolve|tailwind|rules|module" "$f" || true
done

Repository: sillsdev/interlinearizer-extension

Length of output: 19003

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf 'Relevant webpack base rule sections:\n'
sed -n '45,145p' webpack/webpack.config.base.ts

printf '\nPostCSS config:\n'
if [ -f postcss.config.ts ]; then sed -n '1,160p' postcss.config.ts; fi

printf '\nMain WebView entry usage:\n'
sed -n '1,80p' src/main.ts

printf '\nWebView config merge:\n'
sed -n '1,120p' webpack/webpack.config.web-view.ts

Repository: sillsdev/interlinearizer-extension

Length of output: 8895

---

🌐 Web query:

Sass CSS @importpreserves CSS@importCSS modules@import style-loader css modules

💡 Result:

The handling of @import in Sass and CSS modules involves distinct mechanisms that operate at different stages of the build process. Sass @import Sass extends the standard CSS @import rule [1][2]. When Sass encounters an @import, it attempts to resolve and bundle the target file at compile time, incorporating its mixins, functions, variables, and CSS directly into the output [1][2]. If the imported file is identified as "plain CSS" (e.g., ends in.css, uses url, or is an absolute URL), Sass treats it as a standard CSS @import, leaving it in the final CSS output for the browser to resolve at runtime [1][2][3]. Note that the @import rule in Sass is officially deprecated in favor of @use [4][5]. CSS Modules and css-loader When using CSS Modules with Webpack's css-loader, the @import rule behaves differently. The css-loader interprets @import statements as module dependencies, similar to import or require calls in JavaScript [6][7]. This allows the build system to process, resolve, and bundle the imported CSS file, ensuring it is included in the final output rather than left as a runtime HTTP request [6]. Key Considerations for Integration - Build Pipeline: If you are using sass-loader followed by css-loader, remember that sass-loader compiles Sass-specific @import rules into a single file before css-loader processes the remaining CSS [7][8]. - Configuration: To ensure that postcss-loader or other pre-processing tools correctly handle imported CSS files, you must configure the importLoaders option in css-loader [6][7]. This option specifies the number of loaders that should be applied to @import resources before the css-loader processes them [6][8]. For example, setting importLoaders: 2 ensures that both postcss-loader and sass-loader are applied to imported CSS files [7][8]. - CSS Modules Scope: While CSS Modules enable locally scoped class names, they do not automatically apply this scoping to imported CSS unless the loader configuration specifically enables CSS Modules for those imported files [6][9]. Top results: [1][6][7][8]

Citations:

• 1: https://sass-lang.com/documentation/at-rules/import/
• 2: https://www.sasscss.com/documentation/at-rules/import
• 3: https://github.com/sass/language/blob/main/accepted/css-imports.md
• 4: https://stackoverflow.com/questions/40976874/what-is-the-difference-between-css-import-and-sass-scss-import
• 5: https://sass-lang.com/documentation/breaking-changes/import/
• 6: https://docs.webpack.js.org/loaders/css-loader
• 7: https://github.com/webpack-contrib/css-loader/blob/master/README.md
• 8: https://registry.npmjs.org/css-loader
• 9: https://webpack.js.org/loaders/style-loader/

---

Inline tailwind.css for the WebView styles.

#web-view-resolvers handles React WebView files, but the inline SCSS used by this WebView is passed as a string with ?inline. Sass treats @import './tailwind.css' as a plain CSS import and leaves it unresolved, so Tailwind directives such as @import 'tailwindcss' prefix(tw) stay in the emitted styles string and Tailwind utilities won’t apply at runtime. Process this source through a loader chain that resolves the CSS imports without ?inline before passing it to webViews.openWebView.

🤖 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 `@src/interlinearizer.web-view.scss` at line 1, Update the WebView
style-loading flow for the inline SCSS source near interlinearizer.web-view.scss
so it passes through the existing CSS/Tailwind loader chain without the ?inline
query, ensuring `@import` './tailwind.css' and its Tailwind directives are
resolved before the resulting styles string is provided to webViews.openWebView.