Skip to content

reactunity@0.24.0

Choose a tag to compare

@github-actions github-actions released this 11 Sep 13:45
· 61 commits to main since this release
6b585b7
  • @reactunity/create@0.24.0
  • @reactunity/material@0.24.0
  • @reactunity/renderer@0.24.0
  • @reactunity/scripts@0.24.0

position: inset is removed (a4088cd)

Use absolute, which Yoga now resolves correctly against a containing block that has padding.

Tailwind's Preflight (e07b25b)

@reactunity/renderer/tailwind.css replaces it with a reset written for what ReactUnity renders, and
@reactunity/renderer/vite aliases @import "tailwindcss" to that file.

CSS logical properties (aa8207e)

padding-inline, margin-block, inset-inline-start and the rest work, so direction turns the inline
axis around for a whole subtree and Tailwind's px-*, ps-* and space-x-* utilities do something.

The Vite preset (afe239b)

@reactunity/renderer/vite configures Vite the way a ReactUnity app needs it, building into the Unity
project it finds and keeping the .meta files that carry its GUIDs.

@starting-style, light-dark() and more (a030f5d)

@starting-style, light-dark(), color-scheme, the place-* shorthands, the CSS math functions,
:nth-child(An+B of S), attr(), linear() and the boolean (hover) and (pointer) media queries all
work.

Web and Tailwind CSS spellings (840e0ed)

A stylesheet written for a browser or generated by Tailwind is accepted where it used to be dropped: vendor
prefixes, min(), max() and clamp(), white-space, text-shadow, overflow-x and overflow-y,
caret-color, ::selection, scrollbar-color, scrollbar-width, the viewport length units, and the
prefers-color-scheme and prefers-reduced-motion media features.

Container queries (2b72d1e)

They work with size and style() conditions, along with container-type, container-name and the cq*
units.

scrollbar-gutter, and scrollbar-size is gone (b591ea5)

The gutter reserves room along the bar's edge so content is never covered, and scrollbar-width is now the
only spelling.

filter (a5fa33c)

The property renders on UGUI, with blur, drop-shadow and the rest of the CSS functions plus the
non-standard grain, pixelate, posterize, scanlines, tint and chromatic-aberration. filter and
backdrop-filter are typed in Style. A style={undefined} no longer takes the whole app down. Animating
backdrop-filter no longer leaks a material per frame, and applying a style that did not change no longer
rebuilds the element.

Inline styles and !important (c0b9e2c)

An element's inline style no longer loses to rules that are entirely !important.

text-decoration (d69ad20)

The shorthand applies the line and the colour, so text-decoration: underline dotted red draws the underline
instead of dropping the whole declaration.

timeline-scope (f696dc2)

A timeline name can be lent to an ancestor's whole subtree, so a progress bar beside a scroll view can read
it.

Complex selectors, @custom-media and more (dfc2b84)

:is(), :where() and :not() take a complex selector anywhere, :state() names a custom state, the
-webkit- and -moz- spellings of the scrollbar and placeholder parts work, and @custom-media,
@container scroll-state() and @supports selector() are new.

Scroll-driven animations (1042437)

animation-timeline: scroll() and scroll-timeline-name drive an animation from a scroll container's
position instead of the clock.

The generated Typescript models (ea0b1b5)

All six files are regenerated against a current Editor, for the first time since January 2025.

View timelines and animation-range (aacca05)

animation-timeline: view() runs an animation over the element's own passage through its scroll view, and
animation-range says which part of a timeline it covers.

mix-blend-mode (0851301)

An element, and everything inside it, blends into what is painted behind — all sixteen CSS blend functions
plus plus-lighter — and isolation: isolate contains one.

background-blend-mode (d94783f)

Each background image layer blends with what is under it, through the same sixteen functions
mix-blend-mode has, instead of tinting the image with the background colour.

The rest of clip-path (ac6de1d)

The remaining CSS shapes work — path(), shape(), rect() and xywh() — along with a geometry box, and
polygon() has no vertex cap.

Scroll snapping (5d1fade)

scroll-snap-type, scroll-snap-align and scroll-behavior: smooth are new.

Soft masks, clip-path and image-rendering (04ce4e3)

mask-image is real coverage rather than a one-bit stencil, so a gradient mask fades, and clip-path and
image-rendering: pixelated are new.

The browser previewer (a553782)

It loads a player built from this release instead of 0.20.0, at a quarter of the download.