From a1a244b88482ee8b111b8ab710c118a033191747 Mon Sep 17 00:00:00 2001 From: owjs3901 Date: Sun, 15 Nov 2026 03:07:42 +0900 Subject: [PATCH] docs(extractor): explain why exported styled components keep markers 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 --- .changepacks/changepack_log_selector_markers_docs.json | 7 +++++++ apps/landing/src/app/(detail)/docs/limitations/page.mdx | 1 + libs/extractor/src/visit.rs | 9 ++++++++- 3 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 .changepacks/changepack_log_selector_markers_docs.json 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