fix: Don't inherit registered custom properties without initial values (#930)

A follow-up to #921. A custom property registered with `inherits: false`
and no initial value has the guaranteed-invalid value in elements that
don't declare it, so `var()` uses its fallback. Tailwind v4 registers
`--tw-leading` this way:

```css
@Property --tw-leading { syntax: "*"; inherits: false; }
.text-sm { line-height: var(--tw-leading, var(--text-sm--line-height)); }
.leading-5 { --tw-leading: 1.25rem; line-height: 1.25rem; }
```

So `text-sm` inside a `leading-5` element uses its own line height in
browsers. #921 only handled registered properties with an initial value,
so in Satori, children inherited the parent's `--tw-leading`.

Now, like properties with an initial value, the children of an element
that declares such a property get `initial`, which Satori already treats
as the guaranteed-invalid value.

A new test checks that a child uses the fallback of `var()` while its
parent uses its own value. It fails without this change. The benchmark
doesn't change.

Author: shuding

src/handler/stylesheet.ts

@@ -454,11 +454,12 @@ function getInitialValues(
   const all: InitialValues['all'] = []
   const notInherited: InitialValues['notInherited'] = []
   for (const [name, { inherits, initial }] of properties) {
-    if (initial === undefined) continue
-    all.push([name, initial])
-    if (!inherits) notInherited.push([name, initial])
+    if (initial !== undefined) all.push([name, initial])
+    // Without an initial value, a property that isn't inherited has the
+    // guaranteed-invalid value, `initial`, unless it's declared.
+    if (!inherits) notInherited.push([name, initial ?? 'initial'])
   }
-  return all.length ? { all, notInherited } : undefined
+  return all.length || notInherited.length ? { all, notInherited } : undefined
 }
 
 function declareLayer(layer: string[], state: CompileState) {

test/stylesheet.test.tsx

@@ -418,6 +418,21 @@ describe('stylesheets', () => {
     expect(errors).toHaveLength(2)
   })
 
+  it('should not inherit registered custom properties without initial values', async () => {
+    // Like Tailwind's `--tw-leading`, which `text-sm` uses with a fallback.
+    await expectSame(
+      `@property --l { syntax: "*"; inherits: false }
+      .p { --l: blue; color: var(--l, green) }
+      .p > span { color: var(--l, red) }`,
+      <div className='p'>
+        Parent <span>Child</span>
+      </div>,
+      <div style={{ color: 'blue' }}>
+        Parent <span style={{ color: 'red' }}>Child</span>
+      </div>
+    )
+  })
+
   it('should use the initial values of registered custom properties', async () => {
     await expectSame(
       `@property --a { syntax: "*"; inherits: false; initial-value: red }