postcss-units-to-px 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ice breaker
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,132 @@
+# postcss-units-to-px
+
+Convert multiple CSS units to `px` with PostCSS. The default unit map covers `rem`, `em`, `vw`, `vh`, `vmin`, `vmax`, and `rpx`, and you can override or extend the rules as needed.
+
+## Install
+
+```bash
+pnpm add postcss-units-to-px postcss
+```
+
+## Usage
+
+```ts
+import postcss from 'postcss'
+import unitsToPx from 'postcss-units-to-px'
+
+const input = '.rule { margin: 1rem 1vw; }'
+const output = postcss(unitsToPx()).process(input).css
+```
+
+## Options
+
+Type: `Object | Null`
+Default:
+
+```ts
+const defaultOptions = {
+  unitMap: {
+    rem: 16,
+    em: 16,
+    vw: 3.75,
+    vh: 6.67,
+    vmin: 3.75,
+    vmax: 6.67,
+    rpx: 0.5,
+  },
+  unitPrecision: 5,
+  selectorBlackList: [],
+  propList: ['*'],
+  replace: true,
+  mediaQuery: false,
+  minValue: 0,
+  exclude: [/node_modules/i],
+  disabled: false,
+}
+```
+
+### unitMap
+
+Type: `Record<string, number | (value, context) => number | null>`
+
+Per-unit conversion rules. A numeric value is treated as a multiplier (e.g. `1rem * 16 = 16px`). A function should return the final px value. If the rule is `null`, the plugin will fall back to the global `transform` (if provided).
+
+Note: `unitMap` merges with defaults. To override a unit, set that key explicitly.
+
+### transform
+
+Type: `(value, unit, context) => number`
+
+Global conversion function used when a unit does not have a per-unit rule (or when that rule is `null`).
+
+### unitPrecision
+
+Type: `number`
+Default: `5`
+
+Decimal precision for generated px values.
+
+### minValue
+
+Type: `number`
+Default: `0`
+
+Minimum source value to convert. Values below this are left unchanged.
+
+### propList
+
+Type: `(string | RegExp)[]`
+
+Only declarations with matching properties are processed. Supports `'*'` to match all properties.
+
+### selectorBlackList
+
+Type: `(string | RegExp)[]`
+
+Selectors to ignore and leave unchanged.
+
+### replace
+
+Type: `boolean`
+
+Replace the original declaration value instead of adding a fallback declaration.
+
+### mediaQuery
+
+Type: `boolean`
+
+Allow unit conversion inside `@media` params.
+
+### exclude
+
+Type: `(string | RegExp)[] | ((filePath: string) => boolean)`
+
+Exclude files from processing based on their file path.
+
+### disabled
+
+Type: `boolean`
+
+Disable this plugin.
+
+## Transform Context
+
+The conversion functions receive a context object with:
+
+```ts
+interface TransformContext {
+  root: Root
+  input: Input
+  filePath?: string
+  decl?: Declaration
+  rule?: Rule
+  atRule?: AtRule
+  prop?: string
+  selector?: string
+}
+```
+
+## Notes
+
+- The unit regex skips quoted strings, `url(...)`, and `var(...)` to avoid accidental replacements.
+- Absolute units (`in/cm/mm/pt/pc/q`) are not converted by default, but you can add them in `unitMap`.

package/README.zh-CN.md

