feat: support bundle and load css in external bundle #2143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

colinaaa merged 20 commits into main from feat/rslib-css

Mar 4, 2026

.changeset/thick-needles-rest.md

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    ---
+    "@lynx-js/externals-loading-webpack-plugin": patch
+    "@lynx-js/lynx-bundle-rslib-config": patch
+    "@lynx-js/react-rsbuild-plugin": patch
+    ---
+    Support bundle and load css in external bundle

examples/react-externals/src/index.css

-Original file line number
+Diff line change
@@ -0,0 +1,8 @@
+    /* At least a css rule is needed in consumer
+     * to make sure the css engine is loaded
+     * so that the css in external bundles can be applied
+     *
+     * This is a limitation of Lynx engine
+     * we can remove this limitation in the future
+     */
+    .dummy {}

examples/react-externals/src/index.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -3,10 +3,7 @@ import { root } from '@lynx-js/react'; @@
     import { App } from './App.js';
-    // We have to manually import the css now
-    // TODO: load css from external bundle
-    // when it is supported in Lynx engine
-    import './App.css';
+    import './index.css';
     root.render(
       <App />,
@@ Expand Down @@

packages/rspeedy/lynx-bundle-rslib-config/package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -36,8 +36,9 @@ @@
         "test": "vitest"
       },
       "dependencies": {
+        "@lynx-js/css-serializer": "workspace:*",
         "@lynx-js/runtime-wrapper-webpack-plugin": "workspace:*",
-        "@lynx-js/tasm": "0.0.20"
+        "@lynx-js/tasm": "0.0.26"
       },
       "devDependencies": {
         "@lynx-js/react": "workspace:*",
@@ Expand Down @@

packages/rspeedy/lynx-bundle-rslib-config/src/externalBundleRslibConfig.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -59,6 +59,7 @@ export const defaultExternalBundleLibConfig: LibConfig = { @@
             },
           },
         },
