From 6067b8526a8b5414632da9ccbd002aa7812afa3b Mon Sep 17 00:00:00 2001 From: sunyiteng Date: Thu, 19 Dec 2024 16:38:56 +0800 Subject: [PATCH 1/5] feat(css): support bundleless css asset --- .../rslib.config.ts | 1 + .../src/assets/logo.svg | 7 ++ .../CounterButton/index.module.scss | 2 +- .../src/index.scss | 7 ++ packages/core/src/asset/assetConfig.ts | 10 ++- packages/core/src/css/LibCssExtractPlugin.ts | 77 +++++++++++++++++++ .../src/css/RemoveCssExtractAssetPlugin.ts | 32 -------- packages/core/src/css/cssConfig.ts | 6 +- packages/core/src/css/libCssExtractLoader.ts | 50 +++++++++++- packages/core/src/css/utils.ts | 44 +++++++++++ .../style/sass/bundle-false/rslib.config.ts | 10 +-- 11 files changed, 200 insertions(+), 46 deletions(-) create mode 100644 examples/react-component-bundle-false/src/assets/logo.svg create mode 100644 packages/core/src/css/LibCssExtractPlugin.ts delete mode 100644 packages/core/src/css/RemoveCssExtractAssetPlugin.ts create mode 100644 packages/core/src/css/utils.ts diff --git a/examples/react-component-bundle-false/rslib.config.ts b/examples/react-component-bundle-false/rslib.config.ts index 915d00d80..0e99c6ee7 100644 --- a/examples/react-component-bundle-false/rslib.config.ts +++ b/examples/react-component-bundle-false/rslib.config.ts @@ -32,6 +32,7 @@ export default defineConfig({ ], output: { target: 'web', + assetPrefix: 'auto' // TODO: move this line to packages/core/src/asset/assetConfig.ts }, plugins: [pluginReact(), pluginSass()], }); diff --git a/examples/react-component-bundle-false/src/assets/logo.svg b/examples/react-component-bundle-false/src/assets/logo.svg new file mode 100644 index 000000000..6b60c1042 --- /dev/null +++ b/examples/react-component-bundle-false/src/assets/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/examples/react-component-bundle-false/src/components/CounterButton/index.module.scss b/examples/react-component-bundle-false/src/components/CounterButton/index.module.scss index 19301eef2..6b798f2ca 100644 --- a/examples/react-component-bundle-false/src/components/CounterButton/index.module.scss +++ b/examples/react-component-bundle-false/src/components/CounterButton/index.module.scss @@ -1,3 +1,3 @@ .button { - background: yellow; + background: url("../../assets/logo.svg"); } diff --git a/examples/react-component-bundle-false/src/index.scss b/examples/react-component-bundle-false/src/index.scss index 2e506a0ac..f4c82dce4 100644 --- a/examples/react-component-bundle-false/src/index.scss +++ b/examples/react-component-bundle-false/src/index.scss @@ -1,3 +1,10 @@ +.counter-title { + width: 100px; + height: 100px; + background: no-repeat url('./assets/logo.svg'); + background-size: cover; +} + .counter-text { font-size: 50px; } diff --git a/packages/core/src/asset/assetConfig.ts b/packages/core/src/asset/assetConfig.ts index 908913af9..847bfbd89 100644 --- a/packages/core/src/asset/assetConfig.ts +++ b/packages/core/src/asset/assetConfig.ts @@ -1,6 +1,7 @@ import type { RsbuildConfig } from '@rsbuild/core'; import type { Format } from '../types'; +// TODO: asset config document export const composeAssetConfig = ( bundle: boolean, format: Format, @@ -14,8 +15,13 @@ export const composeAssetConfig = ( }, }; } - // TODO: bundleless - return {}; + + return { + output: { + dataUriLimit: 0, // default: no inline asset + // assetPrefix: 'auto', // TODO: will turn on this with js support together in the future + } + }; } // mf and umd etc diff --git a/packages/core/src/css/LibCssExtractPlugin.ts b/packages/core/src/css/LibCssExtractPlugin.ts new file mode 100644 index 000000000..91bf66528 --- /dev/null +++ b/packages/core/src/css/LibCssExtractPlugin.ts @@ -0,0 +1,77 @@ +import { rspack, type Rspack } from '@rsbuild/core'; +import { getUndoPath } from './utils'; +import { ABSOLUTE_PUBLIC_PATH, SINGLE_DOT_PATH_SEGMENT, AUTO_PUBLIC_PATH } from './libCssExtractLoader'; + +const pluginName = 'LIB_CSS_EXTRACT_PLUGIN'; + +type Options = { + include: RegExp; +}; + +class LibCssExtractPlugin implements Rspack.RspackPluginInstance { + readonly name: string = pluginName; + options: Options; + constructor(options: Options) { + this.options = options; + } + + apply(compiler: Rspack.Compiler): void { + const include = this.options.include; + compiler.hooks.thisCompilation.tap(pluginName, (compilation) => { + compilation.hooks.chunkAsset.tap(pluginName, (_chunk, filename) => { + const asset = compilation.getAsset(filename); + console.log(asset); + if (!asset) { + return; + } + const needRemove = Boolean(asset.name.match(include)); + if (needRemove) { + compilation.deleteAsset(filename); + } + }); + + }); + + /** + * The following code is modified based on + * https://github.com/webpack-contrib/mini-css-extract-plugin/blob/3effaa0319bad5cc1bf0ae760553bf7abcbc35a4/src/index.js#L1597 + * + * replace publicPath placeholders of miniCssExtractLoader + */ + compiler.hooks.make.tap(pluginName, (compilation) => { + compilation.hooks.processAssets.tap(pluginName, (assets) => { + const chunkAsset = Object.keys(assets).filter((name) => + /\.css/.test(name), + ); + for (const name of chunkAsset) { + compilation.updateAsset(name, (old) => { + const oldSource = old.source().toString(); + const replaceSource = new rspack.sources.ReplaceSource(old); + + function replace(searchValue: string, replaceValue: string) { + let start = oldSource.indexOf(searchValue); + while(start !== -1) { + console.log(start) + replaceSource.replace( + start, + start + searchValue.length - 1, + replaceValue, + ); + start = oldSource.indexOf(searchValue, start + 1); + } + } + + replace(ABSOLUTE_PUBLIC_PATH, ''); + replace(SINGLE_DOT_PATH_SEGMENT, '.'); + const undoPath = getUndoPath(name, compilation.outputOptions.path!, false); + replace(AUTO_PUBLIC_PATH, undoPath) + + return replaceSource; + }); + } + + }); + }); + } +} +export { LibCssExtractPlugin }; diff --git a/packages/core/src/css/RemoveCssExtractAssetPlugin.ts b/packages/core/src/css/RemoveCssExtractAssetPlugin.ts deleted file mode 100644 index 29481f79f..000000000 --- a/packages/core/src/css/RemoveCssExtractAssetPlugin.ts +++ /dev/null @@ -1,32 +0,0 @@ -import type { Rspack } from '@rsbuild/core'; - -const pluginName = 'REMOVE_CSS_EXTRACT_ASSET_PLUGIN'; - -type Options = { - include: RegExp; -}; - -class RemoveCssExtractAssetPlugin implements Rspack.RspackPluginInstance { - readonly name: string = pluginName; - options: Options; - constructor(options: Options) { - this.options = options; - } - - apply(compiler: Rspack.Compiler): void { - const include = this.options.include; - compiler.hooks.thisCompilation.tap(pluginName, (compilation) => { - compilation.hooks.chunkAsset.tap(pluginName, (_chunk, filename) => { - const asset = compilation.getAsset(filename); - if (!asset) { - return; - } - const needRemove = Boolean(asset.name.match(include)); - if (needRemove) { - compilation.deleteAsset(filename); - } - }); - }); - } -} -export { RemoveCssExtractAssetPlugin }; diff --git a/packages/core/src/css/cssConfig.ts b/packages/core/src/css/cssConfig.ts index b5e6ab94f..f87c4b4e1 100644 --- a/packages/core/src/css/cssConfig.ts +++ b/packages/core/src/css/cssConfig.ts @@ -6,7 +6,7 @@ import type { RsbuildPlugin, } from '@rsbuild/core'; import { CSS_EXTENSIONS_PATTERN } from '../constant'; -import { RemoveCssExtractAssetPlugin } from './RemoveCssExtractAssetPlugin'; +import { LibCssExtractPlugin } from './LibCssExtractPlugin'; const require = createRequire(import.meta.url); export const RSLIB_CSS_ENTRY_FLAG = '__rslib_css__'; @@ -139,8 +139,8 @@ const pluginLibCss = (rootDir: string): RsbuildPlugin => ({ const cssExtract = CHAIN_ID.PLUGIN.MINI_CSS_EXTRACT; config.plugins.delete(cssExtract); config - .plugin(RemoveCssExtractAssetPlugin.name) - .use(RemoveCssExtractAssetPlugin, [ + .plugin(LibCssExtractPlugin.name) + .use(LibCssExtractPlugin, [ { include: new RegExp(`^${RSLIB_CSS_ENTRY_FLAG}`), }, diff --git a/packages/core/src/css/libCssExtractLoader.ts b/packages/core/src/css/libCssExtractLoader.ts index 2dec64580..7f9c09021 100644 --- a/packages/core/src/css/libCssExtractLoader.ts +++ b/packages/core/src/css/libCssExtractLoader.ts @@ -3,11 +3,18 @@ * https://github.com/web-infra-dev/rspack/blob/0a89e433a9f8596a7c6c4326542f168b5982d2da/packages/rspack/src/builtin-plugin/css-extract/loader.ts * 1. remove hmr/webpack runtime * 2. add `this.emitFile` to emit css files - * 3. add `import './[name].css';` + * 3. add `import './[name].css';` to js module */ import path, { extname } from 'node:path'; import type { Rspack } from '@rsbuild/core'; +export const BASE_URI = "webpack://"; +export const MODULE_TYPE = "css/mini-extract"; +export const AUTO_PUBLIC_PATH = "__mini_css_extract_plugin_public_path_auto__"; +export const ABSOLUTE_PUBLIC_PATH: string = `${BASE_URI}/mini-css-extract-plugin/`; +export const SINGLE_DOT_PATH_SEGMENT = + "__mini_css_extract_plugin_single_dot_path_segment__"; + interface DependencyDescription { identifier: string; content: string; @@ -20,7 +27,13 @@ interface DependencyDescription { filepath: string; } +// https://github.com/web-infra-dev/rspack/blob/c0986d39b7d647682f10fcef5bbade39fd016eca/packages/rspack/src/config/types.ts#L10 +type Filename = + | string + | ((pathData: any, assetInfo?: any) => string); + export interface CssExtractRspackLoaderOptions { + publicPath?: string | ((resourcePath: string, context: string) => string); emit?: boolean; esModule?: boolean; layer?: string; @@ -29,7 +42,7 @@ export interface CssExtractRspackLoaderOptions { rootDir?: string; } -const PLUGIN_NAME = 'LIB_CSS_EXTRACT_LOADER'; +const LOADER_NAME = 'LIB_CSS_EXTRACT_LOADER'; function stringifyLocal(value: any) { return typeof value === 'function' ? value.toString() : JSON.stringify(value); @@ -77,6 +90,35 @@ export const pitch: Rspack.LoaderDefinition['pitch'] = function ( const filepath = this.resourcePath; const rootDir = options.rootDir ?? this.rootContext; + let { publicPath } = this._compilation!.outputOptions; + + + if (typeof options.publicPath === "string") { + // eslint-disable-next-line prefer-destructuring + publicPath = options.publicPath; + } else if (typeof options.publicPath === "function") { + publicPath = options.publicPath(this.resourcePath, this.rootContext); + } + + if (publicPath === "auto") { + publicPath = AUTO_PUBLIC_PATH; + } + + let publicPathForExtract: Filename | undefined; + + if (typeof publicPath === "string") { + const isAbsolutePublicPath = /^[a-zA-Z][a-zA-Z\d+\-.]*?:/.test(publicPath); + + publicPathForExtract = isAbsolutePublicPath + ? publicPath + : `${ABSOLUTE_PUBLIC_PATH}${publicPath.replace( + /\./g, + SINGLE_DOT_PATH_SEGMENT + )}`; + } else { + publicPathForExtract = publicPath; + } + const handleExports = ( originalExports: | { default: Record; __esModule: true } @@ -196,7 +238,7 @@ export const pitch: Rspack.LoaderDefinition['pitch'] = function ( return ''; })(); - let resultSource = `// extracted by ${PLUGIN_NAME}`; + let resultSource = `// extracted by ${LOADER_NAME}`; let importCssFiles = ''; @@ -249,6 +291,8 @@ export const pitch: Rspack.LoaderDefinition['pitch'] = function ( `${this.resourcePath}.webpack[javascript/auto]!=!!!${request}`, { layer: options.layer, + publicPath: publicPathForExtract, + baseUri: `${BASE_URI}/`, }, (error, exports) => { if (error) { diff --git a/packages/core/src/css/utils.ts b/packages/core/src/css/utils.ts new file mode 100644 index 000000000..6223fea5d --- /dev/null +++ b/packages/core/src/css/utils.ts @@ -0,0 +1,44 @@ +/** + * This function is copied from + * https://github.com/webpack-contrib/mini-css-extract-plugin/blob/3effaa0319bad5cc1bf0ae760553bf7abcbc35a4/src/utils.js#L169 + */ +function getUndoPath(filename: string, outputPath: string, enforceRelative: boolean): string { + let depth = -1; + let append = ""; + + // eslint-disable-next-line no-param-reassign + outputPath = outputPath.replace(/[\\/]$/, ""); + + for (const part of filename.split(/[/\\]+/)) { + if (part === "..") { + if (depth > -1) { + // eslint-disable-next-line no-plusplus + depth--; + } else { + const i = outputPath.lastIndexOf("/"); + const j = outputPath.lastIndexOf("\\"); + const pos = i < 0 ? j : j < 0 ? i : Math.max(i, j); + + if (pos < 0) { + return `${outputPath}/`; + } + + append = `${outputPath.slice(pos + 1)}/${append}`; + + // eslint-disable-next-line no-param-reassign + outputPath = outputPath.slice(0, pos); + } + } else if (part !== ".") { + // eslint-disable-next-line no-plusplus + depth++; + } + } + + return depth > 0 + ? `${"../".repeat(depth)}${append}` + : enforceRelative + ? `./${append}` + : append; +} + +export { getUndoPath } \ No newline at end of file diff --git a/tests/integration/style/sass/bundle-false/rslib.config.ts b/tests/integration/style/sass/bundle-false/rslib.config.ts index 79c602f7e..b659670c7 100644 --- a/tests/integration/style/sass/bundle-false/rslib.config.ts +++ b/tests/integration/style/sass/bundle-false/rslib.config.ts @@ -11,8 +11,7 @@ export default defineConfig({ entry: { index: [ '../__fixtures__/src/**/*.scss', - // TODO: assets support - // '../__fixtures__/foundation/logo.svg' + '../__fixtures__/foundation/logo.svg' ], }, }, @@ -25,8 +24,9 @@ export default defineConfig({ ], output: { target: 'web', - // dataUriLimit: { - // svg: 0 - // } + assetPrefix: 'auto', + dataUriLimit: { + svg: 0 + } }, }); From 6a7254646a557788aa23d9c968131fbcf85777a7 Mon Sep 17 00:00:00 2001 From: sunyiteng Date: Thu, 19 Dec 2024 16:51:18 +0800 Subject: [PATCH 2/5] chore: lint --- .../rslib.config.ts | 2 +- packages/core/src/asset/assetConfig.ts | 2 +- packages/core/src/css/LibCssExtractPlugin.ts | 38 +++++++------ packages/core/src/css/cssConfig.ts | 8 +-- packages/core/src/css/libCssExtractLoader.ts | 55 +++++++++---------- packages/core/src/css/utils.ts | 33 +++++------ .../style/sass/bundle-false/rslib.config.ts | 6 +- 7 files changed, 70 insertions(+), 74 deletions(-) diff --git a/examples/react-component-bundle-false/rslib.config.ts b/examples/react-component-bundle-false/rslib.config.ts index 0e99c6ee7..ac017ae4f 100644 --- a/examples/react-component-bundle-false/rslib.config.ts +++ b/examples/react-component-bundle-false/rslib.config.ts @@ -32,7 +32,7 @@ export default defineConfig({ ], output: { target: 'web', - assetPrefix: 'auto' // TODO: move this line to packages/core/src/asset/assetConfig.ts + assetPrefix: 'auto', // TODO: move this line to packages/core/src/asset/assetConfig.ts }, plugins: [pluginReact(), pluginSass()], }); diff --git a/packages/core/src/asset/assetConfig.ts b/packages/core/src/asset/assetConfig.ts index 847bfbd89..fdbf763e8 100644 --- a/packages/core/src/asset/assetConfig.ts +++ b/packages/core/src/asset/assetConfig.ts @@ -20,7 +20,7 @@ export const composeAssetConfig = ( output: { dataUriLimit: 0, // default: no inline asset // assetPrefix: 'auto', // TODO: will turn on this with js support together in the future - } + }, }; } diff --git a/packages/core/src/css/LibCssExtractPlugin.ts b/packages/core/src/css/LibCssExtractPlugin.ts index 91bf66528..d4588c63b 100644 --- a/packages/core/src/css/LibCssExtractPlugin.ts +++ b/packages/core/src/css/LibCssExtractPlugin.ts @@ -1,41 +1,43 @@ -import { rspack, type Rspack } from '@rsbuild/core'; +import { type Rspack, rspack } from '@rsbuild/core'; +import { RSLIB_CSS_ENTRY_FLAG } from './cssConfig'; +import { + ABSOLUTE_PUBLIC_PATH, + AUTO_PUBLIC_PATH, + SINGLE_DOT_PATH_SEGMENT, +} from './libCssExtractLoader'; import { getUndoPath } from './utils'; -import { ABSOLUTE_PUBLIC_PATH, SINGLE_DOT_PATH_SEGMENT, AUTO_PUBLIC_PATH } from './libCssExtractLoader'; const pluginName = 'LIB_CSS_EXTRACT_PLUGIN'; -type Options = { - include: RegExp; -}; +type Options = Record; class LibCssExtractPlugin implements Rspack.RspackPluginInstance { readonly name: string = pluginName; options: Options; - constructor(options: Options) { - this.options = options; + constructor(options?: Options) { + this.options = options ?? {}; } apply(compiler: Rspack.Compiler): void { - const include = this.options.include; + // 1. mark and remove the normal css asset + // 2. preserve CSS Modules asset compiler.hooks.thisCompilation.tap(pluginName, (compilation) => { compilation.hooks.chunkAsset.tap(pluginName, (_chunk, filename) => { const asset = compilation.getAsset(filename); - console.log(asset); if (!asset) { return; } - const needRemove = Boolean(asset.name.match(include)); + const needRemove = Boolean(asset.name.match(RSLIB_CSS_ENTRY_FLAG)); if (needRemove) { compilation.deleteAsset(filename); } }); - }); /** * The following code is modified based on * https://github.com/webpack-contrib/mini-css-extract-plugin/blob/3effaa0319bad5cc1bf0ae760553bf7abcbc35a4/src/index.js#L1597 - * + * * replace publicPath placeholders of miniCssExtractLoader */ compiler.hooks.make.tap(pluginName, (compilation) => { @@ -50,8 +52,7 @@ class LibCssExtractPlugin implements Rspack.RspackPluginInstance { function replace(searchValue: string, replaceValue: string) { let start = oldSource.indexOf(searchValue); - while(start !== -1) { - console.log(start) + while (start !== -1) { replaceSource.replace( start, start + searchValue.length - 1, @@ -63,13 +64,16 @@ class LibCssExtractPlugin implements Rspack.RspackPluginInstance { replace(ABSOLUTE_PUBLIC_PATH, ''); replace(SINGLE_DOT_PATH_SEGMENT, '.'); - const undoPath = getUndoPath(name, compilation.outputOptions.path!, false); - replace(AUTO_PUBLIC_PATH, undoPath) + const undoPath = getUndoPath( + name, + compilation.outputOptions.path!, + false, + ); + replace(AUTO_PUBLIC_PATH, undoPath); return replaceSource; }); } - }); }); } diff --git a/packages/core/src/css/cssConfig.ts b/packages/core/src/css/cssConfig.ts index f87c4b4e1..b57feac32 100644 --- a/packages/core/src/css/cssConfig.ts +++ b/packages/core/src/css/cssConfig.ts @@ -138,13 +138,7 @@ const pluginLibCss = (rootDir: string): RsbuildPlugin => ({ if (isUsingCssExtract) { const cssExtract = CHAIN_ID.PLUGIN.MINI_CSS_EXTRACT; config.plugins.delete(cssExtract); - config - .plugin(LibCssExtractPlugin.name) - .use(LibCssExtractPlugin, [ - { - include: new RegExp(`^${RSLIB_CSS_ENTRY_FLAG}`), - }, - ]); + config.plugin(LibCssExtractPlugin.name).use(LibCssExtractPlugin); } }); }, diff --git a/packages/core/src/css/libCssExtractLoader.ts b/packages/core/src/css/libCssExtractLoader.ts index 7f9c09021..6faa2aae9 100644 --- a/packages/core/src/css/libCssExtractLoader.ts +++ b/packages/core/src/css/libCssExtractLoader.ts @@ -8,12 +8,12 @@ import path, { extname } from 'node:path'; import type { Rspack } from '@rsbuild/core'; -export const BASE_URI = "webpack://"; -export const MODULE_TYPE = "css/mini-extract"; -export const AUTO_PUBLIC_PATH = "__mini_css_extract_plugin_public_path_auto__"; +export const BASE_URI = 'webpack://'; +export const MODULE_TYPE = 'css/mini-extract'; +export const AUTO_PUBLIC_PATH = '__mini_css_extract_plugin_public_path_auto__'; export const ABSOLUTE_PUBLIC_PATH: string = `${BASE_URI}/mini-css-extract-plugin/`; export const SINGLE_DOT_PATH_SEGMENT = - "__mini_css_extract_plugin_single_dot_path_segment__"; + '__mini_css_extract_plugin_single_dot_path_segment__'; interface DependencyDescription { identifier: string; @@ -28,9 +28,7 @@ interface DependencyDescription { } // https://github.com/web-infra-dev/rspack/blob/c0986d39b7d647682f10fcef5bbade39fd016eca/packages/rspack/src/config/types.ts#L10 -type Filename = - | string - | ((pathData: any, assetInfo?: any) => string); +type Filename = string | ((pathData: any, assetInfo?: any) => string); export interface CssExtractRspackLoaderOptions { publicPath?: string | ((resourcePath: string, context: string) => string); @@ -92,32 +90,31 @@ export const pitch: Rspack.LoaderDefinition['pitch'] = function ( let { publicPath } = this._compilation!.outputOptions; + if (typeof options.publicPath === 'string') { + // eslint-disable-next-line prefer-destructuring + publicPath = options.publicPath; + } else if (typeof options.publicPath === 'function') { + publicPath = options.publicPath(this.resourcePath, this.rootContext); + } - if (typeof options.publicPath === "string") { - // eslint-disable-next-line prefer-destructuring - publicPath = options.publicPath; - } else if (typeof options.publicPath === "function") { - publicPath = options.publicPath(this.resourcePath, this.rootContext); - } - - if (publicPath === "auto") { - publicPath = AUTO_PUBLIC_PATH; - } + if (publicPath === 'auto') { + publicPath = AUTO_PUBLIC_PATH; + } - let publicPathForExtract: Filename | undefined; + let publicPathForExtract: Filename | undefined; - if (typeof publicPath === "string") { - const isAbsolutePublicPath = /^[a-zA-Z][a-zA-Z\d+\-.]*?:/.test(publicPath); + if (typeof publicPath === 'string') { + const isAbsolutePublicPath = /^[a-zA-Z][a-zA-Z\d+\-.]*?:/.test(publicPath); - publicPathForExtract = isAbsolutePublicPath - ? publicPath - : `${ABSOLUTE_PUBLIC_PATH}${publicPath.replace( - /\./g, - SINGLE_DOT_PATH_SEGMENT - )}`; - } else { - publicPathForExtract = publicPath; - } + publicPathForExtract = isAbsolutePublicPath + ? publicPath + : `${ABSOLUTE_PUBLIC_PATH}${publicPath.replace( + /\./g, + SINGLE_DOT_PATH_SEGMENT, + )}`; + } else { + publicPathForExtract = publicPath; + } const handleExports = ( originalExports: diff --git a/packages/core/src/css/utils.ts b/packages/core/src/css/utils.ts index 6223fea5d..3fd765500 100644 --- a/packages/core/src/css/utils.ts +++ b/packages/core/src/css/utils.ts @@ -1,22 +1,25 @@ /** - * This function is copied from + * This function is copied from * https://github.com/webpack-contrib/mini-css-extract-plugin/blob/3effaa0319bad5cc1bf0ae760553bf7abcbc35a4/src/utils.js#L169 + * linted by biome */ -function getUndoPath(filename: string, outputPath: string, enforceRelative: boolean): string { +function getUndoPath( + filename: string, + outputPathArg: string, + enforceRelative: boolean, +): string { let depth = -1; - let append = ""; + let append = ''; - // eslint-disable-next-line no-param-reassign - outputPath = outputPath.replace(/[\\/]$/, ""); + let outputPath = outputPathArg.replace(/[\\/]$/, ''); for (const part of filename.split(/[/\\]+/)) { - if (part === "..") { + if (part === '..') { if (depth > -1) { - // eslint-disable-next-line no-plusplus depth--; } else { - const i = outputPath.lastIndexOf("/"); - const j = outputPath.lastIndexOf("\\"); + const i = outputPath.lastIndexOf('/'); + const j = outputPath.lastIndexOf('\\'); const pos = i < 0 ? j : j < 0 ? i : Math.max(i, j); if (pos < 0) { @@ -25,20 +28,18 @@ function getUndoPath(filename: string, outputPath: string, enforceRelative: bool append = `${outputPath.slice(pos + 1)}/${append}`; - // eslint-disable-next-line no-param-reassign outputPath = outputPath.slice(0, pos); } - } else if (part !== ".") { - // eslint-disable-next-line no-plusplus + } else if (part !== '.') { depth++; } } return depth > 0 - ? `${"../".repeat(depth)}${append}` + ? `${'../'.repeat(depth)}${append}` : enforceRelative - ? `./${append}` - : append; + ? `./${append}` + : append; } -export { getUndoPath } \ No newline at end of file +export { getUndoPath }; diff --git a/tests/integration/style/sass/bundle-false/rslib.config.ts b/tests/integration/style/sass/bundle-false/rslib.config.ts index b659670c7..54163b80c 100644 --- a/tests/integration/style/sass/bundle-false/rslib.config.ts +++ b/tests/integration/style/sass/bundle-false/rslib.config.ts @@ -11,7 +11,7 @@ export default defineConfig({ entry: { index: [ '../__fixtures__/src/**/*.scss', - '../__fixtures__/foundation/logo.svg' + '../__fixtures__/foundation/logo.svg', ], }, }, @@ -26,7 +26,7 @@ export default defineConfig({ target: 'web', assetPrefix: 'auto', dataUriLimit: { - svg: 0 - } + svg: 0, + }, }, }); From a3675a45104d6ce9599533b36598d29aa8d8699c Mon Sep 17 00:00:00 2001 From: sunyiteng Date: Thu, 19 Dec 2024 16:57:03 +0800 Subject: [PATCH 3/5] chore: lint --- .../CounterButton/index.module.scss | 2 +- tests/e2e/react-component/index.pw.test.ts | 26 +++++++++---------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/examples/react-component-bundle-false/src/components/CounterButton/index.module.scss b/examples/react-component-bundle-false/src/components/CounterButton/index.module.scss index 6b798f2ca..19301eef2 100644 --- a/examples/react-component-bundle-false/src/components/CounterButton/index.module.scss +++ b/examples/react-component-bundle-false/src/components/CounterButton/index.module.scss @@ -1,3 +1,3 @@ .button { - background: url("../../assets/logo.svg"); + background: yellow; } diff --git a/tests/e2e/react-component/index.pw.test.ts b/tests/e2e/react-component/index.pw.test.ts index 54935d837..d6a24c0bc 100644 --- a/tests/e2e/react-component/index.pw.test.ts +++ b/tests/e2e/react-component/index.pw.test.ts @@ -58,36 +58,36 @@ test('should render example "react-component-bundle" successfully', async ({ await rsbuild.close(); }); -test('should render example "react-component-umd" successfully', async ({ +test('should render example "react-component-bundle-false" successfully', async ({ page, }) => { - const umdPath = path.resolve( - getCwdByExample('react-component-umd'), - './dist/umd/index.js', - ); - fs.mkdirSync(path.resolve(__dirname, './public/umd'), { recursive: true }); - fs.copyFileSync(umdPath, path.resolve(__dirname, './public/umd/index.js')); - const rsbuild = await dev({ cwd: __dirname, page, - environment: ['umd'], + environment: ['bundleFalse'], }); await counterCompShouldWork(page); + await styleShouldWork(page); + await assetShouldWork(page); await rsbuild.close(); }); - -test('should render example "react-component-bundle-false" successfully', async ({ +test('should render example "react-component-umd" successfully', async ({ page, }) => { + const umdPath = path.resolve( + getCwdByExample('react-component-umd'), + './dist/umd/index.js', + ); + fs.mkdirSync(path.resolve(__dirname, './public/umd'), { recursive: true }); + fs.copyFileSync(umdPath, path.resolve(__dirname, './public/umd/index.js')); + const rsbuild = await dev({ cwd: __dirname, page, - environment: ['bundleFalse'], + environment: ['umd'], }); await counterCompShouldWork(page); - await styleShouldWork(page); await rsbuild.close(); }); From a0d16cd456d85caceedd3e0afd0fcaca182c50b6 Mon Sep 17 00:00:00 2001 From: sunyiteng Date: Thu, 19 Dec 2024 17:11:35 +0800 Subject: [PATCH 4/5] chore: update --- examples/react-component-bundle-false/src/index.tsx | 1 + tests/e2e/react-component/index.pw.test.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/examples/react-component-bundle-false/src/index.tsx b/examples/react-component-bundle-false/src/index.tsx index b7e472bb2..b9ceb8718 100644 --- a/examples/react-component-bundle-false/src/index.tsx +++ b/examples/react-component-bundle-false/src/index.tsx @@ -8,6 +8,7 @@ export const Counter: React.FC = () => { return (
+

React

Counter: {count}

diff --git a/tests/e2e/react-component/index.pw.test.ts b/tests/e2e/react-component/index.pw.test.ts index d6a24c0bc..ff618c545 100644 --- a/tests/e2e/react-component/index.pw.test.ts +++ b/tests/e2e/react-component/index.pw.test.ts @@ -72,6 +72,7 @@ test('should render example "react-component-bundle-false" successfully', async await assetShouldWork(page); await rsbuild.close(); }); + test('should render example "react-component-umd" successfully', async ({ page, }) => { From 750095730a4e59ed5e003fe20e4f740f33a34a03 Mon Sep 17 00:00:00 2001 From: sunyiteng Date: Thu, 19 Dec 2024 17:23:24 +0800 Subject: [PATCH 5/5] chore: update --- tests/integration/asset/limit/rslib.config.ts | 3 --- tests/integration/style/sass/bundle-false/rslib.config.ts | 3 --- 2 files changed, 6 deletions(-) diff --git a/tests/integration/asset/limit/rslib.config.ts b/tests/integration/asset/limit/rslib.config.ts index 0d0ead07a..f472330cf 100644 --- a/tests/integration/asset/limit/rslib.config.ts +++ b/tests/integration/asset/limit/rslib.config.ts @@ -37,9 +37,6 @@ export default defineConfig({ distPath: { root: './dist/esm/external-bundleless', }, - dataUriLimit: { - svg: 0, - }, }, }), ], diff --git a/tests/integration/style/sass/bundle-false/rslib.config.ts b/tests/integration/style/sass/bundle-false/rslib.config.ts index 54163b80c..7ff820973 100644 --- a/tests/integration/style/sass/bundle-false/rslib.config.ts +++ b/tests/integration/style/sass/bundle-false/rslib.config.ts @@ -25,8 +25,5 @@ export default defineConfig({ output: { target: 'web', assetPrefix: 'auto', - dataUriLimit: { - svg: 0, - }, }, });