docs(v7): native CanIUse + v7 docs pulled up to latest styled-components#1005
Merged
Conversation
New v7 surface reflected across the compatibility matrix and v7 docs: accent-color, overscroll-behavior, scrollbar-width, text-overflow, direction → writingDirection, font-size keyword parity, letter-spacing font-relative units, CSS Color 4 system-color fold inside box-shadow / filter / background / linear-gradient stops, animation-composition longhand, :nth-child(<an+b> of S), styled.ScrollView flex-shrink: 0 default, border-radius slash form, border-style hidden / mixed handling. Fixes verified against react-native 0.85.2: aspect-ratio slash form actually works natively without v7; mix-blend-mode iOS count is 15 non-normal modes, not 16. AGENTS.md gains rules: matrix entries describe author-facing behavior not internals (public RN prop names allowed); public docs strip mechanism; American English in all prose.
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Updates the v7 React Native documentation and compatibility matrix to reflect newer styled-components/native CSS polyfill support and stock React Native behavior.
Changes:
- Expands
utils/cssCompat.tswith updated v7 support claims, caveats, and React Native compatibility details. - Updates
/docs/v7native docs andpublic/llms.txtwith the new v7 native feature surface. - Adds AGENTS.md prose/documentation guidance for future docs edits.
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
utils/cssCompat.ts |
Updates compatibility matrix entries for v7 native CSS support and caveats. |
sections/v7/native.mdx |
Adds new v7 React Native feature highlights. |
public/llms.txt |
Mirrors v7 native feature guidance for LLM-readable docs. |
AGENTS.md |
Adds public-doc prose and compatibility-matrix authoring guidance. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| - **`place-items`** and **`place-self`** for the align axis. | ||
| - **`field-sizing: content`** auto-grows a `<TextInput>` to its content. | ||
| - **`interactivity: inert`** suppresses interaction and hides the subtree from screen readers. | ||
| - **`text-overflow: ellipsis | clip`** truncates `<Text>`; pair with `line-clamp: N` for multi-line. |
| `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). | ||
|
|
||
| `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. | ||
| `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` defaults to `flex-shrink: 0` so explicit `width:` / `height:` pin reliably inside a flex parent (opt back in with `flex-shrink: 1`). |
| iosStock: 'no', | ||
| androidStock: 'no', | ||
| summary: | ||
| "Pass-through on web. Stock React Native has no `textOverflow` style key; v7 also has no handler for it. Use `numberOfLines={N}` with `ellipsizeMode='tail' | 'head' | 'middle' | 'clip'` on the Text component, or `line-clamp: N` which v7 DOES polyfill (see the line-clamp entry).", | ||
| "Pass-through on web. Stock React Native has no `textOverflow` style key. v7 polyfills `text-overflow: ellipsis | clip` by lifting `ellipsizeMode` ('tail' or 'clip') as a top-level prop on `<Text>`. Pair with `line-clamp: N` (also polyfilled to `numberOfLines: N`) for multi-line ellipsizing. v7 does not implement the spec's two-value form (`text-overflow: <start> <end>`) or string-value overflow markers; those drop on native.", |
| iosStock: 'no', | ||
| androidStock: 'no', | ||
| summary: | ||
| 'Pass-through on web. React Native\'s `ScrollView` configures overscroll per-platform via props instead: `bounces={false}` disables iOS rubber-banding and `overScrollMode="never"` disables the Android edge glow. No CSS style key wires up to either.', | ||
| "Pass-through on web. Stock React Native's `ScrollView` configures overscroll per-platform via props (`bounces={false}` to disable iOS rubber-banding, `overScrollMode=\"never\"` to disable the Android edge glow); no CSS style key wires up to either. v7 polyfills `overscroll-behavior: contain | none` by lifting `bounces: false` and `overScrollMode: 'never'` onto `ScrollView` / `FlatList`; `auto` and `chain` restore the platform defaults.", |
| @@ -744,7 +742,8 @@ export const COMPAT_ENTRIES: CompatEntry[] = [ | |||
| nativeV7: 'yes', | |||
| iosStock: 'yes', | |||
| androidStock: 'yes', | |||
| summary: 'Pass-through everywhere.', | |||
| summary: | |||
| '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.', | |||
Comment on lines
+52
to
+53
| - 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). | ||
| - 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. |
- object-fit: rn-web Image now picks up the CSS property via resizeMode - styled.ScrollView flex-shrink: 0 baseline applies on native only; rn-web keeps the default so scrolling works
Trim polyfill mechanism (lifts X, polyfills by Y, attaches Z) out of matrix summaries and v7 docs. Keep what's supported, what isn't, what to author. Affected entries: accent-color, overscroll-behavior, scrollbar-width, text-overflow, direction, object-fit, line-clamp, background-blend-mode, interactivity, caret-color, ScrollView baseline.
… bundle
CSS custom properties cascade through styled components on native: declare
`--name: value` and descendants read it back via `var(--name, fallback)`.
References resolve inside every conditional bucket (`@media`, `@container`,
attribute, pseudo-state, `:has()`, `:nth-child()`, combinator).
`!important` is honored within a component for base + every conditional
bucket, flows through `var()` substitution and render-time resolvers, and
beats a runtime `style={{ ... }}` prop. Ignored inside `@keyframes` per
spec. Cross-component cascade is not yet supported.
`font-size` accepts the full unit catalogue: viewport units, container
query units, font-relative, font-metric approximations, and absolute
lengths.
`styled-components/native` now ships a dedicated build for `react-native-web`
consumers, auto-detected by Webpack / Vite / Metro web targets.
Replaced em-dashes across docs prose with colons, semicolons, periods, or parentheses per the project rule. Dropped the literal em-dash glyph from the blog byline divider in favor of a middle dot. Fixed three Nav components that pixel sizes through `rem()`; nav and sidebar widths use plain px from `utils/sizes.ts`. `utils/blog.server.ts` now loads MDX modules concurrently via `Promise.all`. `utils/cssCompatFormats.ts` deduplicates a double sort. `Nav/SidebarMenus.tsx` hoists `activeHref(pathname)` out of its top-level `.map` so the lookup runs once per render instead of per item. Removed two unused exports: `searchModalWidth` in `utils/sizes.ts` and the precomputed `Author.websiteHost` in `utils/authors.ts`.
- 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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Pulls the latest v7 native polyfill surface from
~/code/styled-componentsinto the website's CanIUse matrix and the v7 docs surface. Every claim about stock React Native was sanity-checked against~/code/react-nativev0.85.2.New v7 features documented
accent-colortints<Switch>(autoresolves to the platform accent color)overscroll-behavior: contain | noneandscrollbar-width: noneonScrollView/FlatListtext-overflow: ellipsis | clipon<Text>direction: ltr | rtlcontrols<Text>bidi (mirrors to writing direction)letter-spacingacceptsem/rem/lh/rlhfont-sizekeyword parity across iOS / Android / web (xx-small...xxx-large,smaller,larger)box-shadow,filter: drop-shadow(),background, andlinear-gradientcolor stopsanimation-compositionlonghand (comma-separated coordinating list):nth-child(<an+b> of S)/:nth-last-child(<an+b> of S)with simple inner selectors (component ref or single attribute selector)styled.ScrollViewdefaults toflex-shrink: 0so explicit dimensions pin reliablyborder-radiusslash form works on native when circular; elliptical drops with dev-warnborder-style: hiddenresolves to no border; mixed-side styles warn instead of misrenderingFixes from cross-checking against react-native 0.85.2
aspect-ratioslash form (16 / 9) works natively without v7; matrix used to say it droppedmix-blend-modeiOS count corrected to 15 non-normalmodes (CSS Compositing 1)AGENTS.md updates
Test plan
npx jest -c .jest.config.jspasses locally (pre-commit hook ran clean)/docs/compatibilityrenders new entries (accent-color, overscroll-behavior, scrollbar-width, text-overflow, border-radius slash caveat, etc.)/docs/v7reads cleanly without internal mechanism leaking throughpublic/llms.txtis parseable and behavior-focused