@xxx20/px2vw 1.0.0

package/README.md

@@ -0,0 +1,20 @@
+安装 `npm i -D @xxx20/px2vw`
+
+基于`postcss-px-to-viewport`修改，使用方法完全相同，见 [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport)
+
+配置的时候名字叫 `@xxx20/px2vw`
+
+相比较`postcss-px-to-viewport`的修改
+ - 增加了include参数
+ - exclude和include可以接受函数参数，配置更加灵活
+ - postcss版本改为8+写法，性能更好
+ - postcss必须使用8或者更高版本不再支持低版本postcss
+ - 原插件大小写不敏感，比如不会转换 `PX` `Px` 等，现在不区分大小写全部会做转换
+
+`include`和`exclude`函数参数说明
+
+函数类型：`type FilterCallback = (file: string) => boolean;`
+ - `file`：当前正在处理的 CSS 文件的绝对路径
+ - 返回值逻辑：
+   - `include`：返回 true 表示转换该文件，返回 false 表示忽略
+   - `exclude`：返回 true 表示忽略该文件，返回 false 表示转换

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";var R=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var k=Object.prototype.hasOwnProperty;var M=(e,t)=>{for(var n in t)R(e,n,{get:t[n],enumerable:!0})},S=(e,t,n,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of V(t))!k.call(e,r)&&r!==n&&R(e,r,{get:()=>t[r],enumerable:!(i=O(t,r))||i.enumerable});return e};var T=e=>S(R({},"__esModule",{value:!0}),e);var G={};M(G,{default:()=>F});module.exports=T(G);var U=require("postcss");function y(e){let t=e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");return new RegExp(`"[^"]+"|'[^']+'|url\\([^)]+\\)|([+-]?\\d*\\.?\\d+)${t}`,"gi")}var c={exact:e=>e.filter(t=>/^[^*!]+$/.test(t)),contain:e=>e.filter(t=>/^\*.+\*$/.test(t)).map(t=>t.slice(1,-1)),endWith:e=>e.filter(t=>/^\*[^*]+$/.test(t)).map(t=>t.slice(1)),startWith:e=>e.filter(t=>/^[^*!]+\*$/.test(t)).map(t=>t.slice(0,-1)),notExact:e=>e.filter(t=>/^![^*].*$/.test(t)).map(t=>t.slice(1)),notContain:e=>e.filter(t=>/^!\*.+\*$/.test(t)).map(t=>t.slice(2,-1)),notEndWith:e=>e.filter(t=>/^!\*[^*]+$/.test(t)).map(t=>t.slice(2)),notStartWith:e=>e.filter(t=>/^![^*]+\*$/.test(t)).map(t=>t.slice(1,-1))};function W(e){let t=e.includes("*"),n=t&&e.length===1,i={exact:c.exact(e),contain:c.contain(e),startWith:c.startWith(e),endWith:c.endWith(e),notExact:c.notExact(e),notContain:c.notContain(e),notStartWith:c.notStartWith(e),notEndWith:c.notEndWith(e)};return r=>{if(n)return!0;let o=t||i.exact.includes(r)||i.contain.some(s=>r.includes(s))||i.startWith.some(s=>r.startsWith(s))||i.endWith.some(s=>r.endsWith(s)),a=i.notExact.includes(r)||i.notContain.some(s=>r.includes(s))||i.notStartWith.some(s=>r.startsWith(s))||i.notEndWith.some(s=>r.endsWith(s));return o&&!a}}var j={unitToConvert:"px",viewportWidth:320,viewportHeight:568,unitPrecision:5,viewportUnit:"vw",fontViewportUnit:"vw",selectorBlackList:[],propList:["*"],minPixelValue:1,mediaQuery:!1,replace:!0,landscape:!1,landscapeUnit:"vw",landscapeWidth:568},I="px-to-viewport-ignore-next",w="px-to-viewport-ignore";function N(e,t){let n=Math.pow(10,t+1),i=Math.floor(e*n);return Math.round(i/10)*10/n}var A=e=>{let t={...j,...e};b(t,"exclude"),b(t,"include");let n=y(t.unitToConvert),i=W(t.propList),r=[];return{postcssPlugin:"@xxx20/px2vw",Root(o){r=[]},Declaration(o,{result:a}){let s=o.source?.input.file;if(t.include&&s&&!(Array.isArray(t.include)?t.include:[t.include]).some(u=>typeof u=="function"?u(s):u.test(s))||t.exclude&&s&&(Array.isArray(t.exclude)?t.exclude:[t.exclude]).some(u=>typeof u=="function"?u(s):u.test(s)))return;let l=o.parent;if(!l||l.type!=="rule"||!o.value.includes(t.unitToConvert)||!i(o.prop)||Q(t.selectorBlackList,l.selector))return;let x=o.prev();if(x?.type==="comment"&&x.text===I){x.remove();return}let f=o.next();if(f?.type==="comment"&&f.text===w)if(f.raws.before?.includes(`
+`))a.warn(`Unexpected comment /* ${w} */ must be after declaration at same line.`,{node:f});else{f.remove();return}let p=l.parent,v;for(;p;){if(p.type==="atrule"){v=p;break}if(p.type==="root")break;p=p.parent}let g=v?.params;if(!D(g,t.mediaQuery))return;if(t.landscape&&!g){let d=r.find(h=>h.selector===l.selector);d||(d=l.clone().removeAll(),r.push(d)),d.append(o.clone({value:o.value.replace(n,P(t,t.landscapeUnit,t.landscapeWidth))}))}let E=t.landscape&&g?.includes("landscape"),C=E?t.landscapeUnit:o.prop.includes("font")?t.fontViewportUnit:t.viewportUnit,$=E?t.landscapeWidth:t.viewportWidth,m=o.value.replace(n,P(t,C,$));B(l,o.prop,m)||(t.replace?o.value=m:o.after(o.clone({value:m})))},RootExit(o){if(r.length>0){let a=new U.AtRule({params:"(orientation: landscape)",name:"media"});r.forEach(s=>a.append(s)),o.append(a),r=[]}}}};function b(e,t){let n=e[t];if(!(!n||typeof n=="function"||Object.prototype.toString.call(n)==="[object RegExp]")&&!(Array.isArray(n)&&!n.some(i=>Object.prototype.toString.call(i)!=="[object RegExp]")))throw new Error(`options.${t} should be RegExp or Array of RegExp.`)}function P(e,t,n){return(i,r)=>{if(!r)return i;let o=parseFloat(r);if(o<=e.minPixelValue)return i;let a=N(o/n*100,e.unitPrecision);return a===0?"0":a+t}}function Q(e,t){return typeof t!="string"?!1:e.some(n=>typeof n=="string"?t.includes(n):n.test(t))}function B(e,t,n){return e.some(i=>i.type==="decl"&&i.prop===t&&i.value===n)}function D(e,t){return!e||t}A.postcss=!0;var F=A;

