Skip to content

fix(vite-plugin-angular): process styles in jit mode instead of returning raw output#2024

Merged
brandonroberts merged 1 commit into
betafrom
fix-vite-plugin-jit-styles
Dec 19, 2025
Merged

fix(vite-plugin-angular): process styles in jit mode instead of returning raw output#2024
brandonroberts merged 1 commit into
betafrom
fix-vite-plugin-jit-styles

Conversation

@brandonroberts

Copy link
Copy Markdown
Member

PR Checklist

Closes #2018

What is the new behavior?

When building in JIT mode, JIT styles are processed inline instead of returned as-is. This fixes an issue when building Storybook components with external component styles.

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

[optional] What gif best describes this PR or how it makes you feel?

@netlify

netlify Bot commented Dec 19, 2025

Copy link
Copy Markdown

Deploy Preview for analog-blog ready!

Name Link
🔨 Latest commit 2bc4317
🔍 Latest deploy log https://app.netlify.com/projects/analog-blog/deploys/694589397799790008c0882a
😎 Deploy Preview https://deploy-preview-2024--analog-blog.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Dec 19, 2025

Copy link
Copy Markdown

Deploy Preview for analog-docs ready!

Name Link
🔨 Latest commit 2bc4317
🔍 Latest deploy log https://app.netlify.com/projects/analog-docs/deploys/694589393bb26b0008bb4c7b
😎 Deploy Preview https://deploy-preview-2024--analog-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Dec 19, 2025

Copy link
Copy Markdown

Deploy Preview for analog-app ready!

Name Link
🔨 Latest commit 2bc4317
🔍 Latest deploy log https://app.netlify.com/projects/analog-app/deploys/6945893948d9fc0008d4ef86
😎 Deploy Preview https://deploy-preview-2024--analog-app.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@brandonroberts brandonroberts merged commit bcb6da9 into beta Dec 19, 2025
18 checks passed
@brandonroberts brandonroberts deleted the fix-vite-plugin-jit-styles branch December 19, 2025 17:44
AlonMiz pushed a commit to AlonMiz/analog that referenced this pull request Mar 1, 2026
The resolveId hook uses `??` (double question mark) for the style/template
suffix, producing URLs like `path??inline`. This is incorrect because:

- `?inline` → URL search params: `{ inline: '' }` ✅ (Vite recognizes this)
- `??inline` → URL search params: `{ '?inline': '' }` ❌ (Vite does NOT recognize this)

With `??inline`, Vite's CSS pipeline does not process the file, so SCSS/LESS
files are loaded as raw text without preprocessing. This causes production
Storybook builds to contain raw SCSS (e.g., `&.class-name` nesting) instead
of compiled CSS.

The fix changes `??` to `?` so Vite correctly identifies the file as an
inline CSS import and runs it through the CSS preprocessor pipeline.

Fixes the regression introduced in bcb6da9 (PR analogjs#2024).
AlonMiz pushed a commit to AlonMiz/analog that referenced this pull request Mar 1, 2026
The resolveId hook uses `??` (double question mark) for the style/template
suffix, producing URLs like `path??inline`. This is incorrect because:

- `?inline` → URL search params: `{ inline: '' }` ✅ (Vite recognizes this)
- `??inline` → URL search params: `{ '?inline': '' }` ❌ (Vite does NOT recognize this)

With `??inline`, Vite's CSS pipeline does not process the file, so SCSS/LESS
files are loaded as raw text without preprocessing in production builds.

Fixes the regression introduced in bcb6da9 (PR analogjs#2024).
Fixes analogjs#2094
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

SCSS from Angular libraries not preprocessed when building Storybook with Vite

1 participant