@adrienlcp/styles 0.2.0 → 0.4.0

package/README.md

@@ -13,8 +13,8 @@ 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. 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 |
+| `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`, 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:
 
@@ -32,14 +32,48 @@ stylesheet loads, so the reset stays under every component rule —
 Resolved through the `sass` export condition, which Vite reads; with the Sass
 CLI, use `pkg:@adrienlcp/styles/breakpoints` and `--pkg-importer=node`.
 
+### `containers`
+
+A component answers the room it is given, not the screen: the same card
+lays out the same way in a sidebar on a desktop and full width on a phone.
+
+```sass
+@use '@adrienlcp/styles/containers'
+
+.card
+  @include containers.container
+
+  .card-body
+    @include containers.container-wide(30rem)
+      grid-template-columns: auto 1fr
+```
+
+- `container($name: null)` sets `container-type: inline-size`, and
+  `container-name` when given one.
+- `container-wide($width, $name: null)` is `width >= $width` on the nearest
+  container, or on the one named; `container-narrow` is its exact complement.
+- **An element queries an ancestor, never itself** — the container wraps what
+  changes.
+- **A container no longer takes its width from its content**: inside a flex row
+  without a width, an `auto` grid track or an absolutely positioned box, it
+  collapses to zero. Its parent gives it a width.
+- **With no container above, neither mixin matches.** Make `body` one in the
+  global stylesheet, so an unwrapped component falls back to the page width;
+  `position: fixed` stays on the viewport.
+- The width is Sass interpolated into `@container`, so pass a value, not a
+  custom property — `@container` cannot read one either.
+
 ### `breakpoints`
 
+For what depends on the device rather than the room a component has: the page
+shell, a sidebar that turns into a drawer, an overlay pinned to the viewport.
+
 ```sass
 @use '@adrienlcp/styles/breakpoints'
 
-.page
+.shell
   @include breakpoints.wide
-    grid-template-columns: 1fr 1fr
+    grid-template-columns: 16rem 1fr
 ```
 
 `$wide-screen` is `900px`; `wide` is `width >= $wide-screen` and `narrow` its

package/package.json

@@ -1,7 +1,7 @@
 {
   "author": "Adrien Lacourpaille",
   "bugs": "https://github.com/AdrienLcp/packages/issues",
-  "description": "A reset, a reduced-motion switch, and Sass mixins for self-hosted fonts and a breakpoint",
+  "description": "A reset, a reduced-motion switch, and Sass mixins for self-hosted fonts, container queries and a breakpoint",
   "devDependencies": {
     "sass": "^1.105.0"
   },
@@ -9,6 +9,9 @@
     "./breakpoints": {
       "sass": "./src/_breakpoints.sass"
     },
+    "./containers": {
+      "sass": "./src/_containers.sass"
+    },
     "./fonts": {
       "sass": "./src/_fonts.sass"
     },
@@ -46,7 +49,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "scripts": {
     "test": "vitest run",
     "test:watch": "vitest --watch"

package/src/_breakpoints.sass

@@ -1,6 +1,8 @@
 /// Where a screen stops being a phone's. A media query cannot read a custom
 /// property, so the breakpoint is a Sass value; override it with
 /// `@use '@adrienlcp/styles/breakpoints' with ($wide-screen: 1024px)`.
+/// Only for what depends on the device — the page shell, a fixed overlay; a
+/// component answers its container through `containers`.
 $wide-screen: 900px !default
 
 /// `wide` and `narrow` are exact complements: every width is one or the other.

package/src/_containers.sass

@@ -0,0 +1,24 @@
+/// Makes the element a container its descendants query by inline size. It can
+/// no longer take its width from its content, so its parent gives it one —
+/// a block, a stretched flex or grid item, a sized track.
+@mixin container($name: null)
+  container-type: inline-size
+  @if $name
+    container-name: $name
+
+/// Matches when the nearest container — or the one named — is at least
+/// `$width` wide. With no container above, neither this nor
+/// `container-narrow` matches.
+@mixin container-wide($width, $name: null)
+  @container #{_condition($name, 'width >= #{$width}')}
+    @content
+
+/// The exact complement of `container-wide` for the same `$width` and `$name`.
+@mixin container-narrow($width, $name: null)
+  @container #{_condition($name, 'width < #{$width}')}
+    @content
+
+@function _condition($name, $feature)
+  @if $name
+    @return '#{$name} (#{$feature})'
+  @return '(#{$feature})'

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;
+  }
 }

package/src/reset.css

@@ -11,6 +11,7 @@
   }
 
   html {
+    interpolate-size: allow-keywords;
     -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
   }