@@ -0,0 +1,132 @@
+# postcss-units-to-px
+
+将多种 CSS 单位转换为 `px` 的 PostCSS 插件。默认支持 `rem`、`em`、`vw`、`vh`、`vmin`、`vmax`、`rpx`，并可按需覆盖或扩展规则。
+
+## 安装
+
+```bash
+pnpm add postcss-units-to-px postcss
+```
+
+## 使用
+
+```ts
+import postcss from 'postcss'
+import unitsToPx from 'postcss-units-to-px'
+
+const input = '.rule { margin: 1rem 1vw; }'
+const output = postcss(unitsToPx()).process(input).css
+```
+
+## 配置
+
+类型: `Object | Null`
+默认值:
+
+```ts
+const defaultOptions = {
+  unitMap: {
+    rem: 16,
+    em: 16,
+    vw: 3.75,
+    vh: 6.67,
+    vmin: 3.75,
+    vmax: 6.67,
+    rpx: 0.5,
+  },
+  unitPrecision: 5,
+  selectorBlackList: [],
+  propList: ['*'],
+  replace: true,
+  mediaQuery: false,
+  minValue: 0,
+  exclude: [/node_modules/i],
+  disabled: false,
+}
+```
+
+### unitMap
+
+类型: `Record<string, number | (value, context) => number | null>`
+
+单位转换规则。数值表示倍率（例如 `1rem * 16 = 16px`）。函数需要返回最终 px 值。若某个单位规则为 `null`，则会回退使用全局 `transform`。
+
+注意：`unitMap` 会与默认值合并，覆盖时请显式写出对应的单位。
+
+### transform
+
+类型: `(value, unit, context) => number`
+
+当某个单位未定义规则（或规则为 `null`）时使用的全局转换函数。
+
+### unitPrecision
+
+类型: `number`
+默认值: `5`
+
+输出 px 的小数精度。
+
+### minValue
+
+类型: `number`
+默认值: `0`
+
+小于该阈值的单位值不会被转换。
+
+### propList
+
+类型: `(string | RegExp)[]`
+
+只处理匹配的属性。支持 `'*'` 表示全部属性。
+
+### selectorBlackList
+
+类型: `(string | RegExp)[]`
+
+匹配到的选择器将被忽略。
+
+### replace
+
+类型: `boolean`
+
+替换原声明值而不是追加一个新声明。
+
+### mediaQuery
+
+类型: `boolean`
+
+允许在 `@media` 参数中转换单位。
+
+### exclude
+
+类型: `(string | RegExp)[] | ((filePath: string) => boolean)`
+
+根据文件路径排除处理。
+
+### disabled
+
+类型: `boolean`
+
+禁用插件。
+
+## Transform Context
+
+转换函数会接收到如下上下文：
+
+```ts
+interface TransformContext {
+  root: Root
+  input: Input
+  filePath?: string
+  decl?: Declaration
+  rule?: Rule
+  atRule?: AtRule
+  prop?: string
+  selector?: string
+}
+```
+
+## 说明
+
+- 正则会跳过引号字符串、`url(...)` 和 `var(...)`，避免误替换。
+- 绝对单位（`in/cm/mm/pt/pc/q`）默认不处理，可自行添加到 `unitMap`。

package/dist/index.cjs

