feat(external-bundle): emit css diagnostics

.changeset/external-bundle-css-diagnostics.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/lynx-bundle-rslib-config": patch
+---
+
+Emit CSS encode diagnostics for external bundles

.changeset/update-template-tasm.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/template-webpack-plugin": patch
+---
+
+Update TASM dependency for template encoding

packages/rspeedy/lynx-bundle-rslib-config/etc/lynx-bundle-rslib-config.api.md

@@ -43,6 +43,7 @@ export interface ExternalBundleWebpackPluginOptions {
     bundleFileName: string;
     encode: (opts: unknown) => Promise<{
         buffer: Buffer;
+        css_diagnostics?: unknown;
     }>;
     engineVersion?: string | undefined;
     mainThreadChunks?: string[] | undefined;

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

@@ -33,12 +33,13 @@
   ],
   "scripts": {
     "api-extractor": "api-extractor run --verbose",
-    "test": "vitest"
+    "test": "pnpm -w run test --project rspeedy/lynx-bundle-rslib-config"
   },
   "dependencies": {
     "@lynx-js/css-serializer": "workspace:*",
     "@lynx-js/runtime-wrapper-webpack-plugin": "workspace:*",
-    "@lynx-js/tasm": "0.0.35"
+    "@lynx-js/tasm": "0.0.38",
+    "@lynx-js/template-webpack-plugin": "workspace:*"
   },
   "devDependencies": {
     "@lynx-js/react": "workspace:*",

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

@@ -25,6 +25,8 @@ export interface EncodeOptions {
 }
 
 const DEFAULT_EXTERNAL_BUNDLE_MINIFY_CONFIG = {
+  // FIXME: CSS minification makes the CSS sourcemap `sources` incorrect.
+  css: false,
   jsOptions: {
     minimizerOptions: {
       compress: {
@@ -68,6 +70,9 @@ export const DEFAULT_EXTERNAL_BUNDLE_LIB_CONFIG: LibConfig = {
     distPath: {
       root: 'dist-external-bundle',
     },
+    sourceMap: {
+      css: true,
+    },
   },
   source: {
     include: [/node_modules/],

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

@@ -5,6 +5,7 @@ import type { Asset, Compilation, Compiler } from 'webpack'
 
 import { cssChunksToMap } from '@lynx-js/css-serializer'
 import type { LynxStyleNode } from '@lynx-js/css-serializer'
+import { processTasmCSSDiagnostics } from '@lynx-js/template-webpack-plugin'
 
 /**
  * The options for {@link ExternalBundleWebpackPlugin}.
@@ -35,7 +36,10 @@ export interface ExternalBundleWebpackPluginOptions {
    * })
    * ```
    */
-  encode: (opts: unknown) => Promise<{ buffer: Buffer }>
+  encode: (opts: unknown) => Promise<{
+    buffer: Buffer
+    css_diagnostics?: unknown
+  }>
   /**
    * The engine version of the external bundle.
    *
@@ -72,6 +76,8 @@ export class ExternalBundleWebpackPlugin {
     compiler.hooks.thisCompilation.tap(
       ExternalBundleWebpackPlugin.name,
       (compilation) => {
+        const emittedCSSDiagnosticWarnings = new Set<string>()
+
         compilation.hooks.processAssets.tapPromise(
           {
             name: ExternalBundleWebpackPlugin.name,
@@ -87,6 +93,7 @@ export class ExternalBundleWebpackPlugin {
             return this.#generateExternalBundle(
               compiler,
               compilation,
+              emittedCSSDiagnosticWarnings,
             )
           },
         )
@@ -97,9 +104,46 @@ export class ExternalBundleWebpackPlugin {
   async #generateExternalBundle(
     compiler: Compiler,
     compilation: Compilation,
+    emittedCSSDiagnosticWarnings: Set<string>,
   ): Promise<void> {
     const assets = compilation.getAssets()
-    const { buffer, encodeOptions } = await this.#encode(assets)
+    const { buffer, encodeOptions, cssDiagnostics } = await this.#encode(assets)
+
+    const resolvedDiagnostics = processTasmCSSDiagnostics({
+      cssDiagnostics,
+      cssSourceMaps: collectCSSSourceMapContents(assets),
+      context: compiler.context,
+      emittedWarnings: emittedCSSDiagnosticWarnings,
+    })
+    resolvedDiagnostics.forEach((diagnostic) => {
+      const webpackWarning = new compiler.webpack.WebpackError(
+        diagnostic.message,
+      )
+      webpackWarning.hideStack = true
+
+      if (
+        diagnostic.sourceFile
+        && diagnostic.sourceLine !== undefined
+        && diagnostic.sourceColumn !== undefined
+      ) {
+        webpackWarning.file = diagnostic.sourceFile
+        webpackWarning.loc = {
+          start: {
+            line: diagnostic.sourceLine,
+            column: diagnostic.sourceColumn,
+          },
+        }
+      } else {
+        webpackWarning.loc = {
+          start: {
+            line: diagnostic.line,
+            column: diagnostic.column,
+          },
+        }
+      }
+
+      compilation.warnings.push(webpackWarning)
+    })
 
     const { RawSource } = compiler.webpack.sources
     compilation.emitAsset(
@@ -181,8 +225,28 @@ export class ExternalBundleWebpackPlugin {
       customSections,
     }
 
-    const { buffer } = await this.options.encode(encodeOptions)
+    const { buffer, css_diagnostics } = await this.options.encode(encodeOptions)
 
-    return { buffer, encodeOptions }
+    return { buffer, encodeOptions, cssDiagnostics: css_diagnostics }
   }
 }
+
+function collectCSSSourceMapContents(
+  assets: Readonly<Asset>[],
+): string[] {
+  const sourceMaps = assets.reduce<string[]>((result, asset) => {
+    if (asset.info['assetType'] !== 'extract-css') {
+      return result
+    }
+
+    const sourceMap = asset.source.map?.()
+    if (!sourceMap || Array.isArray(sourceMap)) {
+      return result
+    }
+
+    result.push(JSON.stringify(sourceMap))
+    return result
+  }, [])
+
+  return Array.from(new Set(sourceMaps))
+}

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

@@ -9,11 +9,16 @@ import { fileURLToPath } from 'node:url'
 import { createRslib } from '@rslib/core'
 import type { RslibConfig } from '@rslib/core'
 import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'
+import webpack from 'webpack'
+import type { Asset, Compilation, WebpackError } from 'webpack'
 
 import { LAYERS, pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'
 
 import { decodeTemplate } from './utils.js'
-import { defineExternalBundleRslibConfig } from '../src/index.js'
+import {
+  ExternalBundleWebpackPlugin,
+  defineExternalBundleRslibConfig,
+} from '../src/index.js'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -53,6 +58,63 @@ function resolveExternal(
   })
 }
 
+async function runExternalBundlePlugin(
+  options: ConstructorParameters<typeof ExternalBundleWebpackPlugin>[0],
+  assets: Asset[],
+) {
+  let processAssets: (() => Promise<void>) | undefined
+  const emittedAssets = new Map(assets.map((asset) => [asset.name, asset]))
+  const compilation = {
+    warnings: [],
+    getAssets: () => Array.from(emittedAssets.values()),
+    emitAsset: (
+      name: string,
+      source: Asset['source'],
+      info: Asset['info'] = {},
+    ) => {
+      emittedAssets.set(name, { name, source, info })
+    },
+    deleteAsset: (name: string) => {
+      emittedAssets.delete(name)
+    },
+    hooks: {
+      processAssets: {
+        tapPromise: (
+          _options: unknown,
+          callback: () => Promise<void>,
+        ) => {
+          processAssets = callback
+        },
+      },
+    },
+  } as unknown as Compilation
+  const compiler = {
+    context: __dirname,
+    webpack,
+    hooks: {
+      thisCompilation: {
+        tap: (
+          _name: string,
+          callback: (compilation: Compilation) => void,
+        ) => {
+          callback(compilation)
+        },
+      },
+    },
+  }
+
+  new ExternalBundleWebpackPlugin(options)
+    .apply(compiler as unknown as webpack.Compiler)
+
+  if (!processAssets) {
+    throw new Error('Expected processAssets hook to be registered')
+  }
+
+  await processAssets()
+
+  return compilation
+}
+
 describe('define config', () => {
   it('should return entry config', () => {
     const rslibConfig = defineExternalBundleRslibConfig({
@@ -93,6 +155,62 @@ describe('define config', () => {
         },
       },
     })
+    expect(rslibConfig.lib[0]?.output?.minify).toMatchObject({
+      css: false,
+    })
+  })
+})
+
+describe('ExternalBundleWebpackPlugin', () => {
+  it('emits css diagnostics returned by tasm encode', async () => {
+    const cssContent = '.foo {\n  unknown-prop: red;\n}\n'
+    const cssSourceMap = {
+      version: 3,
+      file: 'index.css',
+      sources: ['webpack:/external-bundle.test.ts'],
+      sourcesContent: [
+        cssContent,
+      ],
+      names: [],
+      mappings: 'AAAA;EACE,kBAAkB;AACpB',
+    }
+    const compilation = await runExternalBundlePlugin(
+      {
+        bundleFileName: 'lib.lynx.bundle',
+        encode: vi.fn(async () => ({
+          buffer: Buffer.from('bundle'),
+          css_diagnostics:
+            '[{"type":"property","name":"unknown-prop","line":2,"column":10}]',
+        })),
+      },
+      [
+        {
+          name: 'index.css',
+          info: {
+            assetType: 'extract-css',
+          },
+          source: new webpack.sources.SourceMapSource(
+            cssContent,
+            'index.css',
+            cssSourceMap,
+          ),
+        },
+      ],
+    )
+
+    expect(compilation.warnings).toHaveLength(1)
+    expect(compilation.warnings[0]?.message).toBe(
+      'Unsupported property "unknown-prop" was removed during template encode.',
+    )
+    expect((compilation.warnings[0] as WebpackError).file).toBe(
+      path.join(__dirname, 'external-bundle.test.ts'),
+    )
+    expect((compilation.warnings[0] as WebpackError).loc).toEqual({
+      start: {
+        line: 2,
+        column: 3,
+      },
+    })
   })
 })
 

packages/rspeedy/lynx-bundle-rslib-config/tsconfig.build.json

@@ -7,4 +7,7 @@
     "rootDir": "./src",
   },
   "include": ["src"],
+  "references": [
+    { "path": "../../webpack/template-webpack-plugin/tsconfig.build.json" },
+  ],
 }

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

@@ -5,4 +5,7 @@
     "noEmit": true,
   },
   "include": ["src", "test", "vitest.config.ts"],
+  "references": [
+    { "path": "../../webpack/template-webpack-plugin/tsconfig.build.json" },
+  ],
 }

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

@@ -38,7 +38,7 @@
   "dependencies": {
     "@jridgewell/trace-mapping": "^0.3.29",
     "@lynx-js/css-serializer": "workspace:*",
-    "@lynx-js/tasm": "0.0.35",
+    "@lynx-js/tasm": "0.0.38",
     "@lynx-js/web-core": "workspace:*",
     "@lynx-js/webpack-runtime-globals": "workspace:^",
     "@rspack/lite-tapable": "1.1.0",