Skip to content

docs(extractor): explain why exported styled components keep selector markers - #907

Merged
owjs3901 merged 1 commit into
mainfrom
fix/emotion-selector-markers
Nov 14, 2026
Merged

owjs3901 merged 1 commit into
mainfrom
fix/emotion-selector-markers

Conversation

@owjs3901

Copy link
Copy Markdown
Contributor

Summary

The audit flagged a decision (b) regression. Since #736 (70dac33), every styled component the file exports has an a--N marker class. In extractor__tests__emotion_component_selectors.snap, Parent has one even though no selector names it, while #730 had limited markers to components a selector references.

This PR leaves the behavior as it is and explains why. Removing these markers would break selectors that work today:

  • markers_of(name, exported, selected) gives an exported component one marker per export name, css::component_marker(export, index, filename). A module that imports it computes that same marker from the export when it selects the component (${Child} { ... }, [Child]) or extends it (styled(Child)). The imported_components_are_selected_by_the_class_their_module_gives snapshots cover this.
  • Each file is built on its own. The defining module never learns which modules import it, and in dev or incremental builds it is often compiled before or without them.
  • Only the element the component renders can carry the class. The importing module can write the selector, but it cannot add a class to elements that another module renders. Atomic style classes are shared between components, so they cannot stand in as the marker.

So a marker on an exported component can't wait until something references it. Components a file keeps to itself still get a marker only when a selector in the file names it, which is #730's behavior. The other marked class in that snapshot, Wide, carries Child's marker because it extends Child. That is Emotion's semantics, not an extra marker.

Changes:

  • Doc comment on markers_of recording the reason.
  • limitations page: a "Known limitations" entry describing the marker on exported components.

Refs #690

Test plan

  • cargo fmt --all -- --check (comment and docs only; no code path changes)
  • CI

🤖 Generated with Claude Code

Since #736 every exported styled component carries an `a--N` marker class,
which looked like a regression of #730 limiting markers to selected
components. It is needed: an importer selects or extends the component by
the marker it computes from the export, and the defining module is built
without knowing its importers, so only emitting the class up front works.
Document this on `markers_of` and in the limitations page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@codecov

codecov Bot commented Nov 14, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

Files with missing lines Coverage Δ
libs/extractor/src/visit.rs 100.00% <100.00%> (ø)
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@owjs3901
owjs3901 merged commit e60978e into main Nov 14, 2026
27 checks passed
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