Repository navigation
fix(build): have each chunk import its stylesheet - #132
Merged
Merged
Conversation
Since #124 the styles are emitted as stylesheets, but nothing imports them and the package does not export them, so an app bundling the library gets a viewer with none of its styles: in the server the image editor is zero pixels tall and the Video.js controls collapse. inlineCSS makes every chunk import its own stylesheet, for the app's bundler to load with it. The plugin puts that import at the top of the chunk, ahead of the image editor's own stylesheet, so the app loads the editor's `.image-editor` after the viewer's override of it and the override lost. It now wins on specificity rather than on order. Assisted-by: ClaudeCode:claude-opus-5-5 Signed-off-by: John Molakvoæ <14975046+skjnldsv@users.noreply.github.com>
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #132 +/- ##
=======================================
Coverage 92.82% 92.82%
=======================================
Files 47 47
Lines 4069 4069
Branches 813 813
=======================================
Hits 3777 3777
Misses 273 273
Partials 19 19 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Since #124, the build emits each chunk's styles as a stylesheet, but nothing imports them and
exportsdoesn't expose them. An app bundling the library gets a viewer with none of its styles. In the server, the image editor is 0px tall, the Video.js controls collapse, and the viewer falls back to NcModal's layout.inlineCSS: truemakes each chunk import its own stylesheet, and the server's Vite build then loads it with the chunk. That has one side effect: the import lands at the top of the chunk, ahead of@nextcloud/image-editor/style. The server then loads the editor's.image-editor { position: relative; height: 100% }after our.viewer__image-editor { position: fixed; inset: 0 }, and with equal specificity ours lost. It now uses.image-editor.viewer__image-editor. That collapse is what made me switch to injected CSS in September; the bundler was never the problem.Checked in the server, with this build in a
masterinstance and the frontend rebuilt: the editor goes from 1280×0 to 1280×800, and the video controls and the viewer's layout are back. Any other rule of ours that only beats a dependency by coming later would break the same way. I found none in what I opened, but I haven't gone through every scoped style.👾 This pull request was assisted by Claude Code, commits carry an
Assisted-bytrailer.