package/dist/index.d.cts

@@ -0,0 +1,23 @@
+import { PluginCreator } from 'postcss';
+
+interface Options {
+    unitToConvert?: string;
+    viewportWidth?: number;
+    viewportHeight?: number;
+    unitPrecision?: number;
+    viewportUnit?: string;
+    fontViewportUnit?: string;
+    selectorBlackList?: (string | RegExp)[];
+    propList?: string[];
+    minPixelValue?: number;
+    mediaQuery?: boolean;
+    replace?: boolean;
+    landscape?: boolean;
+    landscapeUnit?: string;
+    landscapeWidth?: number;
+    exclude?: RegExp | RegExp[] | ((file: string) => boolean);
+    include?: RegExp | RegExp[] | ((file: string) => boolean);
+}
+declare const plugin: PluginCreator<Options>;
+
+export { type Options, plugin as default };

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+import { PluginCreator } from 'postcss';
+
+interface Options {
+    unitToConvert?: string;
+    viewportWidth?: number;
+    viewportHeight?: number;
+    unitPrecision?: number;
+    viewportUnit?: string;
+    fontViewportUnit?: string;
+    selectorBlackList?: (string | RegExp)[];
+    propList?: string[];
+    minPixelValue?: number;
+    mediaQuery?: boolean;
+    replace?: boolean;
+    landscape?: boolean;
+    landscapeUnit?: string;
+    landscapeWidth?: number;
+    exclude?: RegExp | RegExp[] | ((file: string) => boolean);
+    include?: RegExp | RegExp[] | ((file: string) => boolean);
+}
+declare const plugin: PluginCreator<Options>;
+
+export { type Options, plugin as default };

package/dist/index.js

