@empjs/plugin-postcss 3.0.0-rc.0

package/README.md

@@ -0,0 +1,16 @@
+# @empjs/plugin-react
+## 安装 
+```
+pnpm add @empjs/plugin-postcss -D
+```
+## 使用 
+```js
+import pluginPostCss from '@empjs/plugin-postcss'
+import {defineConfig} from '@empjs/cli'
+export default defineConfig(() => {
+  return {
+    plugins: [pluginPostCss()],
+  }
+})
+
+```

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import type { GlobalStore } from '@empjs/cli';
+export type PluginPostcssType = {
+    postcssOptions: any;
+};
+declare const _default: (o: PluginPostcssType) => {
+    name: string;
+    rsConfig(store: GlobalStore): Promise<void>;
+};
+export default _default;
+declare const postcss: {
+    autoprefixer(o?: {}): {}[];
+    pxtorem(o?: {}): {}[];
+    pxtovw(o?: {}): {}[];
+};
+export { postcss };

package/dist/index.js

@@ -0,0 +1,28 @@
+import { plugins } from './plugins.js';
+//
+export default (o) => {
+    return {
+        name: '@empjs/plugin-postcss',
+        async rsConfig(store) {
+            const { chain, importResolve } = store;
+            //
+            const ruleMap = ['sass', 'less', 'css'];
+            const loaderOptions = {
+                postcssOptions: o.postcssOptions,
+            };
+            for (const ruleName of ruleMap) {
+                const rule = chain.module.rule(ruleName);
+                const useLightningcss = rule
+                    .use('postcss')
+                    .loader(importResolve('postcss-loader', import.meta.url))
+                    .options(loaderOptions);
+                //
+                if (['sass', 'less'].includes(ruleName)) {
+                    useLightningcss.before(`${ruleName}Loader`);
+                }
+            }
+        },
+    };
+};
+const postcss = plugins;
+export { postcss };

package/dist/plugins.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="node" />
+export declare const __filename: string;
+export declare const __dirname: string;
+export declare const require: NodeRequire;
+export declare const plugins: {
+    autoprefixer(o?: {}): {}[];
+    pxtorem(o?: {}): {}[];
+    pxtovw(o?: {}): {}[];
+};

package/dist/plugins.js

@@ -0,0 +1,48 @@
+import { fileURLToPath } from 'node:url';
+import { dirname } from 'node:path';
+import Module from 'node:module';
+export const __filename = fileURLToPath(import.meta.url);
+export const __dirname = dirname(__filename);
+export const require = Module.createRequire(import.meta.url);
+export const plugins = {
+    autoprefixer(o = {}) {
+        return [require.resolve('autoprefixer'), o];
+    },
+    pxtorem(o = {}) {
+        o = {
+            ...{
+                rootValue: 16,
+                unitPrecision: 5,
+                propList: ['*'],
+                selectorBlackList: [],
+                replace: true,
+                mediaQuery: false,
+                minPixelValue: 0,
+            },
+            ...o,
+        };
+        return [require.resolve('postcss-pxtorem'), o];
+    },
+    pxtovw(o = {}) {
+        o = {
+            ...{
+                unitToConvert: 'px',
+                viewportWidth: 320,
+                viewportHeight: 568, // not now used; TODO: need for different units and math for different properties
+                unitPrecision: 5,
+                viewportUnit: 'vw',
+                fontViewportUnit: 'vw', // vmin is more suitable.
+                selectorBlackList: [],
+                propList: ['*'],
+                minPixelValue: 1,
+                mediaQuery: false,
+                replace: true,
+                landscape: false,
+                landscapeUnit: 'vw',
+                landscapeWidth: 568,
+            },
+            ...o,
+        };
+        return [require.resolve('@empjs/postcss-px-to-viewport'), o];
+    },
+};

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@empjs/plugin-postcss",
+  "version": "3.0.0-rc.0",
+  "description": "emp postcss plugin",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "maintainers": [
+    "xuhongbin",
+    "ckken"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/empjs/emp.git",
+    "directory": "packages/plugin-postcss"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "postcss"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "scripts": {
+    "dev": "rimraf dist && pnpm run /^dev:.*/",
+    "dev:tsc": "tsc -w",
+    "dev:tsc-alias": "tsc-alias -w",
+    "build": "rimraf dist && pnpm run /^build:.*/",
+    "build:ts": "tsc && tsc-alias"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "author": "Ken",
+  "devDependencies": {
+    "@empjs/cli": "workspace:*",
+    "@types/react": "^18.2.30",
+    "rimraf": "^5.0.5",
+    "tsc-alias": "^1.8.8"
+  },
+  "dependencies": {
+    "postcss": "^8.4.38",
+    "postcss-loader": "^8.1.1",
+    "autoprefixer": "^10.4.19",
+    "@empjs/postcss-px-to-viewport": "^1.0.0",
+    "postcss-pxtorem": "^6.1.0"
+  }
+}