@adrienlcp/styles 0.3.0 → 0.4.0

package/README.md

@@ -14,7 +14,7 @@ pnpm add @adrienlcp/styles
 | File | Does |
 | --- | --- |
 | `reset.css` | Box sizing, zeroed margins and paddings, inherited fonts on controls, bare buttons and lists, balanced headings, pretty paragraphs, and `interpolate-size: allow-keywords` so a transition reaches `height: auto` (Chromium; elsewhere the size snaps as before). Inside `@layer reset` |
-| `reduced-motion.css` | Collapses `--transition-fast`, `--transition-base` and `--transition-slow` to `0ms` under `prefers-reduced-motion: reduce`. Unlayered, so it beats the tokens wherever they are defined |
+| `reduced-motion.css` | Collapses `--transition-fast`, `--transition-base` and `--transition-slow` to `0ms` under `prefers-reduced-motion: reduce`, and stills view transitions, which React's `<ViewTransition>` starts whatever the preference. Unlayered, so it beats the tokens wherever they are defined |
 
 Import them once — from JavaScript, or from the global stylesheet in Sass:
 

package/package.json

@@ -49,7 +49,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "scripts": {
     "test": "vitest run",
     "test:watch": "vitest --watch"

package/src/reduced-motion.css

@@ -5,4 +5,11 @@
     --transition-base: 0ms;
     --transition-slow: 0ms;
   }
+
+  /* React's <ViewTransition> starts one whatever the preference: it still swaps, without moving. */
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none;
+  }
 }