vite-plugin-style-to-vw - npm Package Compare versions

Comparing version 1.7.0 to 1.8.0

dist/index.d.ts

 import { Plugin } from 'vite';
 
 interface IdefaultsProp {
+  allReplace:boolean,
   unitToConvert?: string,
@@ -5,0 +6,0 @@ viewportWidth?: number,

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";var w=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var S=Object.prototype.hasOwnProperty;var m=(t,e)=>{for(var i in e)w(t,i,{get:e[i],enumerable:!0})},N=(t,e,i,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of b(e))!S.call(t,a)&&a!==i&&w(t,a,{get:()=>e[a],enumerable:!(l=v(e,a))||l.enumerable});return t};var M=t=>N(w({},"__esModule",{value:!0}),t);var I={};m(I,{default:()=>R,stylePxToVw:()=>C});module.exports=M(I);var P={unitToConvert:"px",viewportWidth:750,unitPrecision:5,viewportUnit:"vw",fontViewportUnit:"vw",minPixelValue:1};function U(t,e){let i=Math.pow(10,e+1),l=Math.floor(t*i);return Math.round(l/10)*10/i}function g(t,e,i,l){return function(a,n){if(n=Number(n),!n)return a;let u=parseFloat(n);return u<=e?a:U(u/t*100,i)+l}}var V=P,o=/<template>([\s\S]+)<\/template>/gi,p=/(\d+)px/g,h=/style\s*(:|=)\s*(?:"([^"]*?)"|'([^']*?)'|{([^}]*)})/g,x=/style.setProperty\(.*\)/g;function W(t=P){return{name:"vite-plugin-style-to-vw",enforce:"pre",transform(e,i){if(t=Object.assign(P,t),V=t,/.vue$/.test(i)){let l="",a="";if(o.test(e)?(l=e.match(o)[0],a=e.match(o)[0]):e.includes("setup")&&(l=e,a=e),h.test(l)){let n=l.match(h);if(n?.length){let u=[];for(let r=0;r<n.length;r++){let f=n[r].replace(p,y=>y.replace(p,g(t.viewportWidth,t.minPixelValue,t.unitPrecision,t.viewportUnit)));u.push(f)}let s=l;for(let r=0;r<n.length;r++)s=s.replace(n[r],`${u[r]}`);e=e.replace(a,s)}}}else if(/\.tsx|\.jsx$/.test(i)){let l=e,a=e;if(h.test(l)){let n=l.match(h);if(n?.length){let u=[];for(let r=0;r<n.length;r++){let f=n[r].replace(p,y=>y.replace(p,g(t.viewportWidth,t.minPixelValue,t.unitPrecision,t.viewportUnit)));u.push(f)}let s=l;for(let r=0;r<n.length;r++)s=s.replace(n[r],`${u[r]}`);e=e.replace(a,s),a=e,l=e}}if(x.test(l)){let n=l.match(x);if(n?.length){let u=[];for(let r=0;r<n.length;r++){let f=n[r].replace(p,y=>y.replace(p,g(t.viewportWidth,t.minPixelValue,t.unitPrecision,t.viewportUnit)));u.push(f)}let s=l;for(let r=0;r<n.length;r++)s=s.replace(n[r],`${u[r]}`);e=e.replace(e,s)}}}return{code:e,map:null}}}}var R=W,C=(t,e=V)=>{if(e=Object.assign(V,e),typeof t=="number"||typeof Number(t)=="number"&&!isNaN(Number(t))){let i=t.toString().replace(/(\d+)/g,l=>l.replace(/(\d+)/g,g(e.viewportWidth,e.minPixelValue,e.unitPrecision,"")));return typeof t=="number"?Number(i):i}else return t.toString().replace(p,i=>i.replace(p,g(e.viewportWidth,e.minPixelValue,e.unitPrecision,e.viewportUnit)))};0&&(module.exports={stylePxToVw});
+import v from"fs";var o={allReplace:!1,unitToConvert:"px",viewportWidth:750,unitPrecision:5,viewportUnit:"vw",fontViewportUnit:"vw",minPixelValue:1};function b(e,i){let a=Math.pow(10,i+1),r=Math.floor(e*a);return Math.round(r/10)*10/a}function w(e,i,a,r){return function(y,l){if(l=Number(l),!l)return y;let u=parseFloat(l);return u<=i?y:b(u/e*100,a)+r}}var x=o,h=/<template>([\s\S]+)<\/template>/gi,f=/(\d+)px/g,S=/style\s*(:|=)\s*(?:"([^"]*?)"|'([^']*?)'|{([^}]*)})/g,m=/(\w+)=\s*(?:"([^"]*?)"|'([^']*?)'|{([^}]*)})/g,V=/style.setProperty\(.*\)/g;function R(e=o){e=Object.assign(o,e);try{v.writeFileSync(__dirname+"/file.json",JSON.stringify(e),"utf8")}catch{}let a=e.allReplace?m:S;return{name:"vite-plugin-style-to-vw",enforce:"pre",transform(r,y){if(/.vue$/.test(y)){let l="",u="";if(h.test(r)?(l=r.match(h)[0],u=r.match(h)[0]):r.includes("setup")&&(l=r,u=r),a.test(l)){let n=l.match(a);if(n?.length){let p=[];for(let t=0;t<n.length;t++){let g=n[t].replace(f,c=>c.replace(f,w(e.viewportWidth,e.minPixelValue,e.unitPrecision,e.viewportUnit)));p.push(g)}let s=l;for(let t=0;t<n.length;t++)s=s.replace(n[t],`${p[t]}`);r=r.replace(u,s)}}}else if(/\.tsx|\.jsx$/.test(y)){let l=r,u=r;if(a.test(l)){let n=l.match(a);if(n?.length){let p=[];for(let t=0;t<n.length;t++){let g=n[t].replace(f,c=>c.replace(f,w(e.viewportWidth,e.minPixelValue,e.unitPrecision,e.viewportUnit)));p.push(g)}let s=l;for(let t=0;t<n.length;t++)s=s.replace(n[t],`${p[t]}`);r=r.replace(u,s),u=r,l=r}}if(V.test(l)){let n=l.match(V);if(n?.length){let p=[];for(let t=0;t<n.length;t++){let g=n[t].replace(f,c=>c.replace(f,w(e.viewportWidth,e.minPixelValue,e.unitPrecision,e.viewportUnit)));p.push(g)}let s=l;for(let t=0;t<n.length;t++)s=s.replace(n[t],`${p[t]}`);r=r.replace(r,s)}}}return{code:r,map:null}}}}var M=R;if(typeof window<"u")try{x=await import("./file.json")}catch{}var U=(e,i={})=>{if(i=Object.assign(x,i),typeof e=="number"||typeof Number(e)=="number"&&!isNaN(Number(e))){let a=e.toString().replace(/(\d+)/g,r=>r.replace(/(\d+)/g,w(i.viewportWidth,i.minPixelValue,i.unitPrecision,"")));return typeof e=="number"?Number(a):a}else return e.toString().replace(f,a=>a.replace(f,w(i.viewportWidth,i.minPixelValue,i.unitPrecision,i.viewportUnit)))};export{M as default,U as stylePxToVw};

package.json

 {
   "name": "vite-plugin-style-to-vw",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "一个可以将签内样式px转换vw的plugin",
@@ -14,4 +14,4 @@ "exports": {
   "scripts": {
-    "build": "tsup src/index.ts --dts --format esm,cjs --minify --outDir dist",
-    "test": "cd examples/my-vue-app && pnpm run dev"
+    "build": "tsup src/index.ts --dts --format esm --minify --outDir dist",
+    "test": "cd examples/my-vue-app && pnpm i && pnpm run dev"
   },
@@ -18,0 +18,0 @@ "keywords": [

README.md

@@ -12,2 +12,12 @@ # vite-plugin-style-to-vw
 
+Since some plug-ins do not need to be atomized and want px in all attributes to be converted to vw, you can set the allReplace configuration option to true
+
+```javascript
+
+vitePluginStyleToVw({
+    allReplace:true, 
+})
+```
+
+
 ## Description
@@ -51,2 +61,3 @@ - Support vue,tsx,jsx file input
   plugins: [vitePluginStyleToVw({
+        allReplace:false,
         unitToConvert: "px",
@@ -200,2 +211,4 @@ viewportWidth: 750,
 {
+    allReplace :false, // Replace all label attributes
+
     unitToConvert: "px", // The unit to be converted is "px" by default.
@@ -202,0 +215,0 @@ viewportWidth: 750, // The viewport width of the design draft, such as the incoming function, whose parameter is the file path currently processed.

README.zh-CN.md

@@ -13,4 +13,12 @@
 
-有些插件会将class中原子化插件的中的class='text-20px' 转换为 class='text-2.6666666666666665vw'，所以写了这个插件,只转化style中的
+有些插件会将class中原子化插件的中的class='text-20px' 转换为 class='text-2.6666666666666665vw'，所以写了这个插件,只转化style中的，
+鉴于有些不用原子化插件,又希望全部属性中的px都转换成vw,allReplace 配置选项设置为true即可
 
+```javascript
+
+vitePluginStyleToVw({
+    allReplace:true, 
+})
+```
+
 ## 说明
@@ -55,2 +63,3 @@
   plugins: [vitePluginStyleToVw({
+        allReplace:false, 
         unitToConvert: "px",
@@ -207,2 +216,3 @@ viewportWidth: 750,
 {
+    allReplace:false, //是够全部属性替换
     unitToConvert: "px", // 需要转换的单位，默认为"px"
@@ -209,0 +219,0 @@ viewportWidth: 750, // 设计稿的视口宽度,如传入函数，函数的参数为当前处理的文件路径

src/index.d.ts

 import { Plugin } from "vite";
 export interface IdefaultsProp {
+  allReplace:boolean,
   unitToConvert?: string,
@@ -4,0 +5,0 @@ viewportWidth?: number,

src/index.ts

 import type { IdefaultsProp } from './index.d'
+import fs from 'fs'
 
 // 默认参数
 const defaultsProp: IdefaultsProp = {
+  allReplace:false, // 是否全局替换
   unitToConvert: "px", // 需要转换的单位，默认为"px"
@@ -13,2 +15,5 @@ viewportWidth: 750, // 设计稿的视口宽度,如传入函数，函数的参数为当前处理的文件路径
 
+
+
+
 // 转换函数
@@ -40,5 +45,16 @@ function toFixed(number: number, precision: number) {
 const styleRegex = /style\s*(:|=)\s*(?:"([^"]*?)"|'([^']*?)'|{([^}]*)})/g;
+const allReplace = /(\w+)=\s*(?:"([^"]*?)"|'([^']*?)'|{([^}]*)})/g
 const styleSetPropertyReg = /style.setProperty\(.*\)/g
 
 function vitePluginStyleToVw(customOptions: IdefaultsProp = defaultsProp) {
+  customOptions = Object.assign(defaultsProp, customOptions)
+  try {
+    // 异步写入文件
+    fs.writeFileSync(__dirname + '/file.json', JSON.stringify(customOptions), 'utf8');
+    // console.log('文件写入成功！');
+  } catch (error) {
+    // console.error('写入文件时出错:', error);
+  }
+  const isAllReplace =  customOptions.allReplace
+  const replaceReg = isAllReplace ? allReplace : styleRegex
   return {
@@ -50,4 +66,2 @@ // 插件名称
     transform(code: any, id: any) {
-      customOptions = Object.assign(defaultsProp, customOptions)
-      extraOptions = customOptions
       if (/.vue$/.test(id)) {
@@ -64,5 +78,5 @@ let _source = ''
         }
-        if (styleRegex.test(_source)) {
+        if (replaceReg.test(_source)) {
 
-          const styleMatches = _source.match(styleRegex) as string[]
+          const styleMatches = _source.match(replaceReg) as string[]
 
@@ -100,4 +114,4 @@ if (styleMatches?.length) {
         // 匹配style
-        if (styleRegex.test(_source)) {
-          const styleMatches = _source.match(styleRegex) as string[]
+        if (replaceReg.test(_source)) {
+          const styleMatches = _source.match(replaceReg) as string[]
           if (styleMatches?.length) {
@@ -132,3 +146,3 @@ // 遍历每个 style 属性值,替换 px 为 vw
         // react 设置important
-        if(styleSetPropertyReg.test(_source)) {
+        if (styleSetPropertyReg.test(_source)) {
           const styleMatches = _source.match(styleSetPropertyReg) as string[]
@@ -175,9 +189,16 @@ if (styleMatches?.length) {
 
+if (typeof window !== "undefined") {
+  try {
+    extraOptions = await import('./file.json')
+  } catch (error) {
+  }
+}
 
+
 // 手动转换成vw 100 ==> 13.33333 '100px' ==> '13.33333px
-export const stylePxToVw = (code: string | number,customOptions: IdefaultsProp = extraOptions) => {
+export const stylePxToVw = (code: string | number, customOptions: IdefaultsProp = {}) => {
   customOptions = Object.assign(extraOptions, customOptions)
   if (typeof code === 'number' || (typeof Number(code) === 'number' && !isNaN(Number(code
   )))) {
-    let returnCode = code.toString().replace(/(\d+)/g, (match) => {
+    const returnCode = code.toString().replace(/(\d+)/g, (match) => {
       return match.replace(
@@ -213,6 +234,1 @@ /(\d+)/g,
 }
-
-
-
-
-

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26981

increased by4.57%

Lines of code

270

increased by7.57%

Number of lines in readme file

218

increased by6.34%

Worsened metrics

Number of low supply chain risk alerts

2

increased byInfinity%

No dependency changes