Refactor VPN proxy components and update related behavior

test/web/style-boundaries.test.js

@@ -36,26 +36,26 @@ const expectedImports = [
 const sha256 = (value) => crypto.createHash('sha256').update(value).digest('hex');
 const acceptedLedger = {
   counts: {
-    cascadeEdges: 821,
+    cascadeEdges: 780,
     customProperties: 31,
-    declarations: 2941,
+    declarations: 2912,
     important: 0,
-    keyframes: 51,
-    media: 10,
-    rules: 888,
-    variableReferences: 338,
+    keyframes: 49,
+    media: 12,
+    rules: 889,
+    variableReferences: 330,
   },
   hashes: {
-    cascadeEdges: '1ffc2a2f986970988643129ff3e32f19c31bb8b1e018a3a474a976e23adc9776',
+    cascadeEdges: '12a578504877454d14c734b8ce608766d061d3f8f809a5abf13513a645d8b6aa',
     customProperties: 'c7dd331e4bad898c450568999d8c9c6837e275a79c365c7680e143026fde4545',
-    declarations: '77314876411a21c88472dc277a59ca24192ca7d38de1ce8f367e7bd1007c5323',
+    declarations: '297c4387ebbccec796e80474c4d040eba20941d316a77a29d1e72c31d19c02d6',
     duplicateKeyframes: '4f53cda18c2baa0c0354bb5f9a3ecbe5ed12ab4d8e11ba873c2f11161202b945',
-    duplicateSelectors: '1565bf06e07fd7cbf601d24846bb3e1059d06720ace1544f2ac7f6ecf36cab47',
-    keyframes: '0bed7ec3cd3a86ee091cf9b07c081ab2364ac5a17e55e95bc9c4a6430419b019',
-    ruleDeclarationSequences: 'ce3831db5966264c17fa3af3e10fc6a41398cc619d061fa155ac43b47f0947ea',
-    selectors: '828cf6e95b03c890e3a969be20eb05be1f70872d6076e8f9a6a38cf6b415d012',
-    variableReferences: '9b6214da6e8e02b01deb6d5a98fe4c695a1fdaff4f65c936b805d7d5841db04d',
-    witnesses: 'c34721ec2cb99104eae77841ae88ddf77cde278d15c21675a020f3cfdd13a28a',
+    duplicateSelectors: 'bea7ed28b2e90fbaa3ae50aaee2346fc9063996fc9b7c585a3a47693a055b783',
+    keyframes: 'bde9c628dc86cb8a4299d5397eb7a81c5fbc9481136a073130991d3182d0799d',
+    ruleDeclarationSequences: '7386a7be7efa9f3527d167b885fee0f208f236f6947ba3878a0f4acabd31e7a8',
+    selectors: '845bd57c761ad3767b5a908fa004623d61dd4cdb838616ae0320093ffa1718eb',
+    variableReferences: '6755baede1580eefde410ea7237ede30af629fbbabd5bc13fc83012a7e4132b2',
+    witnesses: 'e5869e1f591f6a559ad9aa1942edcbb67b84ebe5ca6d22b4f6108dcba584a9f5',
   },
 };
 
@@ -110,7 +110,7 @@ test('tokens, shared primitives, and feature styles have one explicit owner', ()
 
 test('accepted stylesheet has pinned declaration, selector, keyframe, variable, and cascade ledgers', () => {
   const witnesses = readStyleWitnesses(root);
-  assert.equal(witnesses.length, 716);
+  assert.equal(witnesses.length, 740);
   assert.equal(witnesses.filter((witness) => witness.unknown || witness.ancestorUnknown).length, 0);
   const ledger = createStyleLedger(readStyleSource(root), { witnesses });
   assert.deepEqual(ledger.counts, acceptedLedger.counts);
@@ -127,7 +127,7 @@ test('every live production selector has an expanded DOM witness', () => {
   ]);
 });
 
-test('JSX witness expansion follows cross-file components, ReactNode slots, portals, and imperative classes', () => {
+test('JSX witness expansion follows cross-file components, render props, ReactNode slots, portals, and imperative classes', () => {
   const fixtureWitnesses = createStyleWitnesses([
     {
       file: '/fixture/Child.tsx',
@@ -142,6 +142,20 @@ test('JSX witness expansion follows cross-file components, ReactNode slots, port
   const slot = fixtureWitnesses.find((witness) => witness.classes.includes('slot'));
   assert.deepEqual(title?.ancestorClasses, ['child', 'scope']);
   assert.deepEqual(slot?.ancestorClasses, ['child', 'scope']);
+  const renderPropWitnesses = createStyleWitnesses([
+    {
+      file: '/fixture/List.tsx',
+      source: 'export function List({ renderItem }) { return <section className="list">{renderItem()}</section>; }',
+    },
+    {
+      file: '/fixture/App.tsx',
+      source: 'export function App() { return <main className="scope"><List renderItem={() => <button className="item" />} /></main>; }',
+    },
+  ]);
+  assert.deepEqual(
+    renderPropWitnesses.find((witness) => witness.classes.includes('item'))?.ancestorClasses,
+    ['list', 'scope'],
+  );
   const localBindingWitnesses = createStyleWitnesses([{
     file: '/fixture/App.tsx',
     source: `export function App() {
@@ -293,8 +307,8 @@ test('main owns one public stylesheet and the regrouped production CSS is determ
   assert.equal((main.match(/import ['"][^'"]+\.css['"]/g) || []).length, 1);
 
   const assets = fs.readdirSync(path.join(root, 'dist/assets')).filter((file) => file.endsWith('.css'));
-  assert.deepEqual(assets, ['index-DQr1ElW4.css']);
+  assert.deepEqual(assets, ['index-COUqegc1.css']);
   const built = fs.readFileSync(path.join(root, 'dist/assets', assets[0]));
-  assert.equal(built.byteLength, 110647);
-  assert.equal(sha256(built), '91bf07a74af3312f9b048fdebd642e811fafc3bb2ec49b55592a35f085c25f41');
+  assert.equal(built.byteLength, 108951);
+  assert.equal(sha256(built), '059653e70cd17fb84953e19b8280dcb9b926760c1781fb19382820434f9d1f01');
 });