Skip to content

fix: always use postcss-load-config to load external config #969

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chenjiahan merged 2 commits into from
Dec 15, 2023
Merged

fix: always use postcss-load-config to load external config #969

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b89ced8
fix: always use postcss-load-config to load external config
inottn Dec 15, 2023
17828e2
chore: simplify logic
inottn Dec 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/document/docs/en/config/tools/postcss.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@

```js
const defaultOptions = {
config: false,
postcssOptions: {
plugins: [
require('postcss-flexbugs-fixes'),
Expand All @@ -18,6 +17,8 @@ const defaultOptions = {

Rsbuild integrates PostCSS by default, you can configure [postcss-loader](https://github.com/webpack-contrib/postcss-loader) through `tools.postcss`.

Note that, for performance, Rsbuild uses [postcss-load-config](https://github.com/postcss/postcss-load-config) to load external config files and merges them with the default config.

### Function Type

When the value is a Function, the internal default config is passed as the first parameter, and the config object can be modified directly without returning, or an object can be returned as the final result; the second parameter is a set of tool functions for modifying the postcss-loader config.
Expand Down
3 changes: 2 additions & 1 deletion packages/document/docs/zh/config/tools/postcss.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@

```js
const defaultOptions = {
config: false,
postcssOptions: {
plugins: [
require('postcss-flexbugs-fixes'),
Expand All @@ -18,6 +17,8 @@ const defaultOptions = {

Rsbuild 默认集成 PostCSS，你可以通过 `tools.postcss` 对 [postcss-loader](https://github.com/webpack-contrib/postcss-loader) 进行配置。

注意，出于性能的考虑，Rsbuild 使用 [postcss-load-config](https://github.com/postcss/postcss-load-config) 加载外部配置文件，并将其和默认配置合并。

### Function 类型

值为 Function 类型时，内部默认配置作为第一参数传入，可以直接修改配置对象不做返回，也可以返回一个对象作为最终结果；第二个参数为修改 postcss-loader 配置的工具函数集合。
Expand Down
5 changes: 4 additions & 1 deletion packages/shared/src/css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,6 @@ export const getPostcssLoaderOptions = async ({
const defaultPostcssConfig: PostCSSLoaderOptions = {
postcssOptions: {
...userPostcssConfig,
config: false,
plugins: [
...(userPostcssConfig.plugins || []),
require(getSharedPkgCompiledPath('postcss-flexbugs-fixes')),
Expand All @@ -143,6 +142,10 @@ export const getPostcssLoaderOptions = async ({
mergedConfig?.postcssOptions?.plugins!.push(...extraPlugins);
}

// always use postcss-load-config to load external config
mergedConfig.postcssOptions ||= {};
mergedConfig.postcssOptions.config = false;

return mergedConfig;
};

Expand Down