satori 0.24.1 → 0.26.0

package/README.md

@@ -51,6 +51,27 @@ Under the hood, it handles layout calculation, font, typography and more, to gen
 Satori only accepts JSX elements that are pure and stateless. You can use a subset of HTML
 elements (see section below), or custom React components, but React APIs such as `useState`, `useEffect`, `dangerouslySetInnerHTML` are not supported.
 
+#### Experimental: builtin JSX support
+
+Satori has an experimental JSX runtime that you can use without having to install React. You can enable it on a per-file basis with [`@jsxImportSource` pragmas](https://www.typescriptlang.org/tsconfig/#jsxImportSource). In the future, it will autocomplete only the subset of HTML elements and CSS properties that Satori supports for better type-safety.
+
+```tsx
+/** @jsxRuntime automatic */
+/** @jsxImportSource satori/jsx */
+
+import satori from 'satori';
+import { FC, JSXNode } from 'satori/jsx';
+
+const MyComponent: FC<{ children: JSXNode }> = ({ children }) => (
+  <div style={{ color: 'black' }}>{children}</div>
+)
+
+const svg = await satori(
+  <MyComponent>hello, world</MyComponent>,
+  options,
+)
+```
+
 #### Use without JSX
 
 If you don't have JSX transpiler enabled, you can simply pass [React-elements-like objects](https://reactjs.org/docs/introducing-jsx.html) that have `type`, `props.children` and `props.style` (and other properties too) directly:
@@ -116,6 +137,12 @@ Satori uses the same Flexbox [layout engine](https://yogalayout.com) as React Na
 </thead>
 <tbody>
 
+<tr>
+<td colspan="2"><b>CSS Variables</b></td>
+<td>Supported, including <code>--var-name</code> declaration and <code>var(--var-name)</code> usage with fallback values</td>
+<td><a href="https://og-playground.vercel.app/?share=rVLRTsIwFP2V5hIzTbY4wBjTIC9oos-a8MJLt95tha4lXQfOZf9uOxwRlTeeentO7zntuW0h1RyBwoyL3UoRUtlG4mPb-pqQIIpsgSVGqZbaBJQEnJlNImsMwsOJAkVeWEeM4_hqAPeC2-IXxkW1laxxaCbxY0B9_SQMplZo5TjnU5dqYJkUuXq1WFaeQmXRDNS6rqzImoV2oPL-p3TC0k1udK34wt_c8aMsy46urutNfCIl08kPaPn9lvs47tGuW6m5L3w4x2RIn4VT3DFzfZLPTeBa5i8opQ7JUhvJZ7eu8x-Jv7lqw1TuUr2E-lmJaBKSUTaNx_H4vNqwQgh668dSAW2hHynQBxcNHGYO9M5vOCZ1DjRjssIQsNRr8d5s_Zey-37ndHy4z2WCHKg1NXYhWJa4E4W333tz6L4A">Example</a></td>
+</tr>
+
 <tr>
 <td colspan="2"><code>display</code></td>
 <td><code>flex</code>, <code>contents</code>, <code>none</code>, default to <code>flex</code></td>
@@ -304,6 +331,7 @@ Note:
 2. There is no `z-index` support in SVG. Elements that come later in the document will be painted on top.
 3. `calc` isn't supported.
 4. `currentColor` support is only available for the `color` property.
+5. CSS variables (custom properties) are supported, including inheritance, fallback values, and nested variables.
 
 ### Language and Typography
 
@@ -344,8 +372,6 @@ Multiple fonts can be passed to Satori and used in `fontFamily`.
 > [!TIP]
 > We recommend you define global fonts instead of creating a new object and pass it to satori for better performance, if your fonts do not change. [Read it for more detail](https://github.com/vercel/satori/issues/590)
 
-
-
 #### Emojis
 
 To render custom images for specific graphemes, you can use `graphemeImages` option to map the grapheme to an image source: