diff --git a/packages/cli/package.json b/packages/cli/package.json index b503431d38eee..cbd9366ee6172 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -109,7 +109,6 @@ "jest-runtime": "^29.0.2", "json-schema": "^0.4.0", "lodash": "^4.17.21", - "mini-css-extract-plugin": "^2.4.2", "minimatch": "^5.1.1", "node-fetch": "^2.6.7", "node-libs-browser": "^2.2.1", @@ -131,7 +130,6 @@ "semver": "^7.5.3", "style-loader": "^3.3.1", "sucrase": "^3.20.2", - "swc-loader": "^0.2.3", "tar": "^6.1.12", "terser-webpack-plugin": "^5.1.3", "tsx": "^4.0.0", diff --git a/packages/cli/src/lib/bundler/config.ts b/packages/cli/src/lib/bundler/config.ts index f2ccf7ad95ad9..1b59fed79cde3 100644 --- a/packages/cli/src/lib/bundler/config.ts +++ b/packages/cli/src/lib/bundler/config.ts @@ -237,6 +237,10 @@ export async function createConfig( }, plugins, cache: withCache, + // We're still using `style-loader` for custom `insert` option + experiments: { + css: false, + }, }; } diff --git a/packages/cli/src/lib/bundler/transforms.ts b/packages/cli/src/lib/bundler/transforms.ts index 16d955a7a3c9e..38925a08912fe 100644 --- a/packages/cli/src/lib/bundler/transforms.ts +++ b/packages/cli/src/lib/bundler/transforms.ts @@ -14,10 +14,10 @@ * limitations under the License. */ +import ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import { ModuleOptions, RspackPluginInstance } from '@rspack/core'; -// import MiniCssExtractPlugin from 'mini-css-extract-plugin'; + import { svgrTemplate } from '../svgrTemplate'; -import ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin'; type Transforms = { loaders: ModuleOptions['rules']; @@ -55,7 +55,7 @@ export const transforms = (options: TransformOptions): Transforms => { exclude: /node_modules/, use: [ { - loader: require.resolve('swc-loader'), + loader: 'builtin:swc-loader', options: { jsc: { target: 'es2019', @@ -83,7 +83,7 @@ export const transforms = (options: TransformOptions): Transforms => { exclude: /node_modules/, use: [ { - loader: require.resolve('swc-loader'), + loader: 'builtin:swc-loader', options: { jsc: { target: 'es2019', @@ -116,7 +116,7 @@ export const transforms = (options: TransformOptions): Transforms => { test: [/\.icon\.svg$/], use: [ { - loader: require.resolve('swc-loader'), + loader: 'builtin:swc-loader', options: { jsc: { target: 'es2019', @@ -172,15 +172,6 @@ export const transforms = (options: TransformOptions): Transforms => { { test: /\.css$/i, use: [ - // unsupported yet, see also https://github.com/web-infra-dev/rspack/issues/3210 - // isDev - // ? { - // loader: require.resolve('style-loader'), - // options: { - // insert: insertBeforeJssStyles, - // }, - // } - // : MiniCssExtractPlugin.loader, { loader: require.resolve('style-loader'), options: { @@ -208,15 +199,6 @@ export const transforms = (options: TransformOptions): Transforms => { }), ); } - } else { - // unsupported yet, see also https://github.com/web-infra-dev/rspack/issues/3210 - // plugins.push( - // new MiniCssExtractPlugin({ - // filename: 'static/[name].[contenthash:8].css', - // chunkFilename: 'static/[name].[id].[contenthash:8].css', - // insert: insertBeforeJssStyles, // Only applies to async chunks - // }), - // ); } return { loaders, plugins }; diff --git a/packages/cli/src/types.d.ts b/packages/cli/src/types.d.ts index 2729b27d64359..e1c3451f90081 100644 --- a/packages/cli/src/types.d.ts +++ b/packages/cli/src/types.d.ts @@ -85,112 +85,6 @@ declare module 'react-dev-utils/FileSizeReporter' { ): void; } -declare module 'mini-css-extract-plugin' { - import webpack = require('webpack'); - - /** - * Lightweight CSS extraction webpack plugin. - * - * This plugin extracts CSS into separate files. It creates a CSS file per JS file which - * contains CSS. It supports On-Demand-Loading of CSS and SourceMaps. - * - * Configuration Detail: https://github.com/webpack-contrib/mini-css-extract-plugin#configuration - */ - export default class MiniCssExtractPlugin { - /** - * Webpack loader always used at the end of loaders list (ie. array index zero). - */ - static loader: string; - - constructor(options?: MiniCssExtractPlugin.PluginOptions); - - /** - * Apply the plugin - */ - apply(compiler: webpack.Compiler): void; - } - - namespace MiniCssExtractPlugin { - interface PluginOptions { - /** - * Works like [`output.filename`](https://webpack.js.org/configuration/output/#outputfilename). - */ - filename?: Required['output']['filename']; - /** - * Works like [`output.chunkFilename`](https://webpack.js.org/configuration/output/#outputchunkfilename). - */ - chunkFilename?: string; - /** - * For projects where CSS ordering has been mitigated through consistent - * use of scoping or naming conventions, the CSS order warnings can be - * disabled by setting this flag to true for the plugin. - */ - ignoreOrder?: boolean; - /** - * Specify where to insert the link tag. - * - * A string value specifies a DOM query for a parent element to attach to. - * - * A function allows to override default behavior for non-entry CSS chunks. - * This code will run in the browser alongside your application. It is recommend - * to only use ECMA 5 features and syntax. The function won't have access to the - * scope of the webpack configuration module. - * - * @default function() { document.head.appendChild(linkTag); } - */ - insert?: string | ((linkTag: any) => void); - /** - * Specify additional html attributes to add to the link tag. - * - * Note: These are only applied to dynamically loaded css chunks. To modify link - * attributes for entry CSS chunks, please use html-webpack-plugin. - */ - attributes?: Record; - /** - * This option allows loading asynchronous chunks with a custom link type, such as - * ``. - * - * `false` disables the link `type` attribute. - * - * @default 'text/css' - */ - linkType?: string | false | 'text/css'; - } - interface LoaderOptions { - /** - * Overrides [`output.publicPath`](https://webpack.js.org/configuration/output/#outputpublicpath). - * @default output.publicPath - */ - publicPath?: string | ((resourcePath: string, context: string) => string); - /** - * If false, the plugin will extract the CSS but **will not** emit the file - * @default true - */ - emit?: boolean; - /** - * By default, `mini-css-extract-plugin` generates JS modules that use the ES modules syntax. - * There are some cases in which using ES modules is beneficial, - * like in the case of module concatenation and tree shaking. - * @default true - */ - esModule?: boolean; - modules?: { - /** - * Enables/disables ES modules named export for locals. - * - * Names of locals are converted to camelCase. It is not allowed to use - * JavaScript reserved words in CSS class names. Options `esModule` and - * `modules.namedExport` in css-loader and MiniCssExtractPlugin.loader - * must be enabled. - * - * @default false - */ - namedExport?: boolean; - }; - } - } -} - declare module 'fork-ts-checker-webpack-plugin/lib/ForkTsCheckerWebpackPlugin' {} declare module 'webpack-node-externals' { export default function webpackNodeExternals( diff --git a/yarn.lock b/yarn.lock index 1bd47ca1ac20c..3a5757a0cabac 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3678,7 +3678,6 @@ __metadata: jest-runtime: ^29.0.2 json-schema: ^0.4.0 lodash: ^4.17.21 - mini-css-extract-plugin: ^2.4.2 minimatch: ^5.1.1 msw: ^1.0.0 node-fetch: ^2.6.7 @@ -3702,7 +3701,6 @@ __metadata: semver: ^7.5.3 style-loader: ^3.3.1 sucrase: ^3.20.2 - swc-loader: ^0.2.3 tar: ^6.1.12 terser-webpack-plugin: ^5.1.3 ts-node: ^10.0.0 @@ -35112,18 +35110,6 @@ __metadata: languageName: node linkType: hard -"mini-css-extract-plugin@npm:^2.4.2": - version: 2.8.0 - resolution: "mini-css-extract-plugin@npm:2.8.0" - dependencies: - schema-utils: ^4.0.0 - tapable: ^2.2.1 - peerDependencies: - webpack: ^5.0.0 - checksum: c1edc3ee0e1b3514c3323fa72ad38e993f357964e76737f1d7bb6cf50a0af1ac071080ec16b4e1a94688d23f78533944badad50cd0f00d2ae176f9c58c1f2029 - languageName: node - linkType: hard - "minim@npm:~0.23.8": version: 0.23.8 resolution: "minim@npm:0.23.8" @@ -42953,16 +42939,6 @@ __metadata: languageName: node linkType: hard -"swc-loader@npm:^0.2.3": - version: 0.2.4 - resolution: "swc-loader@npm:0.2.4" - peerDependencies: - "@swc/core": ^1.2.147 - webpack: ">=2" - checksum: f23bfe8900b35abdcb9910a2749f3c9d66edf5c660afc67fcf7983647eaec322e024d1edd3bd9fd48bd3191eea0616f67b5f8b5f923e3a648fa5b448683c3213 - languageName: node - linkType: hard - "swr@npm:^2.0.0": version: 2.2.4 resolution: "swr@npm:2.2.4"