Skip to content

fix(vite-plugin): properly remove css file from bundle when file is below inlineThreshold #299

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

Open
mywill wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(vite-plugin): properly remove css file from bundle when file is below inlineThreshold #299

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3cc634d
fix(vite-plugin): properly remove css file from bundle when file is b…
mywill Apr 13, 2026
b8a312b
Merge branch 'main' into fix/vite-plugin-inline-threshold
mywill Jun 25, 2026
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
6 changes: 3 additions & 3 deletions packages/vite-plugin-beasties/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,10 +83,10 @@ export function beasties(options: ViteBeastiesOptions = {}): Plugin {
}

const originalCheckInline = beastiesInstance.checkInlineThreshold.bind(beastiesInstance)
beastiesInstance.checkInlineThreshold = function checkInlineThreshold(style, before, sheetInverse) {
const isStyleInlined = originalCheckInline(style, before, sheetInverse)
beastiesInstance.checkInlineThreshold = function checkInlineThreshold(link, style, sheet) {
const isStyleInlined = originalCheckInline(link, style, sheet)

if (isStyleInlined || !sheetInverse.length) {
if (isStyleInlined || !sheet.length) {
Comment on lines +86 to +89

@coderabbitai coderabbitai Bot Apr 13, 2026 •
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Inspect where and how checkInlineThreshold is called, and whether
# an empty `sheet` can occur without full inlining/link removal.
rg -n -C6 '\bcheckInlineThreshold\s*\(' packages/beasties/src/index.ts packages/vite-plugin-beasties/src/index.ts
rg -n -C6 '\binlineThreshold\b|\blink\.remove\s*\(' packages/beasties/src/index.ts

Repository: danielroe/beasties

Length of output: 3484

Condition at line 89 is unsafe and causes broken references when stylesheets are empty but not inlined.

The || !sheet.length clause deletes bundle assets unconditionally when the sheet is empty, even when inlineThreshold did not trigger inlining. This leaves the HTML with a <link> tag pointing to a deleted asset.

The condition must be narrowed to:

if (isStyleInlined) {

Only delete the asset when the original checkInlineThreshold actually inlined the stylesheet (returned true).

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@packages/vite-plugin-beasties/src/index.ts` around lines 86 - 89, The current
condition in beastiesInstance.checkInlineThreshold uses "if (isStyleInlined ||
!sheet.length)" which causes assets to be deleted when the stylesheet is empty
even if originalCheckInline did not inline it; change the guard to only check
the inlining result by replacing that condition with "if (isStyleInlined)" so
that deletion logic runs only when originalCheckInline returned true (refer to
beastiesInstance.checkInlineThreshold and originalCheckInline in your diff).

@mywill mywill Apr 13, 2026 •
edited
Loading

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

So i can look to change this but i was keeping the logic the same as that was not the issue i was fixing. I don't think this would delete anything important as the sheet length would have to be of length 0 which would be an empty resource so would be something that shouldn't get bundled anyway

@coderabbitai coderabbitai Bot Apr 13, 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.

@mywill, you make a valid point. Looking more carefully at the diff, the || !sheet.length clause is pre-existing behavior — the old code had || !sheetInverse.length (checking the third parameter), and the new code has || !sheet.length (still checking the third parameter, just with the corrected name). This PR only renames the parameters to match the actual checkInlineThreshold(link, style, sheet) signature; the logic itself is unchanged.

Your reasoning is also sound: if sheet.length === 0, the stylesheet is empty, and removing an empty CSS asset from the bundle is a safe cleanup — there's nothing meaningful left to serve. My concern was overstated for this PR. I'll withdraw it.

( ˶ᵔ ᵕ ᵔ˶ )

// @ts-expect-error internal property
const name = style.$$name.replace(LEADING_SLASH_RE, '') as string
if (name in bundle && bundle[name]!.type === 'asset') {
Expand Down
21 changes: 21 additions & 0 deletions packages/vite-plugin-beasties/test/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,27 @@ describe('vite-plugin-beasties', () => {
expect(otherHtml).not.toContain('<style>.test-content')
})

it('inlines entire stylesheet when below inlineThreshold', async () => {
const { readOutput, output } = await runViteBuild({
options: {
inlineThreshold: 131072,
},
})
const html = readOutput('index.html')

// CSS should be fully inlined
expect(html).toContain('<style>')
const hasCssColor = html?.includes('color: blue') || html?.includes('color:#00f')
expect(hasCssColor).toBe(true)

// No external CSS file should remain in the bundle
const cssFile = output.find(file => file.fileName.endsWith('.css'))
expect(cssFile).toBeUndefined()

// No stylesheet link should remain in the HTML
expect(html).not.toContain('<link rel="stylesheet"')
})

it('handles errors gracefully', async () => {
const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {})
const errorSpy = vi.spyOn(Beasties.prototype, 'process').mockImplementation(() => {
Expand Down