@@ -0,0 +1,137 @@
+let postcss_plugin_shared = require("postcss-plugin-shared");
+
+//#region package.json
+var name = "postcss-units-to-px";
+
+//#endregion
+//#region src/defaults.ts
+const defaultUnitMap = {
+	rem: 16,
+	em: 16,
+	vw: 3.75,
+	vh: 6.67,
+	vmin: 3.75,
+	vmax: 6.67,
+	rpx: .5
+};
+const defaultOptions = {
+	unitMap: defaultUnitMap,
+	unitPrecision: 5,
+	selectorBlackList: [],
+	propList: ["*"],
+	replace: true,
+	mediaQuery: false,
+	minValue: 0,
+	exclude: [/node_modules/i],
+	disabled: false
+};
+
+//#endregion
+//#region src/shared.ts
+const postcssPlugin = name;
+const getConfig = (0, postcss_plugin_shared.createConfigGetter)(defaultOptions);
+const blacklistedSelector = postcss_plugin_shared.maybeBlacklistedSelector;
+
+//#endregion
+//#region src/plugin.ts
+function normalizeUnitMap(unitMap) {
+	const normalized = /* @__PURE__ */ new Map();
+	for (const [unit, rule] of Object.entries(unitMap)) {
+		const key = unit.trim().toLowerCase();
+		if (!key) continue;
+		normalized.set(key, rule ?? null);
+	}
+	return normalized;
+}
+function getUnitsForRegex(unitMap) {
+	return Array.from(unitMap.keys()).sort((a, b) => b.length - a.length);
+}
+function createReplace(unitMap, unitPrecision, minValue, transform, context) {
+	const shouldRound = unitPrecision >= 0 && unitPrecision <= 100;
+	return function replace(m, $1) {
+		if (!$1) return m;
+		const value = Number($1);
+		if (Number.isNaN(value)) return m;
+		if (value < minValue) return m;
+		const unit = m.slice($1.length).toLowerCase();
+		const rule = unitMap.get(unit);
+		let pxValue;
+		if (typeof rule === "function") pxValue = rule(value, context);
+		else if (typeof rule === "number") pxValue = value * rule;
+		else if (transform) pxValue = transform(value, unit, context);
+		else return m;
+		if (pxValue === void 0 || Number.isNaN(pxValue)) return m;
+		const roundedValue = shouldRound ? (0, postcss_plugin_shared.toFixed)(pxValue, unitPrecision) : pxValue;
+		if (roundedValue === 0) return "0";
+		return `${roundedValue}px`;
+	};
+}
+const plugin = (options = {}) => {
+	const { unitMap: mergedUnitMap, transform, unitPrecision, minValue, selectorBlackList, propList, replace, mediaQuery, exclude, disabled } = getConfig(options);
+	if (disabled) return { postcssPlugin };
+	const normalizedUnitMap = normalizeUnitMap(mergedUnitMap);
+	const units = getUnitsForRegex(normalizedUnitMap);
+	if (units.length === 0) return { postcssPlugin };
+	const unitRegex = (0, postcss_plugin_shared.createUnitRegex)({ units });
+	const unitTestRegex = new RegExp(unitRegex.source, unitRegex.flags.replace("g", ""));
+	const satisfyPropList = (0, postcss_plugin_shared.createPropListMatcher)(propList);
+	const excludeFn = (0, postcss_plugin_shared.createExcludeMatcher)(exclude);
+	const hasSelectorBlacklist = selectorBlackList.length > 0;
+	return {
+		postcssPlugin,
+		Once(css) {
+			const input = css.source.input;
+			const filePath = input.file;
+			if (excludeFn(filePath)) return;
+			const selectorBlacklistCache = hasSelectorBlacklist ? /* @__PURE__ */ new WeakMap() : void 0;
+			css.walkDecls((decl) => {
+				if (!satisfyPropList(decl.prop) || !unitTestRegex.test(decl.value)) return;
+				const rule = decl.parent;
+				if (selectorBlacklistCache) {
+					const cached = selectorBlacklistCache.get(rule);
+					const isBlacklisted = cached ?? Boolean(blacklistedSelector(selectorBlackList, rule.selector));
+					if (cached === void 0) selectorBlacklistCache.set(rule, isBlacklisted);
+					if (isBlacklisted) return;
+				}
+				const replacer = createReplace(normalizedUnitMap, unitPrecision, minValue, transform, {
+					root: css,
+					input,
+					filePath,
+					decl,
+					rule,
+					atRule: rule.parent?.type === "atrule" ? rule.parent : void 0,
+					prop: decl.prop,
+					selector: rule.selector
+				});
+				const value = decl.value.replace(unitRegex, replacer);
+				if (value === decl.value) return;
+				if ((rule.nodes?.length ?? 0) > 1 && (0, postcss_plugin_shared.declarationExists)(rule, decl.prop, value)) return;
+				if (replace) {
+					decl.value = value;
+					return;
+				}
+				decl.cloneAfter({ value });
+			});
+			css.walkAtRules((atRule) => {
+				if (!mediaQuery || atRule.name !== "media") return;
+				if (!unitTestRegex.test(atRule.params)) return;
+				const replacer = createReplace(normalizedUnitMap, unitPrecision, minValue, transform, {
+					root: css,
+					input,
+					filePath,
+					atRule
+				});
+				atRule.params = atRule.params.replace(unitRegex, replacer);
+			});
+		}
+	};
+};
+plugin.postcss = true;
+var plugin_default = plugin;
+
+//#endregion
+//#region src/index.ts
+var src_default = plugin_default;
+
+//#endregion
+module.exports = src_default;

package/dist/index.d.cts

