fix: ensure __AddClass triggers style updates when enableCSSSelector …

.changeset/fix-addclass-style.md

@@ -0,0 +1,9 @@
+---
+"@lynx-js/web-core": patch
+---
+
+fix: `__AddClass` triggers style updates when `enableCSSSelector` is `false`
+
+`__AddClass` was missing the expected call to `update_css_og_style` when CSS selectors are disabled (`enableCSSSelector: false`). With this fix, dynamically adding a class correctly delegates style population from the template AST into the DOM, mirroring the behavior of `__SetClasses`.
+
+Added behavioral unit test and end-to-end playwright validations using dynamically generated JSON AST `styleInfo` mocks.

packages/web-platform/web-core-e2e/resources/web-core.disable-css-selector.json

@@ -0,0 +1,54 @@
+{
+  "styleInfo": {
+    "0": {
+      "content": [],
+      "rules": [
+        {
+          "sel": [
+            [
+              [
+                ".my-class"
+              ],
+              [],
+              [],
+              []
+            ]
+          ],
+          "decl": [
+            [
+              "color",
+              "blue"
+            ],
+            [
+              "font-size",
+              "16px"
+            ]
+          ]
+        }
+      ]
+    }
+  },
+  "lepusCode": {
+    "root": "const self = globalThis.parent??globalThis;self.runtime = globalThis;self.__lynx_worker_type = 'main'; globalThis.registerDataProcessor='pass'; self.registerDataProcessor = registerDataProcessor;"
+  },
+  "manifest": {
+    "/app-service.js": "globalThis.runtime = lynxCoreInject.tt; globalThis.__lynx_worker_type = 'background'"
+  },
+  "customSections": {},
+  "cardType": "react",
+  "appType": "card",
+  "pageConfig": {
+    "enableFiberArch": true,
+    "useLepusNG": true,
+    "enableReuseContext": true,
+    "bundleModuleMode": "ReturnByFunction",
+    "templateDebugUrl": "",
+    "debugInfoOutside": true,
+    "defaultDisplayLinear": true,
+    "enableCSSInvalidation": true,
+    "enableCSSSelector": false,
+    "enableLepusDebug": false,
+    "enableRemoveCSSScope": true,
+    "targetSdkVersion": "2.10"
+  }
+}

packages/web-platform/web-core-e2e/tests/web-core.test.ts

@@ -87,6 +87,55 @@ test.describe('web core tests', () => {
     await wait(1000);
     expect(isSuccess).toBeTruthy();
   });
+  test('__AddClass when enableCSSSelector is false calls update_css_og_style', async ({ page, browserName }) => {
+    // firefox not support
+    test.skip(browserName === 'firefox');
+
+    page.on('console', msg => console.log('PAGE LOG:', msg.text()));
+    page.on('pageerror', err => console.log('PAGE ERROR:', err.message));
+
+    await goto(page, 'web-core.disable-css-selector.json');
+
+    const result = await page.evaluate(() => {
+      const root = globalThis.runtime.__CreatePage('0', '0', {});
+      const element = globalThis.runtime.__CreateElement('view', '0', {});
+      globalThis.runtime.__AppendElement(root, element);
+
+      const component = globalThis.runtime.__CreateComponent(
+        0,
+        '0-1234',
+        0,
+        '__Card__',
+        '',
+        '',
+        {},
+        {},
+      );
+      globalThis.runtime.__AppendElement(element, component);
+
+      const node = globalThis.runtime.__CreateView(
+        globalThis.runtime.__GetElementUniqueID(component),
+      );
+      globalThis.runtime.__AppendElement(component, node);
+
+      globalThis.runtime.__FlushElementTree();
+
+      globalThis.runtime.__AddClass(node, 'my-class');
+      globalThis.runtime.__FlushElementTree();
+
+      return {
+        color: window.getComputedStyle(node).color,
+        fontSize: window.getComputedStyle(node).fontSize,
+        classes: globalThis.runtime.__GetClasses(node),
+      };
+    });
+
+    console.log('RESULT::', result);
+    expect(result.classes).toContain('my-class');
+    expect(result.color).toBe('rgb(0, 0, 255)'); // 'blue'
+    expect(result.fontSize).toBe('16px');
+  });
+
   test('lynx.requireModuleAsync', async ({ page, browserName }) => {
     test.skip(
       browserName === 'firefox',

packages/web-platform/web-core/ts/client/mainthread/elementAPIs/createElementAPI.ts

@@ -514,7 +514,14 @@ export function createElementAPI(
     __GetID,
     __SetID,
     __GetTag,
-    __AddClass,
+    __AddClass: config_enable_css_selector
+      ? __AddClass
+      : ((element, className) => {
+        __AddClass(element, className);
+        const uniqueId = __GetElementUniqueID(element);
+        const entryName = element.getAttribute(lynxEntryNameAttribute);
+        wasmContext.update_css_og_style(uniqueId, entryName);
+      }),
     __GetClasses,
     __MarkTemplateElement,
     __MarkPartElement,

packages/web-platform/web-core/ts/server/elementAPIs/createElementAPI.ts

@@ -234,7 +234,16 @@ export function createElementAPI(
             getAttribute(el, lynxEntryNameAttribute),
           );
         }),
-      __AddClass,
+      __AddClass: config.enableCSSSelector
+        ? __AddClass
+        : ((element, className) => {
+          __AddClass(element, className);
+          const el = element as ServerElement;
+          wasmContext.update_css_og_style(
+            el[uniqueIdSymbol],
+            getAttribute(el, lynxEntryNameAttribute),
+          );
+        }),
 
       __AddConfig,
       __UpdateComponentInfo,