feat: postcss-loader

.gitignore

@@ -9,6 +9,7 @@
 /e2e/fixtures.umi/stable-hash/node_modules
 /e2e/fixtures.umi/*/.umi
 /e2e/fixtures.umi/*/.umi-production
+/e2e/fixtures/less.postcss/node_modules
 /tmp
 /packages/*/node_modules
 /node_modules

crates/binding/src/js_hook.rs

@@ -75,7 +75,7 @@ pub struct JsHooks {
     )]
     pub resolve_id: Option<JsFunction>,
     #[napi(
-        ts_type = "(content: { content: string, type: 'css' | 'js' }, path: string) => Promise<{ content: string, type: 'css' | 'js' } | void> | void;"
+        ts_type = "(content: string, path: string) => Promise<{ content: string, type: 'css' | 'js' } | void> | void;"
     )]
     pub transform: Option<JsFunction>,
     #[napi(ts_type = "(filePath: string) => Promise<bool> | bool;")]

docs/config.md

@@ -488,6 +488,28 @@ e.g.
 }
 ```
 
+### postcss
+
+- Type: `boolean`
+- Default: `false`
+
+Whether to enable `postcss` support.
+
+Note: If you want to use `postcss`, make sure to install `postcss`.
+
+Usage: Create a `postcss.config.js` file in the root directory of the project.
+
+e.g.
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: [
+    require("autoprefixer"),
+  ],
+};
+```
+
 ### manifest
 
 - Type: `false | { fileName?: string, basePath?: string }`

docs/config.zh-CN.md

@@ -486,6 +486,28 @@ import(/* webpackIgnore: true */ "./foo");
 }
 ```
 
+### postcss
+
+- 类型： `boolean`
+- 默认值：`false`
+
+是否启用 `postcss` 支持。
+
+注意：如果你想要使用 `postcss`，请确保安装了 `postcss`。
+
+使用：项目根目录下创建 `postcss.config.js` 文件。
+
+例如：
+
+```js
+// postcss.config.js
+module.exports = {
+  plugins: [
+    require("autoprefixer"),
+  ],
+};
+```
+
 ### manifest
 
 - 类型：`false | { fileName?: string, basePath?: string }`

e2e/fixtures/less.postcss/expect.js

@@ -0,0 +1,21 @@
+const assert = require("assert");
+
+const { parseBuildResult } = require("../../../scripts/test-utils");
+const { files } = parseBuildResult(__dirname);
+
+assert.match(
+  files["index.css"],
+  new RegExp(`.foo .bar {
+  width: 100vw;
+}`),
+  "less width is not expected"
+);
+
+assert.match(
+  files["index.css"],
+  new RegExp(`.a .b {
+  width: 100vw;
+}`),
+  "css width is not expected"
+);
+

e2e/fixtures/less.postcss/mako.config.json

@@ -0,0 +1,3 @@
+{
+  "postcss": true
+}

e2e/fixtures/less.postcss/package.json

@@ -0,0 +1,5 @@
+{
+  "devDependencies": {
+    "postcss-px-to-viewport-8-plugin": "1.2.5"
+  }
+}

e2e/fixtures/less.postcss/postcss.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  plugins: [
+    require('postcss-px-to-viewport-8-plugin')({
+      unitToConvert: 'px',
+      viewportWidth: 375,
+      propList: ['*'],
+    }),
+  ],
+};

e2e/fixtures/less.postcss/src/index.css

@@ -0,0 +1,3 @@
+.a .b {
+  width: 375px;
+}

e2e/fixtures/less.postcss/src/index.less

@@ -0,0 +1,5 @@
+.foo {
+  .bar {
+    width: 375px;
+  }
+}

e2e/fixtures/less.postcss/src/index.tsx

@@ -0,0 +1,3 @@
+import "./index.less";
+import "./index.css";
+console.log(1);

examples/with-postcss/index.css

@@ -0,0 +1,8 @@
+h2 {
+  color: red;
+}
+
+h2 .blue {
+  color: blue;
+  font-size: 24px;
+}

examples/with-postcss/index.less

@@ -0,0 +1,8 @@
+h1 {
+  color: red;
+
+  .blue {
+    color: blue;
+    font-size: 24px;
+  }
+}

examples/with-postcss/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.less';
+import './index.css';
+
+function App() {
+  return (
+    <div>
+      <h1>
+        Hello, <span className="blue">Less</span>
+      </h1>
+      <h2>
+        Hello, <span className="blue">Css</span>
+      </h2>
+    </div>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

examples/with-postcss/mako.config.json

@@ -0,0 +1,3 @@
+{
+  "postcss": true
+}

examples/with-postcss/package.json

@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "postcss-px-to-viewport-8-plugin": "^1.2.5"
+  }
+}

examples/with-postcss/postcss.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    require('postcss-px-to-viewport-8-plugin')({
+      unitToConvert: 'px',
+      viewportWidth: 375,
+      propList: ['*'],
+      landscape: true,
+      landscapeUnit: 'vw',
+      landscapeWidth: 812,
+    }),
+  ],
+};

examples/with-postcss/public/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" type="text/css" href="index.css">
+  </head>
+	<body>
+		<div id="root"></div>
+		<script src="index.js"></script>
+	</body>
+</html>

packages/mako/binding.d.ts

@@ -65,7 +65,7 @@ export interface JsHooks {
     { isEntry: bool },
   ) => Promise<{ id: string }>;
   transform?: (
-    content: { content: string; type: 'css' | 'js' },
+    content: string,
     path: string,
   ) => Promise<{ content: string; type: 'css' | 'js' } | void> | void;
   transformInclude?: (filePath: string) => Promise<bool> | bool;

packages/mako/package.json

@@ -36,6 +36,7 @@
     "lodash": "^4.17.21",
     "node-libs-browser-okam": "^2.2.5",
     "piscina": "^4.5.1",
+    "postcss-loader": "^8.1.1",
     "react-error-overlay": "6.0.9",
     "react-refresh": "^0.14.0",
     "resolve": "^1.22.8",
@@ -84,16 +85,16 @@
   },
   "optionalDependencies": {
     "@umijs/mako-darwin-arm64": "0.11.6",
+    "@umijs/mako-darwin-x64": "0.11.6",
     "@umijs/mako-linux-arm64-gnu": "0.11.6",
     "@umijs/mako-linux-arm64-musl": "0.11.6",
-    "@umijs/mako-win32-ia32-msvc": "0.11.6",
-    "@umijs/mako-darwin-x64": "0.11.6",
-    "@umijs/mako-win32-x64-msvc": "0.11.6",
     "@umijs/mako-linux-x64-gnu": "0.11.6",
-    "@umijs/mako-linux-x64-musl": "0.11.6"
+    "@umijs/mako-linux-x64-musl": "0.11.6",
+    "@umijs/mako-win32-ia32-msvc": "0.11.6",
+    "@umijs/mako-win32-x64-msvc": "0.11.6"
   },
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:umijs/mako.git"
-}
+}

packages/mako/src/binding.d.ts

@@ -65,7 +65,7 @@ export interface JsHooks {
     { isEntry: bool },
   ) => Promise<{ id: string }>;
   transform?: (
-    content: { content: string; type: 'css' | 'js' },
+    content: string,
     path: string,
   ) => Promise<{ content: string; type: 'css' | 'js' } | void> | void;
   transformInclude?: (filePath: string) => Promise<bool> | bool;

packages/mako/src/index.ts

@@ -8,13 +8,15 @@ import { type Options } from 'sass';
 import * as binding from '../binding';
 import { ForkTSChecker as ForkTSChecker } from './forkTSChecker';
 import { LessLoaderOpts, LessPlugin } from './plugins/less';
+import { PostcssPlugin } from './plugins/postcss';
 import { SassPlugin } from './plugins/sass';
 import { rustPluginResolver } from './rustPlugins';
 
 type Config = binding.BuildParams['config'] & {
   plugins?: binding.BuildParams['plugins'];
   less?: LessLoaderOpts;
   sass?: Options<'async'> & { resources: string[] };
+  postcss?: boolean;
   forkTSChecker?: boolean;
 };
 
@@ -103,6 +105,18 @@ export async function build(params: BuildParams) {
       {},
     ) || {};
 
+  // built-in postcss-loader
+  if ((makoConfig as any)?.postcss || params.config?.postcss) {
+    params.config.postcss = true;
+
+    params.config.plugins.push(
+      new PostcssPlugin({
+        ...params,
+        resolveAlias,
+      }),
+    );
+  }
+
   // built-in less-loader
   params.config.plugins.push(
     new LessPlugin({
@@ -322,6 +336,7 @@ export async function build(params: BuildParams) {
   params.config = omit(params.config, [
     'less',
     'sass',
+    'postcss',
     'forkTSChecker',
     'plugins',
   ]) as BuildParams['config'];

packages/mako/src/plugins/postcss/index.ts

@@ -0,0 +1,81 @@
+import path from 'path';
+import url from 'url';
+import { BuildParams } from '../../';
+import * as binding from '../../../binding';
+import { RunLoadersOptions, createParallelLoader } from '../../runLoaders';
+
+export class PostcssPlugin implements binding.JsHooks {
+  name: string;
+  params: BuildParams & { resolveAlias: Record<string, string> };
+  extOpts: RunLoadersOptions;
+  parallelLoader: ReturnType<typeof createParallelLoader> | undefined;
+
+  constructor(params: BuildParams & { resolveAlias: Record<string, string> }) {
+    this.name = 'postcss';
+    this.params = params;
+    this.extOpts = {
+      alias: params.resolveAlias,
+      root: params.root,
+    };
+  }
+
+  transform = async (
+    content: string,
+    filename: string,
+  ): Promise<{ content: string; type: 'css' | 'js' } | void> => {
+    if (!isTargetFile(filename)) {
+      return;
+    }
+
+    this.parallelLoader ||= createParallelLoader(
+      path.resolve(__dirname, './render.js'),
+    );
+
+    const result = await this.parallelLoader.run({
+      filename,
+      content,
+      extOpts: this.extOpts,
+    });
+
+    let css: string = '';
+
+    if (result.result) {
+      const buf = result.result[0];
+      if (Buffer.isBuffer(buf)) {
+        css = buf.toString('utf-8');
+      } else {
+        css = buf ?? '';
+      }
+    }
+
+    return {
+      content: css,
+      type: 'css',
+    };
+  };
+}
+
+function getFilename(filePath: string) {
+  let filename = '';
+  try {
+    filename = decodeURIComponent(url.parse(filePath).pathname || '');
+  } catch (e) {
+    return '';
+  }
+
+  return filename;
+}
+
+function isTargetFile(filePath: string) {
+  let filename = getFilename(filePath);
+
+  if (
+    filename?.endsWith('.css') ||
+    filename?.endsWith('.less') ||
+    filename?.endsWith('.scss')
+  ) {
+    return true;
+  }
+
+  return false;
+}