Repository navigation
fix(core): preserve repeated stylesheet imports - #6250
Conversation
Preview approval requiredThis pull request comes from a fork, so Mintlify won't build a preview until someone with write access approves commit |
miguel-heygen
left a comment
There was a problem hiding this comment.
Thanks for this. The fix is in the right place: the shared "already inlined" set becomes the chain of sheets currently being expanded, so repeated imports keep their own media condition and cascade position, and cycles are still cut. Seeding the set with the linked sheet itself also fixes a small extra case: a sheet that imports itself used to be inlined into itself once, and now appears once.
I ran the tests against the head of this branch and against main. The four new or changed tests fail on main and pass here, and they go through bundleToSingleHtml with a real <link>, which is the path renders take. I also checked a few more shapes: the same file imported twice with the same condition (both copies kept, which matches CSS), a cycle that does not go through the linked sheet (a -> b -> a is cut at a), and a shared file reached through both url() and string imports from different folders (both copies get the same rebased url()).
One non-blocking note: bundle size now grows with the number of import paths rather than the number of files. A tokens file imported by twenty component sheets is inlined twenty times, and deep diamond graphs grow exponentially with depth. That is what the browser applies too, so I would keep the behavior. A short line in the docs paragraph could save someone a surprise.
Verdict: APPROVE
Reasoning: The fix is small and correct for media conditions, cascade order and cycles, the tests fail on main and pass here through the real bundling path, and CI is green.
miguel-heygen
left a comment
There was a problem hiding this comment.
Thanks for adding the docs line. The new head only adds that note to docs/packages/core.mdx, and it reads well next to the existing @import paragraph. Nothing else changed since my last review, and CI is green here.
Verdict: APPROVE
Reasoning: The only change since the approved head is the docs note I suggested, CI is green and the branch merges cleanly with main.
What
Keep a composition's styles when several local CSS imports reference the same file. A linked sheet that imports
shared.cssfor print and then screen currently loses the screen rules when bundled.Why
The same 320 by 180 fixture was checked in Chrome with screen media. Its background is green in the authored page:
rgba(0, 0, 0, 0)ab57d0ee1bundlergba(0, 0, 0, 0)rgb(0, 128, 0)The input is
@import "shared.css" print;followed by@import "shared.css" screen;. The shared sheet sets the background to green. Two parent sheets importing that dependency under different media conditions fail the same way.Related work
Fixes #6249
#922/#923 added local import expansion and diamond deduplication. #4664 preserves conditions on stylesheet links. This corrects the recursive local import set. CSS import processing treats every occurrence as a separate stylesheet, so unconditional diamond imports also keep their cascade positions. Qualified imports and linked-font discovery in #5827 are outside this change.
Originally based on main
9aadc0b9b, whose compiler and parser trees match the measuredab57d0ee1baseline. Current mainb97de59c8has no changes to this PR's files.How
Track only stylesheets active in the current recursion chain, starting with the linked entry stylesheet. Stop actual cycles and expand each sibling import in place. The existing path checks, URL rebasing and media wrapping stay in the same path. Update the diamond regression to protect cascade order rather than deduplication. The docs also explain that repeated imports can increase bundle size.
Test plan
No full video render was run. Mintlify is unavailable locally; no dependencies were installed.