@@ -0,0 +1,34 @@
+import { AtRule, Declaration, Input, PluginCreator, Root, Rule } from "postcss";
+
+//#region src/types.d.ts
+interface TransformContext {
+  root: Root;
+  input: Input;
+  filePath?: string;
+  decl?: Declaration;
+  rule?: Rule;
+  atRule?: AtRule;
+  prop?: string;
+  selector?: string;
+}
+type UnitTransform = (value: number, context: TransformContext) => number;
+type GlobalTransform = (value: number, unit: string, context: TransformContext) => number;
+type UnitMap = Record<string, number | UnitTransform | null>;
+interface UserDefinedOptions {
+  unitMap?: UnitMap;
+  transform?: GlobalTransform;
+  unitPrecision?: number;
+  minValue?: number;
+  selectorBlackList?: (string | RegExp)[];
+  propList?: (string | RegExp)[];
+  replace?: boolean;
+  mediaQuery?: boolean;
+  exclude?: (string | RegExp)[] | ((filePath: string) => boolean);
+  disabled?: boolean;
+}
+type PostcssUnitsToPx = PluginCreator<UserDefinedOptions>;
+//#endregion
+//#region src/plugin.d.ts
+declare const plugin: PostcssUnitsToPx;
+//#endregion
+export { GlobalTransform, PostcssUnitsToPx, TransformContext, UnitMap, UnitTransform, UserDefinedOptions, plugin as default };

package/dist/index.d.mts

@@ -0,0 +1,34 @@
+import { AtRule, Declaration, Input, PluginCreator, Root, Rule } from "postcss";
+
+//#region src/types.d.ts
+interface TransformContext {
+  root: Root;
+  input: Input;
+  filePath?: string;
+  decl?: Declaration;
+  rule?: Rule;
+  atRule?: AtRule;
+  prop?: string;
+  selector?: string;
+}
+type UnitTransform = (value: number, context: TransformContext) => number;
+type GlobalTransform = (value: number, unit: string, context: TransformContext) => number;
+type UnitMap = Record<string, number | UnitTransform | null>;
+interface UserDefinedOptions {
+  unitMap?: UnitMap;
+  transform?: GlobalTransform;
+  unitPrecision?: number;
+  minValue?: number;
+  selectorBlackList?: (string | RegExp)[];
+  propList?: (string | RegExp)[];
+  replace?: boolean;
+  mediaQuery?: boolean;
+  exclude?: (string | RegExp)[] | ((filePath: string) => boolean);
+  disabled?: boolean;
+}
+type PostcssUnitsToPx = PluginCreator<UserDefinedOptions>;
+//#endregion
+//#region src/plugin.d.ts
+declare const plugin: PostcssUnitsToPx;
+//#endregion
+export { GlobalTransform, PostcssUnitsToPx, TransformContext, UnitMap, UnitTransform, UserDefinedOptions, plugin as default };

package/dist/index.mjs

