Skip to content

Conversation

@kinboyw
Copy link

@kinboyw kinboyw commented Dec 18, 2025

Summary

This PR implements CSS file chunking for large files and unifies the CSS data structure to use an array format for both single files and multiple chunks.

Changes

  • ✅ Add splitCssIntoChunks() method to split large CSS files at rule boundaries (>500KB threshold)
  • ✅ Unify CSS data structure: use array format Array<{ url: string, hash: string }> for both single files and multiple chunks
  • ✅ Fix CSS byte length calculation using TextEncoder for accurate UTF-8 encoding (fixes ERR_CONTENT_LENGTH_MISMATCH)
  • ✅ Generate unique hash for each chunk (includes chunk index) to ensure different filenames on server
  • ✅ Add backward compatibility: auto-convert old CSS format to new array format
  • ✅ Fix empty array check in processCss() to properly handle empty cssResult arrays

Files modified:

  • src/api.ts: Update CheckFilesResult interface to use array format
  • src/NoteTemplate.ts: Update css field to use array format
  • src/note.ts: Add chunking logic and update CSS processing

Benefits

  • 🚀 Large CSS files are automatically split into smaller chunks, improving page load performance
  • 🔧 Unified array format simplifies server-side processing
  • ✅ Each chunk has unique hash for proper server-side validation
  • 🔄 Backward compatible with existing shared notes

Testing

  • Tested with large CSS files (>500KB) - verified chunking works correctly
  • Tested backward compatibility with existing shared notes
  • Verified CSS chunks have unique URLs and hashes

Related Issues

Fixes issues with:

  • Large CSS files blocking page load
  • ERR_CONTENT_LENGTH_MISMATCH for large CSS files

Technical Details

CSS Chunking Algorithm

  • Splits CSS at rule boundaries (after }) to avoid breaking CSS syntax
  • Uses TextEncoder for accurate byte size calculation
  • Includes fallback to force split if a chunk becomes excessively large (1.5x maxChunkSize)
  • Each chunk gets a unique hash: sha1(chunkIndex-chunkContentHash-totalChunks)

- Fix TypeScript error: add null check for previewMode.state
- Add detectMediaTypeFromSignature() method to detect image/video types from magic bytes
- Improve blob URL handling: detect media type before skipping
- Add Content-Type header detection for file types
- Improve file type validation: use detected type when URL extension is invalid
- Skip blob URLs only if they don't contain recognizable media files

This fixes the 415 Unsupported Media Type error when uploading notes with
code styler plugin enabled, which generates blob URLs for codeblock icons.

Fixes issues with:
- Code Styler plugin blob URLs causing 415 errors
- Invalid file type detection from blob URLs
- Missing file type detection for media files
This commit implements CSS file chunking for large files and unifies
the CSS data structure to use an array format for both single files
and multiple chunks.

Key changes:
- Add splitCssIntoChunks() method to split large CSS files (>500KB)
  at rule boundaries to avoid breaking CSS syntax
- Unify CSS data structure: use array format for both single files
  and multiple chunks in CheckFilesResult and NoteTemplate
- Fix CSS byte length calculation using TextEncoder for accurate
  UTF-8 encoding (fixes ERR_CONTENT_LENGTH_MISMATCH)
- Fix empty array check in processCss() to properly handle empty
  cssResult arrays
- Add backward compatibility: auto-convert old CSS format to new
  array format
- Generate unique hash for each chunk (includes chunk index) to
  ensure different filenames on server

Benefits:
- Large CSS files are automatically split into smaller chunks,
  improving page load performance
- Unified array format simplifies server-side processing
- Each chunk has unique hash for proper server-side validation
- Backward compatible with existing shared notes

Files changed:
- src/api.ts: Update CheckFilesResult interface to use array format
- src/NoteTemplate.ts: Update css field to use array format
- src/note.ts: Add chunking logic and update CSS processing
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.

1 participant