Skip to content

fix: resolve tailwind import for production build #181

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.

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Draft
imnasnainaec wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

fix: resolve tailwind import for production build #181

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion src/interlinearizer.web-view.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@use 'tailwind';
@import './tailwind.css';

@coderabbitai coderabbitai Bot Jul 28, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 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:

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.


html,
body,
Expand Down
Loading