@@ -0,0 +1,137 @@
+import { createConfigGetter, createExcludeMatcher, createPropListMatcher, createUnitRegex, declarationExists, maybeBlacklistedSelector, toFixed } from "postcss-plugin-shared";
+
+//#region package.json
+var name = "postcss-units-to-px";
+
+//#endregion
+//#region src/defaults.ts
+const defaultUnitMap = {
+	rem: 16,
+	em: 16,
+	vw: 3.75,
+	vh: 6.67,
+	vmin: 3.75,
+	vmax: 6.67,
+	rpx: .5
+};
+const defaultOptions = {
+	unitMap: defaultUnitMap,
+	unitPrecision: 5,
+	selectorBlackList: [],
+	propList: ["*"],
+	replace: true,
+	mediaQuery: false,
+	minValue: 0,
+	exclude: [/node_modules/i],
+	disabled: false
+};
+
+//#endregion
+//#region src/shared.ts
+const postcssPlugin = name;
+const getConfig = createConfigGetter(defaultOptions);
+const blacklistedSelector = maybeBlacklistedSelector;
+
+//#endregion
+//#region src/plugin.ts
+function normalizeUnitMap(unitMap) {
+	const normalized = /* @__PURE__ */ new Map();
+	for (const [unit, rule] of Object.entries(unitMap)) {
+		const key = unit.trim().toLowerCase();
+		if (!key) continue;
+		normalized.set(key, rule ?? null);
+	}
+	return normalized;
+}
+function getUnitsForRegex(unitMap) {
+	return Array.from(unitMap.keys()).sort((a, b) => b.length - a.length);
+}
+function createReplace(unitMap, unitPrecision, minValue, transform, context) {
+	const shouldRound = unitPrecision >= 0 && unitPrecision <= 100;
+	return function replace(m, $1) {
+		if (!$1) return m;
+		const value = Number($1);
+		if (Number.isNaN(value)) return m;
+		if (value < minValue) return m;
+		const unit = m.slice($1.length).toLowerCase();
+		const rule = unitMap.get(unit);
+		let pxValue;
+		if (typeof rule === "function") pxValue = rule(value, context);
+		else if (typeof rule === "number") pxValue = value * rule;
+		else if (transform) pxValue = transform(value, unit, context);
+		else return m;
+		if (pxValue === void 0 || Number.isNaN(pxValue)) return m;
+		const roundedValue = shouldRound ? toFixed(pxValue, unitPrecision) : pxValue;
+		if (roundedValue === 0) return "0";
+		return `${roundedValue}px`;
+	};
+}
+const plugin = (options = {}) => {
+	const { unitMap: mergedUnitMap, transform, unitPrecision, minValue, selectorBlackList, propList, replace, mediaQuery, exclude, disabled } = getConfig(options);
+	if (disabled) return { postcssPlugin };
+	const normalizedUnitMap = normalizeUnitMap(mergedUnitMap);
+	const units = getUnitsForRegex(normalizedUnitMap);
+	if (units.length === 0) return { postcssPlugin };
+	const unitRegex = createUnitRegex({ units });
+	const unitTestRegex = new RegExp(unitRegex.source, unitRegex.flags.replace("g", ""));
+	const satisfyPropList = createPropListMatcher(propList);
+	const excludeFn = createExcludeMatcher(exclude);
+	const hasSelectorBlacklist = selectorBlackList.length > 0;
+	return {
+		postcssPlugin,
+		Once(css) {
+			const input = css.source.input;
+			const filePath = input.file;
+			if (excludeFn(filePath)) return;
+			const selectorBlacklistCache = hasSelectorBlacklist ? /* @__PURE__ */ new WeakMap() : void 0;
+			css.walkDecls((decl) => {
+				if (!satisfyPropList(decl.prop) || !unitTestRegex.test(decl.value)) return;
+				const rule = decl.parent;
+				if (selectorBlacklistCache) {
+					const cached = selectorBlacklistCache.get(rule);
+					const isBlacklisted = cached ?? Boolean(blacklistedSelector(selectorBlackList, rule.selector));
+					if (cached === void 0) selectorBlacklistCache.set(rule, isBlacklisted);
+					if (isBlacklisted) return;
+				}
+				const replacer = createReplace(normalizedUnitMap, unitPrecision, minValue, transform, {
+					root: css,
+					input,
+					filePath,
+					decl,
+					rule,
+					atRule: rule.parent?.type === "atrule" ? rule.parent : void 0,
+					prop: decl.prop,
+					selector: rule.selector
+				});
+				const value = decl.value.replace(unitRegex, replacer);
+				if (value === decl.value) return;
+				if ((rule.nodes?.length ?? 0) > 1 && declarationExists(rule, decl.prop, value)) return;
+				if (replace) {
+					decl.value = value;
+					return;
+				}
+				decl.cloneAfter({ value });
+			});
+			css.walkAtRules((atRule) => {
+				if (!mediaQuery || atRule.name !== "media") return;
+				if (!unitTestRegex.test(atRule.params)) return;
+				const replacer = createReplace(normalizedUnitMap, unitPrecision, minValue, transform, {
+					root: css,
+					input,
+					filePath,
+					atRule
+				});
+				atRule.params = atRule.params.replace(unitRegex, replacer);
+			});
+		}
+	};
+};
+plugin.postcss = true;
+var plugin_default = plugin;
+
+//#endregion
+//#region src/index.ts
+var src_default = plugin_default;
+
+//#endregion
+export { src_default as default };

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "postcss-units-to-px",
+  "type": "module",
+  "version": "0.0.0",
+  "description": "Convert multiple CSS units to px with PostCSS.",
+  "author": "ice breaker <1324318532@qq.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sonofmagic/postcss-plugins.git",
+    "directory": "packages/postcss-units-to-px"
+  },
+  "bugs": {
+    "url": "https://github.com/sonofmagic/postcss-plugins/issues"
+  },
+  "keywords": [
+    "postcss",
+    "postcss-plugin",
+    "css",
+    "units",
+    "px",
+    "unit-conversion",
+    "responsive"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "postcss": "^8"
+  },
+  "dependencies": {
+    "postcss-plugin-shared": "^1.0.0"
+  },
+  "scripts": {
+    "dev": "tsdown -w",
+    "build": "tsdown",
+    "test": "vitest run",
+    "test:dev": "vitest",
+    "release": "pnpm publish",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  }
+}