+        target: 'web',
       },
       source: {
         include: [/node_modules/],
@@ Expand Down @@

packages/rspeedy/lynx-bundle-rslib-config/src/webpack/ExternalBundleWebpackPlugin.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -3,6 +3,9 @@ @@
     // LICENSE file in the root directory of this source tree.
     import type { Asset, Compilation, Compiler } from 'webpack'
+    import { cssChunksToMap } from '@lynx-js/css-serializer'
+    import type { LynxStyleNode } from '@lynx-js/css-serializer'
     /**
      * The options for {@link ExternalBundleWebpackPlugin}.
      *
@@ Expand Down Expand Up / @@ -112,18 +115,49 @@ export class ExternalBundleWebpackPlugin { @@
       async #encode(assets: Readonly<Asset>[]) {
         const customSections = assets
-          .filter(({ name }) => name.endsWith('.js'))
-          .reduce<Record<string, { content: string }>>((prev, cur) => ({
-            ...prev,
-            [cur.name.replace(/\.js$/, '')]: {
-              content: cur.source.source().toString(),
+          .reduce<
+            Record<string, {
+              content: string | {
+                ruleList: LynxStyleNode[]
+              }
+            }>
+          >(
+            (prev, cur) => {
+              switch (cur.info['assetType']) {
+                case 'javascript':
+                  return ({
+                    ...prev,
+                    [cur.name.replace(/\.js$/, '')]: {
+                      content: cur.source.source().toString(),
+                    },
+                  })
+                case 'extract-css':
+                  return ({
+                    ...prev,
+                    [`${cur.name.replace(/\.css$/, '')}:CSS`]: {
+                      'encoding': 'CSS',
+                      content: {
+                        ruleList: cssChunksToMap(
+                          [cur.source.source().toString()],
+                          [],
+                          true,
+                        ).cssMap[0] ?? [],
+                      },
+                    },
+                  })
+                default:
+                  return prev
+              }
             },
-          }), {})
+            {},
+          )
         const compilerOptions: Record<string, unknown> = {
           enableFiberArch: true,
           // `lynx.fetchBundle` and `lynx.loadScript` require engineVersion >= 3.5
           targetSdkVersion: this.options.engineVersion ?? '3.5',
+          enableCSSInvalidation: true,
+          enableCSSSelector: true,
         }
         const encodeOptions = {
@@ Expand Down @@

packages/rspeedy/lynx-bundle-rslib-config/test/external-bundle.test.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -167,6 +167,37 @@ describe('should build external bundle', () => { @@
         )
         expect(decodedResult['engine-version']).toBe('3.5')
       })
+      it('should build css into external bundle', async () => {
+        const fixtureDir = path.join(__dirname, './fixtures/css-lib')
+        const rslibConfig = defineExternalBundleRslibConfig({
+          source: {
+            entry: {
+              index: path.join(fixtureDir, 'index.ts'),
+            },
+          },
+          id: 'css-bundle',
+          output: {
+            distPath: {
+              root: path.join(fixtureDir, 'dist'),
+            },
+          },
+          plugins: [pluginReactLynx()],
+        })
+        await build(rslibConfig)
+        const decodedResult = await decodeTemplate(
+          path.join(fixtureDir, 'dist', 'css-bundle.lynx.bundle'),
+        )
+        // Check custom-sections for CSS keys
+        expect(Object.keys(decodedResult['custom-sections']).sort()).toEqual([
+          'index',
+          'index:CSS',
+          'index__main-thread',
+        ])
+      })
     })
     describe('debug mode artifacts', () => {
@@ Expand Down @@

packages/rspeedy/lynx-bundle-rslib-config/test/fixtures/css-lib/index.css

-Original file line number
+Diff line change
@@ -0,0 +1,3 @@
+    .container {
+      color: red;
+    }

packages/rspeedy/lynx-bundle-rslib-config/test/fixtures/css-lib/index.ts

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import './index.css'

		export const hello = 'world'

packages/rspeedy/plugin-react/src/pluginReactLynx.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -343,9 +343,7 @@ export function pluginReactLynx( @@
               })
             }
-            if (!isRslib) {
-              applyCSS(api, resolvedOptions)
-            }
+            applyCSS(api, resolvedOptions)
             applyEntry(api, resolvedOptions)
             applyBackgroundOnly(api)
             applyGenerator(api, resolvedOptions)
@@ Expand Down @@

packages/webpack/externals-loading-webpack-plugin/src/index.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -299,6 +299,7 @@ export class ExternalsLoadingPlugin { @@
             } else {
               return '';
             }
+            const isMainThreadLayer = layer === 'mainThread';
             for (
               const [pkgName, external] of Object.entries(
                 externalsLoadingPluginOptions.externals,
@@ Expand All / @@ -323,8 +324,21 @@ function createLoadExternalAsync(handler, sectionPath) { @@
           if (response.code === 0) {
             try {
               const result = lynx.loadScript(sectionPath, { bundleName: response.url });
+              ${
+              isMainThreadLayer
+                ? `
+              // TODO: Use configured layer suffix instead of hard-coded __main-thread for CSS section lookup.
+              const styleSheet = __LoadStyleSheet(sectionPath.replace('__main-thread', '') + ':CSS', response.url);
+              if (styleSheet !== null) {
+                __AdoptStyleSheet(styleSheet);
+                __FlushElementTree();
+              }
+                `
+                : ''
+            }
               resolve(result)
             } catch (error) {
+              console.error(error)
               reject(new Error('Failed to load script ' + sectionPath + ' in ' + response.url, { cause: error }))
             }
           } else {
@@ Expand All @@
       if (response.code === 0) {
         try  {
           const result = lynx.loadScript(sectionPath, { bundleName: response.url });
+          ${
+              isMainThreadLayer
+                ? `
+          // TODO: Use configured layer suffix instead of hard-coded __main-thread for CSS section lookup.
+          const styleSheet = __LoadStyleSheet(sectionPath.replace('__main-thread', '') + ':CSS', response.url);
+          if (styleSheet !== null) {
+            __AdoptStyleSheet(styleSheet);
+            __FlushElementTree();
+          }
+              `
+                : ''
+            }
           return result
         } catch (error) {
+          console.error(error)
           throw new Error('Failed to load script ' + sectionPath + ' in ' + response.url, { cause: error })
         }
       } else {
@@ Expand Down @@

packages/webpack/externals-loading-webpack-plugin/test/helpers/setup-env.js

-Original file line number
+Diff line change
@@ Expand Up / @@ -35,4 +35,14 @@ function __injectGlobals(target) { @@
       target.lynxCoreInject = {};
       target.lynxCoreInject.tt = {};
+      target.__LoadStyleSheet = () => {
+        return {};
+      };
+      target.__AdoptStyleSheet = () => {
+        //
+      };
+      target.__FlushElementTree = () => {
+        //
+      };
     }

packages/webpack/template-webpack-plugin/package.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -37,7 +37,7 @@ @@
       },
       "dependencies": {
         "@lynx-js/css-serializer": "workspace:*",
-        "@lynx-js/tasm": "0.0.20",
+        "@lynx-js/tasm": "0.0.26",
         "@lynx-js/web-core-wasm": "workspace:*",
         "@lynx-js/webpack-runtime-globals": "workspace:^",
         "@rspack/lite-tapable": "1.1.0",
@@ Expand Down @@

pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: support bundle and load css in external bundle #2143

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!

Uh oh!

Uh oh!