feat(pack): support merge postcss config

crates/pack-schema/src/lib.rs

@@ -1186,9 +1186,12 @@ pub struct SchemaStyleConfig {
     #[schemars(description = "CSS Modules configuration")]
     pub css_modules: Option<SchemaCssModulesConfig>,
 
-    /// Inline PostCSS configuration passed directly to the PostCSS transform
+    /// Inline PostCSS configuration. Its plugins run after plugins from a discovered config file
+    /// in the same PostCSS pass.
     #[serde(skip_serializing_if = "Option::is_none")]
-    #[schemars(description = "Inline PostCSS configuration")]
+    #[schemars(
+        description = "Inline PostCSS configuration appended after a discovered config file"
+    )]
     pub postcss: Option<serde_json::Value>,
 
     /// Sass configuration

crates/pack-tests/tests/snapshot/style/merged_postcss_config/config.json

@@ -0,0 +1,31 @@
+{
+  "config": {
+    "entry": [
+      {
+        "import": "input/index.js",
+        "name": "main"
+      }
+    ],
+    "sourceMaps": false,
+    "styles": {
+      "postcss": {
+        "plugins": [
+          [
+            "postcss-plugin-px2rem",
+            {
+              "rootValue": 16,
+              "unitPrecision": 5,
+              "replace": true,
+              "mediaQuery": false,
+              "minPixelValue": 0
+            }
+          ]
+        ]
+      }
+    },
+    "optimization": {
+      "minify": false,
+      "moduleIds": "named"
+    }
+  }
+}

crates/pack-tests/tests/snapshot/style/merged_postcss_config/input/index.js

@@ -0,0 +1,3 @@
+import "./style.css";
+
+console.log("merged postcss config test");

crates/pack-tests/tests/snapshot/style/merged_postcss_config/input/style.css

@@ -0,0 +1,7 @@
+.merged-postcss {
+  width: 32px;
+
+  .child {
+    height: 16px;
+  }
+}

crates/pack-tests/tests/snapshot/style/merged_postcss_config/output/input_index_a847b181.js

@@ -0,0 +1,9 @@
+(globalThis["TURBOPACK"] || (globalThis["TURBOPACK"] = [])).push([typeof document === "object" ? document.currentScript : undefined,
+"[project]/style/merged_postcss_config/input/index.js [client] (ecmascript)", ((__turbopack_context__) => {
+"use strict";
+
+;
+console.log("merged postcss config test");
+__turbopack_context__.s([]);
+}),
+]);

crates/pack-tests/tests/snapshot/style/merged_postcss_config/output/input_style_e0853100.css

@@ -0,0 +1,8 @@
+/* [project]/style/merged_postcss_config/input/style.css [client] (css) */
+.merged-postcss {
+  width: 2rem;
+}
+
+.merged-postcss .child {
+  height: 1rem;
+}

crates/pack-tests/tests/snapshot/style/merged_postcss_config/output/main.js

@@ -0,0 +1,5 @@
+(globalThis["TURBOPACK"] || (globalThis["TURBOPACK"] = [])).push([
+    typeof document === "object" ? document.currentScript : undefined,
+    {"otherChunks":["input_style_e0853100.css","input_index_a847b181.js"],"runtimeModuleIds":["[project]/style/merged_postcss_config/input/index.js [client] (ecmascript)"]}
+]);
+// Dummy runtime

crates/pack-tests/tests/snapshot/style/merged_postcss_config/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    "postcss-nested": {},
+  },
+};

examples/with-postcss/README.md

@@ -1,10 +1,10 @@
 # with-postcss
 
-This example demonstrates utoopack's inline `styles.postcss` configuration in
-`utoopack.config.mjs`.
+This example demonstrates utoopack's merged PostCSS configuration.
 
-It passes `postcss-plugin-px2rem` directly through `utoopack.config.mjs` instead of
-using a separate `postcss.config.js` file.
+`postcss.config.js` supplies `postcss-nested`, while `styles.postcss.plugins`
+supplies `postcss-plugin-px2rem`. Utoopack runs the file plugins first and
+appends the inline plugins in the same PostCSS pass.
 
 To verify it locally:
 
@@ -13,5 +13,5 @@ npm install
 npm run dev
 ```
 
-Then inspect the emitted CSS and confirm `px` values like `40px`, `32px`, and
-`24px` are transformed into `rem` values.
+Then inspect the emitted CSS and confirm nested selectors are flattened and `px`
+values like `40px`, `32px`, and `24px` are transformed into `rem` values.

examples/with-postcss/package.json

@@ -15,6 +15,7 @@
     "@types/react-dom": "^18.2.0",
     "@utoo/pack-cli": "*",
     "postcss": "^8.4.31",
+    "postcss-nested": "^6.2.0",
     "postcss-plugin-px2rem": "^0.8.1"
   }
 }

examples/with-postcss/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    "postcss-nested": {},
+  },
+};

examples/with-postcss/src/index.jsx

@@ -6,13 +6,13 @@ function App() {
   return (
     <main className="page-shell">
       <section className="hero-card">
-        <span className="eyebrow">PostCSS Inline Config</span>
-        <h1>px2rem Example</h1>
+        <span className="eyebrow">PostCSS Merged Config</span>
+        <h1>postcss-nested + px2rem</h1>
         <p className="lede">
-          This example uses <code>styles.postcss.plugins</code> in
-          <code>utoopack.json</code> to pass the{" "}
-          <code>postcss-plugin-px2rem</code>
-          plugin directly into utoopack.
+          This example loads <code>postcss-nested</code> from
+          <code>postcss.config.js</code>, then appends
+          <code>postcss-plugin-px2rem</code> from
+          <code>styles.postcss.plugins</code>.
         </p>
 
         <div className="stats-row">

examples/with-postcss/src/main.css

@@ -51,10 +51,12 @@ code {
   text-transform: uppercase;
 }
 
-.hero-card h1 {
-  margin: 0 0 16px;
-  font-size: 40px;
-  line-height: 48px;
+.hero-card {
+  h1 {
+    margin: 0 0 16px;
+    font-size: 40px;
+    line-height: 48px;
+  }
 }
 
 .lede {
@@ -110,9 +112,11 @@ code {
     padding: 24px;
   }
 
-  .hero-card h1 {
-    font-size: 32px;
-    line-height: 38px;
+  .hero-card {
+    h1 {
+      font-size: 32px;
+      line-height: 38px;
+    }
   }
 
   .stats-row {

packages/pack-shared/src/config.ts

@@ -337,6 +337,10 @@ export interface ConfigComplete {
       localIdentName?: string;
     };
     emotion?: boolean | EmotionOptions;
+    /**
+     * Inline PostCSS configuration. Its plugins run after plugins from a
+     * discovered postcss.config.* file in the same PostCSS pass.
+     */
     postcss?: JSONValue;
     less?: {
       loader?: string;

packages/pack/config_schema.json

@@ -1960,7 +1960,7 @@
           "description": "Less configuration"
         },
         "postcss": {
-          "description": "Inline PostCSS configuration"
+          "description": "Inline PostCSS configuration appended after a discovered config file"
         },
         "sass": {
           "description": "Sass configuration"