@@ -0,0 +1,2 @@
+import{AtRule as C}from"postcss";function E(e){let t=e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");return new RegExp(`"[^"]+"|'[^']+'|url\\([^)]+\\)|([+-]?\\d*\\.?\\d+)${t}`,"gi")}var c={exact:e=>e.filter(t=>/^[^*!]+$/.test(t)),contain:e=>e.filter(t=>/^\*.+\*$/.test(t)).map(t=>t.slice(1,-1)),endWith:e=>e.filter(t=>/^\*[^*]+$/.test(t)).map(t=>t.slice(1)),startWith:e=>e.filter(t=>/^[^*!]+\*$/.test(t)).map(t=>t.slice(0,-1)),notExact:e=>e.filter(t=>/^![^*].*$/.test(t)).map(t=>t.slice(1)),notContain:e=>e.filter(t=>/^!\*.+\*$/.test(t)).map(t=>t.slice(2,-1)),notEndWith:e=>e.filter(t=>/^!\*[^*]+$/.test(t)).map(t=>t.slice(2)),notStartWith:e=>e.filter(t=>/^![^*]+\*$/.test(t)).map(t=>t.slice(1,-1))};function y(e){let t=e.includes("*"),i=t&&e.length===1,r={exact:c.exact(e),contain:c.contain(e),startWith:c.startWith(e),endWith:c.endWith(e),notExact:c.notExact(e),notContain:c.notContain(e),notStartWith:c.notStartWith(e),notEndWith:c.notEndWith(e)};return s=>{if(i)return!0;let n=t||r.exact.includes(s)||r.contain.some(o=>s.includes(o))||r.startWith.some(o=>s.startsWith(o))||r.endWith.some(o=>s.endsWith(o)),a=r.notExact.includes(s)||r.notContain.some(o=>s.includes(o))||r.notStartWith.some(o=>s.startsWith(o))||r.notEndWith.some(o=>s.endsWith(o));return n&&!a}}var $={unitToConvert:"px",viewportWidth:320,viewportHeight:568,unitPrecision:5,viewportUnit:"vw",fontViewportUnit:"vw",selectorBlackList:[],propList:["*"],minPixelValue:1,mediaQuery:!1,replace:!0,landscape:!1,landscapeUnit:"vw",landscapeWidth:568},O="px-to-viewport-ignore-next",W="px-to-viewport-ignore";function V(e,t){let i=Math.pow(10,t+1),r=Math.floor(e*i);return Math.round(r/10)*10/i}var P=e=>{let t={...$,...e};w(t,"exclude"),w(t,"include");let i=E(t.unitToConvert),r=y(t.propList),s=[];return{postcssPlugin:"@xxx20/px2vw",Root(n){s=[]},Declaration(n,{result:a}){let o=n.source?.input.file;if(t.include&&o&&!(Array.isArray(t.include)?t.include:[t.include]).some(u=>typeof u=="function"?u(o):u.test(o))||t.exclude&&o&&(Array.isArray(t.exclude)?t.exclude:[t.exclude]).some(u=>typeof u=="function"?u(o):u.test(o)))return;let l=n.parent;if(!l||l.type!=="rule"||!n.value.includes(t.unitToConvert)||!r(n.prop)||k(t.selectorBlackList,l.selector))return;let x=n.prev();if(x?.type==="comment"&&x.text===O){x.remove();return}let f=n.next();if(f?.type==="comment"&&f.text===W)if(f.raws.before?.includes(`
+`))a.warn(`Unexpected comment /* ${W} */ must be after declaration at same line.`,{node:f});else{f.remove();return}let p=l.parent,R;for(;p;){if(p.type==="atrule"){R=p;break}if(p.type==="root")break;p=p.parent}let g=R?.params;if(!S(g,t.mediaQuery))return;if(t.landscape&&!g){let d=s.find(h=>h.selector===l.selector);d||(d=l.clone().removeAll(),s.push(d)),d.append(n.clone({value:n.value.replace(i,b(t,t.landscapeUnit,t.landscapeWidth))}))}let v=t.landscape&&g?.includes("landscape"),U=v?t.landscapeUnit:n.prop.includes("font")?t.fontViewportUnit:t.viewportUnit,A=v?t.landscapeWidth:t.viewportWidth,m=n.value.replace(i,b(t,U,A));M(l,n.prop,m)||(t.replace?n.value=m:n.after(n.clone({value:m})))},RootExit(n){if(s.length>0){let a=new C({params:"(orientation: landscape)",name:"media"});s.forEach(o=>a.append(o)),n.append(a),s=[]}}}};function w(e,t){let i=e[t];if(!(!i||typeof i=="function"||Object.prototype.toString.call(i)==="[object RegExp]")&&!(Array.isArray(i)&&!i.some(r=>Object.prototype.toString.call(r)!=="[object RegExp]")))throw new Error(`options.${t} should be RegExp or Array of RegExp.`)}function b(e,t,i){return(r,s)=>{if(!s)return r;let n=parseFloat(s);if(n<=e.minPixelValue)return r;let a=V(n/i*100,e.unitPrecision);return a===0?"0":a+t}}function k(e,t){return typeof t!="string"?!1:e.some(i=>typeof i=="string"?t.includes(i):i.test(t))}function M(e,t,i){return e.some(r=>r.type==="decl"&&r.prop===t&&r.value===i)}function S(e,t){return!e||t}P.postcss=!0;var L=P;export{L as default};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@xxx20/px2vw",
+  "version": "1.0.0",
+  "description": "postcss px2vw plugin",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+    "keywords": [
+    "postcss-px-to-viewport",
+    "css",
+    "units",
+    "pixel",
+    "px",
+    "viewport",
+    "vw",
+    "vh",
+    "vmin",
+    "vmax",
+    "postcss",
+    "postcss-plugin",
+    "px2vw",
+    "pxtovw"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean --minify",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch",
+    "lint": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "postcss": "^8.0.0"
+  },
+  "devDependencies": {
+    "postcss": "^8.5.6",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "license": "MIT"
+}