postcss-px-convert
Version:
A PostCSS plugin and Node tool for converting px to rem or vw, suitable for CSS, JS, Vue, React and other scenarios.
96 lines (92 loc) • 3.2 kB
JavaScript
;
/**
* 插件集合
*/
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.generateFlexibleScript = generateFlexibleScript;
exports.viteFlexibleInject = viteFlexibleInject;
const fs_1 = __importDefault(require("fs"));
const path_1 = __importDefault(require("path"));
/**
* 生成 flexible 脚本内容
* @param options 配置选项
* @returns 脚本内容
*/
function generateFlexibleScriptContent(options = {}) {
const hasMin = typeof options.minFontSize === 'number';
const hasMax = typeof options.maxFontSize === 'number';
const minFontSize = hasMin ? options.minFontSize : null;
const maxFontSize = hasMax ? options.maxFontSize : null;
const baseWidth = options.baseWidth || 375;
// 只在传参时插入边界判断
let boundaryLogic = '';
if (hasMin) {
boundaryLogic += `\n if (minFontSize !== null && rem < minFontSize) { rem = minFontSize; }`;
}
if (hasMax) {
boundaryLogic += `\n if (maxFontSize !== null && rem > maxFontSize) { rem = maxFontSize; }`;
}
return `
(function flexible() {
var docEl = document.documentElement;
var minFontSize = ${hasMin ? minFontSize : 'null'};
var maxFontSize = ${hasMax ? maxFontSize : 'null'};
var baseWidth = ${baseWidth};
function setRemUnit() {
var rem = docEl.clientWidth / (baseWidth / 10);${boundaryLogic}
docEl.style.fontSize = rem + 'px';
}
setRemUnit();
// 防抖处理，避免频繁触发
var timer = null;
function debounceSetRemUnit() {
clearTimeout(timer);
timer = setTimeout(setRemUnit, 100);
}
window.addEventListener('resize', debounceSetRemUnit);
window.addEventListener('orientationchange', setRemUnit);
})();
`;
}
/**
* 生成 flexible.js 文件
* @param outPath 输出路径
* @param options 配置选项
* @returns 是否生成成功
*/
function generateFlexibleScript(outPath, options = {}) {
try {
const targetPath = outPath || path_1.default.resolve(process.cwd(), 'flexible.js');
const scriptContent = generateFlexibleScriptContent(options);
if (!fs_1.default.existsSync(targetPath)) {
fs_1.default.writeFileSync(targetPath, scriptContent, 'utf-8');
console.log(`[postcss-px-convert] 已生成 flexible.js 到: ${targetPath}`);
return true;
}
return false;
}
catch (error) {
console.error('[postcss-px-convert] 生成 flexible.js 失败:', error);
return false;
}
}
/**
* Vite 插件：自动注入 flexible.js
* @param options 插件配置
* @returns Vite 插件
*/
function viteFlexibleInject(options = {}) {
const scriptPath = options.flexibleScriptPath || '/flexible.js';
const scriptContent = generateFlexibleScriptContent(options);
return {
name: 'vite-flexible-inject',
transformIndexHtml(html) {
// 插入到 <head> 末尾
return html.replace(/(<head[^>]*>)/i, `$1\n<script>${scriptContent}</script>`);
}
};
}
//# sourceMappingURL=plugins.js.map