Skip to content

Commit aa2c32e

Browse files
committed
docs(v7): address Copilot review on PR #1005
- text-overflow: make the required companion line limit explicit (sections/v7/native.mdx, public/llms.txt, utils/cssCompat.ts). RN's ellipsizeMode is a no-op without numberOfLines, so authors need line-clamp or text-wrap: nowrap alongside text-overflow. - overscroll-behavior: drop `chain` from the summary. It is not a valid CSS keyword; the spec only accepts auto | contain | none. - border-radius: downgrade v6, iosStock, androidStock to `partial` to reflect that only v7 accepts the slash-separated CSS grammar (when circular). Stock RN has no per-axis radius surface. - AGENTS.md: remove the contradiction between the public-docs rule and the matrix exception. Matrix follows the same no-mechanism rule, with one narrow exception for naming a public stock-RN prop when explaining version skew.
1 parent 24bdee2 commit aa2c32e

4 files changed

Lines changed: 11 additions & 10 deletions

File tree

AGENTS.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@ Gotchas (things you cannot discover by reading the code alone)
4949
- Blog posts are assembled at build time by `utils/blog.server.ts` from MDX `meta` exports. No JSON index.
5050
- Blog Bluesky comments are opt-in via `blueskyPostUrl` in MDX `meta`. Auto-discovery is intentionally disabled (Bluesky closed public `searchPosts`). `BlogComments.tsx` overrides hashed CSS-Module selectors via `[class*='_name_']` matches so overrides survive package upgrades.
5151
- CSS compatibility matrix (`utils/cssCompat.ts`) v6/v7 columns describe combined-platform native behavior. If iOS stock = yes but Android stock = no, v7 should be `partial`, not `no`. `prUrls` is keyed per column; only set entries where status is `no` and an upstream PR exists.
52-
- Public-facing docs (`sections/`, `public/llms.txt`, blog posts, compatibility matrix entries) describe user-observable behavior only: what is supported, what isn't, what to author. Skip mechanism (how the polyfill maps, what prop it lifts, internal field names, parser / handler / registry mechanics, ABI prefixes, dev-warn IDs, sentinel names).
53-
- The compatibility matrix has slightly more leeway because it explains version skew. When a matrix entry must mention a stock-RN API to explain why a CSS feature works, name the public prop (`numberOfLines`, `trackColor`) rather than the internal call site. Caveats are still gotchas the author needs to act on, not internals.
52+
- Public-facing docs (`sections/`, `public/llms.txt`, blog posts) describe user-observable behavior only: what is supported, what isn't, what to author. Skip mechanism (how the polyfill maps, what prop it lifts, internal field names, parser / handler / registry mechanics, ABI prefixes, dev-warn IDs, sentinel names).
53+
- The compatibility matrix (`utils/cssCompat.ts`) follows the same no-mechanism rule, with one narrow exception: when explaining version skew, an entry may name a public stock-RN prop (`numberOfLines`, `trackColor`) instead of the CSS-side surface, because the matrix exists to compare authoring across versions. Everything else (parser, handler, registry, ABI prefixes, dev-warn IDs, sentinel names) is still off-limits, and caveats are gotchas the author needs to act on, not internals.
5454

5555
Prose rules (mirrored from `~/code/styled-components/AGENTS.md`)
5656
- American English in all prose: color, behavior, honor, recognize, serialize, center, organize, etc. Keep original spelling only inside verbatim quotes.

