Skip to content

Commit 2a81100

Browse files
fireairforcefireairforce
authored
feat(pack): support styles.postcss (#2708)
1 parent f3f12b8 commit 2a81100

19 files changed

Lines changed: 11211 additions & 11269 deletions

File tree

‎crates/pack-core/src/client/context.rs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -258,9 +258,12 @@ pub async fn get_client_module_options_context(
258258

259259
client_rules.extend(additional_rules);
260260

261+
let postcss_config_content = (*config.postcss_config_content().await?).clone();
262+
261263
let postcss_transform_options = Some(PostCssTransformOptions {
262264
postcss_package: Some(get_postcss_package_mapping().to_resolved().await?),
263265
config_location: PostCssConfigLocation::ProjectPathOrLocalPath,
266+
config_content: postcss_config_content,
264267
..Default::default()
265268
});
266269

‎crates/pack-core/src/config.rs‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -257,6 +257,8 @@ pub struct StyleConfig {
257257
pub emotion: Option<bool>,
258258
pub auto_css_modules: Option<bool>,
259259
#[bincode(with = "turbo_bincode::serde_self_describing")]
260+
pub postcss: Option<serde_json::Value>,
261+
#[bincode(with = "turbo_bincode::serde_self_describing")]
260262
sass: Option<serde_json::Value>,
261263
#[bincode(with = "turbo_bincode::serde_self_describing")]
262264
less: Option<serde_json::Value>,
@@ -966,6 +968,19 @@ impl Config {
966968
self.styles.clone().unwrap_or_default().cell()
967969
}
968970

971+
#[turbo_tasks::function]
972+
pub fn postcss_config_content(&self) -> Result<Vc<Option<RcStr>>> {
973+
let postcss_config_content = self
974+
.styles
975+
.as_ref()
976+
.and_then(|styles| styles.postcss.as_ref())
977+
.map(serde_json::to_string)
978+
.transpose()?
979+
.map(RcStr::from);
980+
981+
Ok(Vc::cell(postcss_config_content))
982+
}
983+
969984
#[turbo_tasks::function]
970985
pub fn react(&self) -> Vc<ReactConfig> {
971986
self.react.clone().unwrap_or_default().cell()

‎crates/pack-core/src/server/contexts.rs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,9 +168,12 @@ pub async fn get_server_module_options_context(
168168

169169
server_rules.extend(additional_rules);
170170

171+
let postcss_config_content = (*config.postcss_config_content().await?).clone();
172+
171173
let postcss_transform_options = Some(PostCssTransformOptions {
172174
postcss_package: Some(get_postcss_package_mapping().to_resolved().await?),
173175
config_location: PostCssConfigLocation::ProjectPathOrLocalPath,
176+
config_content: postcss_config_content,
174177
..Default::default()
175178
});
176179

‎crates/pack-schema/src/lib.rs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -830,6 +830,11 @@ pub struct SchemaStyleConfig {
830830
#[schemars(description = "Enable automatic CSS Modules transform")]
831831
pub auto_css_modules: Option<bool>,
832832

833+
/// Inline PostCSS configuration passed directly to the PostCSS transform
834+
#[serde(skip_serializing_if = "Option::is_none")]
835+
#[schemars(description = "Inline PostCSS configuration")]
836+
pub postcss: Option<serde_json::Value>,
837+
833838
/// Sass configuration
834839
#[serde(skip_serializing_if = "Option::is_none")]
835840
#[schemars(description = "Sass configuration")]
@@ -909,6 +914,7 @@ mod tests {
909914
assert!(schema_str.contains("html"));
910915
assert!(schema_str.contains("react"));
911916
assert!(schema_str.contains("provider"));
917+
assert!(schema_str.contains("postcss"));
912918
assert!(schema_str.contains("publicPath"));
913919
assert!(schema_str.contains("cssFilename"));
914920
assert!(schema_str.contains("assetModuleFilename"));

‎crates/pack-tests/tests/snapshot/target_web/legacy_mobile/output/_project___5c265bc3.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎crates/pack-tests/tests/snapshot/target_web/legacy_mobile/output/_project___5c265bc3.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/with-postcss/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
dist
2+
node_modules

‎examples/with-postcss/README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# with-postcss
2+
3+
This example demonstrates utoopack's inline `styles.postcss` configuration in
4+
`utoopack.config.mjs`.
5+
6+
It passes `postcss-plugin-px2rem` directly through `utoopack.config.mjs` instead of
7+
using a separate `postcss.config.js` file.
8+
9+
To verify it locally:
10+
11+
```bash
12+
npm install
13+
npm run dev
14+
```
15+
16+
Then inspect the emitted CSS and confirm `px` values like `40px`, `32px`, and
17+
`24px` are transformed into `rem` values.

‎examples/with-postcss/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>with-postcss</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script src="./src/index.jsx"></script>
11+
</body>
12+
</html>

‎examples/with-postcss/package.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "with-postcss",
3+
"version": "0.0.1",
4+
"private": true,
5+
"scripts": {
6+
"dev": "up dev",
7+
"build": "up build"
8+
},
9+
"dependencies": {
10+
"react": "^18.2.0",
11+
"react-dom": "^18.2.0"
12+
},
13+
"devDependencies": {
14+
"@types/react": "^18.2.0",
15+
"@types/react-dom": "^18.2.0",
16+
"@utoo/pack-cli": "*",
17+
"postcss": "^8.4.31",
18+
"postcss-plugin-px2rem": "^0.8.1"
19+
}
20+
}

0 commit comments

Comments
 (0)