From 27b54145da122d58b3057b7766b7fe7a11e601bf Mon Sep 17 00:00:00 2001 From: patricklafrance Date: Fri, 13 Dec 2024 11:51:53 -0500 Subject: [PATCH] More stuff --- docs/rsbuild/configure-build.md | 55 ++++++++++++++++++++++++++++ docs/rsbuild/configure-dev.md | 33 +++++++++++++++++ docs/rsbuild/migrate-from-webpack.md | 11 ++++-- 3 files changed, 96 insertions(+), 3 deletions(-) diff --git a/docs/rsbuild/configure-build.md b/docs/rsbuild/configure-build.md index f1ae16cf..fd2eec30 100644 --- a/docs/rsbuild/configure-build.md +++ b/docs/rsbuild/configure-build.md @@ -603,6 +603,61 @@ The `=== "true"` part of `"DEBUG": process.env.DEBUG === "true"` is very importa By default, Rsbuild injects a few environment variables into the code using the [source.define](https://rsbuild.dev/guide/advanced/env-vars#using-define) option. For additional information about these default environment variables, refer to the Rsbuild [documentation](https://rsbuild.dev/guide/advanced/env-vars#default-variables). !!! +## CSS modules typings + +When you import CSS Modules in TypeScript code, TypeScript may prompt that the module is missing a type definition: + +```bash +TS2307: Cannot find module './index.module.css' or its corresponding type declarations. +``` + +To fix this, you need to add a type declaration file for the CSS Modules, please create a `src/env.d.ts` file, and add the corresponding type declaration. + +```ts env.d.ts +/// +``` + +!!!info +Make sure the project have a dependency on `@rsbuild/core`. +!!! + +### Monorepo + +If your solution is a monorepo, ensure that projects referencing your packages that include CSS Modules, also include the necessary type definitions + +For example, given the following structure: + +``` !#3,7 +workspace +├── app +├──── tsconfig.ts +├── packages +├──── components +├────── src +├───────── Button.tsx +├───────── Button.module.css +├───────── env.d.ts +├───────── tsconfig.ts +├── package.json +``` + +Copy the CSS Modules typings into the `app` web application own `env.d.ts` file, or include the `components` package's typings into the `apps` web application `tsconfig.ts` configuration file: + +```json !#5 app/tsconfig.ts +{ + "extends": "@workleap/typescript-configs/web-application.json", + "include": [ + ".", + "../**/src/env.d.ts" + ], + "exclude": ["public", "dist", "node_modules"] +} +``` + +!!!info +For additional information abour CSS modules type declaration, refer to the Rsbuild [documentation](https://rsbuild.dev/guide/basic/css-modules#type-declaration). +!!! + ## Try it :rocket: To test your new Rsbuild configuration, open a terminal at the root of the project and execute the [CLI script added earlier](#add-a-cli-script). The build process should complete without outputting any error in the terminal and the bundle files should be available in the `/dist` folder (or any other `distPath` you configured). diff --git a/docs/rsbuild/configure-dev.md b/docs/rsbuild/configure-dev.md index 8a8e9701..c298587e 100644 --- a/docs/rsbuild/configure-dev.md +++ b/docs/rsbuild/configure-dev.md @@ -679,6 +679,39 @@ To fix this, you need to add a type declaration file for the CSS Modules, please Make sure the project have a dependency on `@rsbuild/core`. !!! +### Monorepo + +If your solution is a monorepo, ensure that projects referencing your packages that include CSS Modules, also include the necessary type definitions + +For example, given the following structure: + +``` !#3,7 +workspace +├── app +├──── tsconfig.ts +├── packages +├──── components +├────── src +├───────── Button.tsx +├───────── Button.module.css +├───────── env.d.ts +├───────── tsconfig.ts +├── package.json +``` + +Copy the CSS Modules typings into the `app` web application own `env.d.ts` file, or include the `components` package's typings into the `apps` web application `tsconfig.ts` configuration file: + +```json !#5 app/tsconfig.ts +{ + "extends": "@workleap/typescript-configs/web-application.json", + "include": [ + ".", + "../**/src/env.d.ts" + ], + "exclude": ["public", "dist", "node_modules"] +} +``` + !!!info For additional information abour CSS modules type declaration, refer to the Rsbuild [documentation](https://rsbuild.dev/guide/basic/css-modules#type-declaration). !!! diff --git a/docs/rsbuild/migrate-from-webpack.md b/docs/rsbuild/migrate-from-webpack.md index 811c1b5a..c0aaae92 100644 --- a/docs/rsbuild/migrate-from-webpack.md +++ b/docs/rsbuild/migrate-from-webpack.md @@ -33,15 +33,15 @@ Then, in the same terminal, remove the following packages: +++ pnpm ```bash -pnpm remove @workleap/webpack-configs @swc/core @swc/helpers @workleap/swc-configs webpack webpack-cli webpack-dev-server +pnpm remove @workleap/webpack-configs @swc/core @swc/helpers @workleap/swc-configs webpack webpack-cli webpack-dev-server @workleap/postcss-configs postcss ``` +++ yarn ```bash -yarn remove @workleap/webpack-configs @swc/core @swc/helpers @workleap/swc-configs webpack webpack-cli webpack-dev-server +yarn remove @workleap/webpack-configs @swc/core @swc/helpers @workleap/swc-configs webpack webpack-cli webpack-dev-server @workleap/postcss-configs postcss ``` +++ npm ```bash -npm uninstall @workleap/webpack-configs @swc/core @swc/helpers @workleap/swc-configs webpack webpack-cli webpack-dev-server +npm uninstall @workleap/webpack-configs @swc/core @swc/helpers @workleap/swc-configs webpack webpack-cli webpack-dev-server @workleap/postcss-configs postcss ``` +++ @@ -57,6 +57,7 @@ web-app ├──── index.html --> U ├── webpack.dev.js --> rsbuild.dev.ts ├── webpack.build.js --> rsbuild.build.ts +├── postcss.config.ts --> X ├── swc.build.js --> X ├── swc.dev.js --> X ├── package.json @@ -122,6 +123,10 @@ import { defineDevHostConfig } from "@workleap/rsbuild-configs"; export default defineDevHostConfig(8080); ``` +### `postcss.config.ts` + +Delete the `postcss.config.ts` file. + ### `swc.build.js` Delete the `swc.build.js` file.