diff --git a/.changepacks/changepack_log_selector_markers_docs.json b/.changepacks/changepack_log_selector_markers_docs.json new file mode 100644 index 000000000..1e267dd86 --- /dev/null +++ b/.changepacks/changepack_log_selector_markers_docs.json @@ -0,0 +1,7 @@ +{ + "changes": { + "bindings/devup-ui-wasm/package.json": "Patch" + }, + "note": "The limitations page documents why every exported styled component carries a component-selector marker class even when no selector in its file names it: a module importing it may select or extend it, and each file is built without knowing its importers. No runtime changes or new build errors.", + "date": "2026-11-15T00:00:00.000Z" +} diff --git a/apps/landing/src/app/(detail)/docs/limitations/page.mdx b/apps/landing/src/app/(detail)/docs/limitations/page.mdx index c92635565..66b87e2ae 100644 --- a/apps/landing/src/app/(detail)/docs/limitations/page.mdx +++ b/apps/landing/src/app/(detail)/docs/limitations/page.mdx @@ -87,6 +87,7 @@ A dynamic value such as `width` becomes a CSS variable set in `style`, so a comp ## Known limitations +- An exported styled component always carries one short marker class (`a--b`), even when no selector in its own file names it. A module importing it may select it (`${Child} { ... }`) or extend it, and each file is built without knowing which files import it, so the class has to be on the element from the start. A styled component the file keeps to itself carries a marker only when a selector names it. - A class, `keyframes` name or styled component defined in another module is not read as a build-time value: its name is only known once that file is built. Declare it in the file that uses it, or read it from a style prop. - `css()`, `globalCss()` and `keyframes()` have no element to set a CSS variable on, so a runtime value there is a build error. Move it to a style prop. - A styled-components or Emotion style function may read the theme only as `theme.a.b` (or `theme.a[2]`). Calls, whole-theme reads and runtime keys are build errors. diff --git a/libs/extractor/src/visit.rs b/libs/extractor/src/visit.rs index 3bc78081f..0c9f223cd 100644 --- a/libs/extractor/src/visit.rs +++ b/libs/extractor/src/visit.rs @@ -1302,7 +1302,14 @@ impl<'a> DevupVisitor<'a> { /// The classes other styles select the component bound to `name` by: one /// for each name the file exports it as, and a class of its own when it - /// is only selected here + /// is only selected here. + /// + /// An exported component carries its markers even when nothing here + /// selects it: a module importing it may select it (`${Child} { ... }`, + /// `[Child]`) or extend it, naming the same marker from the export, and + /// each module is built without knowing which modules import it. Only + /// the element the component renders can carry the class, so the marker + /// cannot wait for an importer to ask for it. fn markers_of(&mut self, name: &str, exported: bool, selected: bool) -> Vec<(String, usize)> { let mut markers: Vec<(String, usize)> = if exported { self.exports