docs(website): consolidate guide / languages and Frameworks

website/docs/en/guide/language-support.mdx → website/docs/en/guide/css.mdx

@@ -1,91 +1,14 @@
 import { PackageManagerTabs } from '@theme';
 
-# Language support
-
-## TypeScript
-
-Enabling TypeScript support can be done through [`builtin:swc-loader`](/guide/builtin-swc-loader).
-
-### Transpile-only
-
-For maximum speed, `builtin:swc-loader` transpiles TypeScript source code without performing any type checking. An external tool such as `tsc` must be used for type checking.
-
-### isolatedModules
-
-To maximize parallelism, `builtin:swc-loader` will transpile each module separately. This implies that [`isolatedModules`](https://www.typescriptlang.org/tsconfig#isolatedModules) must be enabled in your TypeScript configuration. Certain language features such as `const enum` rely on parsing the entire project, and thus cannot be used with isolated module transpilation. Enable `isolatedModules` in your `tsconfig.json ` file to ensure that your IDE hints and type checker accurately reflect Rspack's module handling behavior:
-
-```json title="tsconfig.json"
-{
-  "compilerOptions": {
-    "isolatedModules": true
-  }
-}
-```
-
-### TypeCheck
-
-You can use the [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) to perform TypeScript type checking during compilation. However, it’s important to note that TypeScript’s type checking can be time-consuming, especially for larger projects. This means that the time required for type checking may exceed the build time of Rspack itself.
-
-If you are using the plugin in development mode, it won’t block the build and you can continue with the build process. However, in build mode, the plugin will block the build until the type checking is complete.
-
-Based on your actual needs, you should decide whether to enable this plugin. If the type checking process becomes a bottleneck in your build process, we recommend using TypeScript’s incremental build feature. This feature can greatly speed up the type checking process by only analyzing the changed files since the last build.
-
-To enable TypeScript’s incremental build, you can use `tsc --incremental` independently or [enabling incremental mode](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#enabling-incremental-mode) in the plugin.
-
-Enabling incremental build can help reduce type checking time, especially when only a few files have been modified. This way, you can optimize your build process without sacrificing the benefits of type checking.
-
-Remember to evaluate the trade-off between build speed and the accuracy of type checking in your specific project, and choose the best approach accordingly.
-
-## JSX and TSX
-
-Enabling TSX|JSX support can be done through [`builtin:swc-loader`](/guide/builtin-swc-loader).
-
-## Alias
-
-See [resolve.tsConfigPath](/config/resolve#resolvetsconfigpath) for details.
-
-### Node polyfills
-
-Rspack does not automatically inject polyfills for Node. If you need to use the corresponding functionality, add the [node-polyfill-webpack-plugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin) plugin and corresponding configuration in `rspack.config.js`:
-
-```ts title="rspack.config.js"
-const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
-
-module.exports = {
-  plugins: [new NodePolyfillPlugin()],
-};
-```
-
-## Static resource handling
-
-Rspack supports handling of static resources, including images, fonts, videos, etc.
-
-The relevant configuration is specified in `rspack.config.js`.
-
-```ts title="rspack.config.js"
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.png$/,
-        type: 'asset',
-      },
-    ],
-  },
-};
-```
-
-The example above will treat all `*.png` files as asset modules. For more details, see [Asset modules](/guide/asset-module).
-
-## CSS
+# CSS
 
 CSS is a first-class citizen with Rspack. Rspack has the ability to handle CSS out-of-box, so additional configuration isn't required.
 
 By default, files ending in `*.css` are treated as CSS module types. Files ending in `*.module.css` are treated as [CSS Modules](https://github.com/css-modules/css-modules) module types.
 
 If you're migrating from Webpack, you can remove the `css-loader` or `style-loader` components from your configuration to use Rspack's built-in CSS processing capabilities, as described in [migration guide](/guide/migrate-from-webpack#removing-css-loader-and-style-loader-and-mini-css-extract-plugin).
 
-### CSS Modules
+## CSS Modules
 
 A "CSS Modules" file can be referenced in Rspack like this:
 
@@ -108,7 +31,7 @@ document.getElementById('element').className = red;
 
 For more information on configuring CSS Modules, see [builtins.css.modules](config/builtins#builtinscssmodules).
 
-### PostCSS
+## PostCSS
 
 Rspack is compatible with [postcss-loader](https://github.com/webpack-contrib/postcss-loader), which you can configure like this:
 
@@ -137,7 +60,7 @@ module.exports = {
 
 The above configuration will have all `*.css` files processed by [postcss-loader](https://github.com/webpack-contrib/postcss-loader). The output will be passed to Rspack for CSS post-processing.
 
-### Less
+## Less
 
 Rspack is compatible with [less-loader](https://github.com/webpack-contrib/less-loader), which you can configure like this:
 
@@ -164,7 +87,7 @@ module.exports = {
 
 The above configuration runs all `*.less` files through the [less-loader](https://github.com/webpack-contrib/less-loader) and passes the generated results to Rspack for CSS post-processing.
 
-### Sass
+## Sass
 
 Rspack is compatible with [sass-loader](https://github.com/webpack-contrib/sass-loader), which you can configure like this:
 
@@ -191,19 +114,19 @@ module.exports = {
 
 The above configuration runs all `*.sass` files through the [sass-loader](https://github.com/webpack-contrib/sass-loader) and passes the resulting results to Rspack for CSS post-processing.
 
-### Tailwind CSS
+## Tailwind CSS
 
 [Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.
 
 Installing Tailwind CSS as a PostCSS plugin is the most seamless way to integrate it with Rspack.
 
-#### Install Tailwind CSS
+### Install Tailwind CSS
 
 Please install [tailwindcss](https://tailwindcss.com/),[autoprefixer](https://github.com/postcss/autoprefixer),[postcss](https://postcss.org/) and [postcss-loader](https://www.npmjs.com/package/) in your project.
 
 <PackageManagerTabs command="add tailwindcss autoprefixer postcss postcss-loader -D" />
 
-#### Configure Tailwind CSS
+### Configure Tailwind CSS
 
 Once installed, you need to configure `postcss-loader` in `rspack.config.js` to handle CSS files, and then add `tailwindcss` to `postcssOptions.plugins`.
 
@@ -238,18 +161,3 @@ module.exports = {
 At this point, you have completed the build configuration required to use Tailwind CSS in Rspack.
 
 Next you can follow the steps in the [Tailwind CSS Documentation](https://tailwindcss.com/docs/installation/using-postcss) to add the required configuration and code for Tailwind CSS and start using it.
-
-## JSON
-
-[JSON](https://en.wikipedia.org/wiki/JSON) is a first-class citizen with Rspack. You can import it directly, for example:
-
-```json title="example.json"
-{
-  "foo": "bar"
-}
-```
-
-```ts title="index.js"
-import json from './example.json';
-json.foo; // bar
-```

website/docs/en/guide/json.mdx

@@ -0,0 +1,14 @@
+# JSON
+
+[JSON](https://en.wikipedia.org/wiki/JSON) is a first-class citizen with Rspack. You can import it directly, for example:
+
+```json title="example.json"
+{
+  "foo": "bar"
+}
+```
+
+```ts title="index.js"
+import json from './example.json';
+json.foo; // bar
+```

website/docs/en/guide/nodejs.mdx

@@ -0,0 +1,13 @@
+# Node.js
+
+## Polyfills
+
+Rspack does not automatically inject polyfills for Node. If you need to use the corresponding functionality, add the [node-polyfill-webpack-plugin](https://www.npmjs.com/package/node-polyfill-webpack-plugin) plugin and corresponding configuration in `rspack.config.js`:
+
+```ts title="rspack.config.js"
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
+
+module.exports = {
+  plugins: [new NodePolyfillPlugin()],
+};
+```

website/docs/en/guide/typescript.mdx

@@ -0,0 +1,41 @@
+# TypeScript
+
+Enabling TypeScript support can be done through [`builtin:swc-loader`](/guide/builtin-swc-loader).
+
+## Transpile-only
+
+For maximum speed, `builtin:swc-loader` transpiles TypeScript source code without performing any type checking. An external tool such as `tsc` must be used for type checking.
+
+## isolatedModules
+
+To maximize parallelism, `builtin:swc-loader` will transpile each module separately. This implies that [`isolatedModules`](https://www.typescriptlang.org/tsconfig#isolatedModules) must be enabled in your TypeScript configuration. Certain language features such as `const enum` rely on parsing the entire project, and thus cannot be used with isolated module transpilation. Enable `isolatedModules` in your `tsconfig.json ` file to ensure that your IDE hints and type checker accurately reflect Rspack's module handling behavior:
+
+```json title="tsconfig.json"
+{
+  "compilerOptions": {
+    "isolatedModules": true
+  }
+}
+```
+
+## TypeCheck
+
+You can use the [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) to perform TypeScript type checking during compilation. However, it’s important to note that TypeScript’s type checking can be time-consuming, especially for larger projects. This means that the time required for type checking may exceed the build time of Rspack itself.
+
+If you are using the plugin in development mode, it won’t block the build and you can continue with the build process. However, in build mode, the plugin will block the build until the type checking is complete.
+
+Based on your actual needs, you should decide whether to enable this plugin. If the type checking process becomes a bottleneck in your build process, we recommend using TypeScript’s incremental build feature. This feature can greatly speed up the type checking process by only analyzing the changed files since the last build.
+
+To enable TypeScript’s incremental build, you can use `tsc --incremental` independently or [enabling incremental mode](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#enabling-incremental-mode) in the plugin.
+
+Enabling incremental build can help reduce type checking time, especially when only a few files have been modified. This way, you can optimize your build process without sacrificing the benefits of type checking.
+
+Remember to evaluate the trade-off between build speed and the accuracy of type checking in your specific project, and choose the best approach accordingly.
+
+## JSX and TSX
+
+Enabling TSX|JSX support can be done through [`builtin:swc-loader`](/guide/builtin-swc-loader).
+
+## Alias
+
+See [resolve.tsConfigPath](/config/resolve#resolvetsconfigpath) for details.

website/docs/en/index.md

@@ -34,7 +34,7 @@ features:
   - title: Batteries Included
     details: Out-of-the-box support for TypeScript, JSX, CSS, CSS Modules, Sass, and more.
     icon: 🎨
-    link: /guide/language-support
+    link: /guide/typescript
   - title: Production Optimizations
     details: Core optimizations such as tree shaking and minification have integrated implementations rather than deferring to plugins.
     icon: 🛠️