public/llms.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ Logical shorthands work as authored: `margin-inline`, `margin-block`, `padding-i
5959

6060
`place-items` and `place-self` shorthands work for the align axis (Yoga doesn't have `justify-items` / `justify-self`; the justify side is a no-op on native but reaches rn-web).
6161

62-
`field-sizing: content` on `<TextInput>` auto-grows the field to its content. `interactivity: inert` (CSS UI 5) suppresses interaction and hides the subtree from accessibility services. `text-overflow: ellipsis | clip` truncates `<Text>` (pair with `line-clamp: N` for multi-line). `overscroll-behavior: contain | none` disables overscroll on `ScrollView` / `FlatList`; `scrollbar-width: none` hides scroll indicators. `accent-color` tints `<Switch>` (`auto` picks up the platform accent color). `direction: ltr | rtl` controls `<Text>` bidi. `styled.ScrollView` on native defaults to `flex-shrink: 0` so explicit `width:` / `height:` pin reliably inside a flex parent (override with `flex-shrink: 1` if you need it).
62+
`field-sizing: content` on `<TextInput>` auto-grows the field to its content. `interactivity: inert` (CSS UI 5) suppresses interaction and hides the subtree from accessibility services. `text-overflow: ellipsis | clip` truncates `<Text>` once a line limit is set; pair with `line-clamp: N` (or `text-wrap: nowrap` for one line). Without a line limit RN has no line to ellipsize and the value is a no-op. `overscroll-behavior: contain | none` disables overscroll on `ScrollView` / `FlatList`; `scrollbar-width: none` hides scroll indicators. `accent-color` tints `<Switch>` (`auto` picks up the platform accent color). `direction: ltr | rtl` controls `<Text>` bidi. `styled.ScrollView` on native defaults to `flex-shrink: 0` so explicit `width:` / `height:` pin reliably inside a flex parent (override with `flex-shrink: 1` if you need it).
6363

6464
`background-image: linear-gradient(...)` and `radial-gradient(...)` render via React Native's experimental gradient parser (RN 0.85+). `filter: blur(4px) saturate(1.5)` and the full filter-function chain work. See the iOS setup note below for filters that need an explicit opt-in. `box-shadow` with spread and inset round-trips as a string.
6565

sections/v7/native.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const Card = styled.View`
3838
- **`place-items`** and **`place-self`** for the align axis.
3939
- **`field-sizing: content`** auto-grows a `<TextInput>` to its content.
4040
- **`interactivity: inert`** suppresses interaction and hides the subtree from screen readers.
41-
- **`text-overflow: ellipsis | clip`** truncates `<Text>`; pair with `line-clamp: N` for multi-line.
41+
- **`text-overflow: ellipsis | clip`** truncates `<Text>` once a line limit is set. Pair with `line-clamp: N` (or `text-wrap: nowrap` for one line); without a line limit RN has no line to ellipsize and the value is a no-op.
4242
- **`overscroll-behavior: contain | none`** disables overscroll on `ScrollView` / `FlatList`. **`scrollbar-width: none`** hides scroll indicators.
4343
- **`accent-color`** tints `<Switch>` (`auto` picks up the platform accent color).
4444
- **`styled.ScrollView`** on native defaults to `flex-shrink: 0` so explicit `width:` / `height:` pin reliably inside a flex parent. Override with `flex-shrink: 1` if you need it.

utils/cssCompat.ts

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -755,12 +755,12 @@ export const COMPAT_ENTRIES: CompatEntry[] = [
755755
id: 'border-radius',
756756
title: 'border-radius',
757757
category: 'props',
758-
nativeV6: 'yes',
758+
nativeV6: 'partial',
759759
nativeV7: 'yes',
760-
iosStock: 'yes',
761-
androidStock: 'yes',
760+
iosStock: 'partial',
761+
androidStock: 'partial',
762762
summary:
763-
'Pass-through everywhere. v7 also accepts the slash-separated form (`10px / 10px`) on native when it resolves to a circular radius; truly elliptical combinations (different horizontal and vertical radii) drop with a dev-warn since RN has no per-axis radius surface.',
763+
'Basic single-value and per-corner longhands pass through everywhere. v7 additionally accepts the slash-separated CSS grammar (`10px / 10px`) on native when it resolves to a circular radius; v6 and stock RN drop the slash form because RN has no per-axis radius surface to map it to. Truly elliptical combinations (different horizontal and vertical radii) drop in v7 too, with a dev-warn.',
764764
},
765765
{
766766
id: 'box-sizing',
@@ -1137,9 +1137,10 @@ export const COMPAT_ENTRIES: CompatEntry[] = [
11371137
iosStock: 'no',
11381138
androidStock: 'no',
11391139
summary:
1140-
"Pass-through on web. v7 supports `text-overflow: ellipsis | clip` on `<Text>`. Pair with `line-clamp: N` for multi-line ellipsizing. The spec's two-value form (`text-overflow: <start> <end>`) and string-value overflow markers are not supported on native.",
1140+
"Pass-through on web. v7 supports `text-overflow: ellipsis | clip` on `<Text>` once a line limit is set; pair with `line-clamp: N` (or `text-wrap: nowrap` for one line). Without a line limit there is no line to ellipsize and the value is a no-op. The spec's two-value form (`text-overflow: <start> <end>`) and string-value overflow markers are not supported on native.",
11411141
caveats: [
11421142
'Only `<Text>` consumes it on native.',
1143+
'Requires a companion line limit (`line-clamp`, or `text-wrap: nowrap` for one line). Without one, RN has no line to ellipsize and the value is dropped.',
11431144
'`head` and `middle` ellipsize positions are RN-only (no CSS analog); reach them via the `numberOfLines` and `ellipsizeMode` props directly.',
11441145
],
11451146
},
@@ -1854,7 +1855,7 @@ export const COMPAT_ENTRIES: CompatEntry[] = [
18541855
iosStock: 'no',
18551856
androidStock: 'no',
18561857
summary:
1857-
'Pass-through on web. v7 supports `overscroll-behavior: contain | none` on `<ScrollView>` and `<FlatList>`, disabling iOS rubber-banding and the Android edge glow. `auto` and `chain` use the platform defaults.',
1858+
'Pass-through on web. v7 supports `overscroll-behavior: contain | none` on `<ScrollView>` and `<FlatList>`, disabling iOS rubber-banding and the Android edge glow. `auto` uses the platform defaults.',
18581859
caveats: [
18591860
'The `overscroll-behavior-x` / `-y` longhands are not split out; RN has no per-axis overscroll surface.',
18601861
'Only scrollable primitives consume it. On a plain `View`, the declaration has no effect.',

0 commit comments

Comments
 (0)