Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vite-plugin-style-to-vw

Package Overview
Dependencies
Maintainers
1
Versions
38
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 1.4.0 to 1.5.0

2

dist/index.js

@@ -1,1 +0,1 @@

"use strict";var o=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var S=(t,e)=>{for(var a in e)o(t,a,{get:e[a],enumerable:!0})},b=(t,e,a,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of x(e))!m.call(t,i)&&i!==a&&o(t,i,{get:()=>e[i],enumerable:!(n=v(e,i))||n.enumerable});return t};var M=t=>b(o({},"__esModule",{value:!0}),t);var _={};S(_,{default:()=>W});module.exports=M(_);var V={unitToConvert:"px",viewportWidth:750,unitPrecision:5,viewportUnit:"vw",fontViewportUnit:"vw",minPixelValue:1};function R(t,e){let a=Math.pow(10,e+1),n=Math.floor(t*a);return Math.round(n/10)*10/a}function g(t,e,a,n){return function(i,r){if(r=Number(r),!r)return i;let s=parseFloat(r);return s<=e?i:R(s/t*100,a)+n}}var c=/<template>([\s\S]+)<\/template>/gi,p=/(\d+)px/g,h=/style\s*(:|=)\s*(?:"([^"]*?)"|'([^']*?)'|{([^}]*)})/g,P=/style.setProperty\(.*\)/g;function U(t=V){return{name:"vite-plugin-style-to-vw",transform(e,a){if(t=Object.assign(V,t),/.vue$/.test(a)){let n="",i="";if(c.test(e)?(n=e.match(c)[0],i=e.match(c)[0]):e.includes("setup")&&(n=e,i=e),h.test(n)){let r=n.match(h);if(r?.length){let s=[];for(let l=0;l<r.length;l++){let f=r[l].replace(p,y=>y.replace(p,g(t.viewportWidth,t.minPixelValue,t.unitPrecision,t.viewportUnit)));s.push(f)}let u=n;for(let l=0;l<r.length;l++)u=u.replace(r[l],`${s[l]}`);e=e.replace(i,u)}}}else if(/\.tsx|\.jsx$/.test(a)){let n=e,i=e;if(h.test(n)){let r=n.match(h);if(r?.length){let s=[];for(let l=0;l<r.length;l++){let f=r[l].replace(p,y=>y.replace(p,g(t.viewportWidth,t.minPixelValue,t.unitPrecision,t.viewportUnit)));s.push(f)}let u=n;for(let l=0;l<r.length;l++)u=u.replace(r[l],`${s[l]}`);e=e.replace(i,u),i=e,n=e}}if(P.test(n)){let r=n.match(P);if(r?.length){let s=[];for(let l=0;l<r.length;l++){let f=r[l].replace(p,y=>y.replace(p,g(t.viewportWidth,t.minPixelValue,t.unitPrecision,t.viewportUnit)));s.push(f)}let u=n;for(let l=0;l<r.length;l++)u=u.replace(r[l],`${s[l]}`);e=e.replace(e,u)}}}return{code:e,map:null}}}}var W=U;0&&(module.exports={});
"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 o={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=o,P=/<template>([\s\S]+)<\/template>/gi,p=/(\d+)px/g,h=/style\s*(:|=)\s*(?:"([^"]*?)"|'([^']*?)'|{([^}]*)})/g,c=/style.setProperty\(.*\)/g;function W(t=o){return{name:"vite-plugin-style-to-vw",transform(e,i){if(t=Object.assign(o,t),V=t,/.vue$/.test(i)){let l="",a="";if(P.test(e)?(l=e.match(P)[0],a=e.match(P)[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(c.test(l)){let n=l.match(c);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});

2

package.json
{
"name": "vite-plugin-style-to-vw",
"version": "1.4.0",
"version": "1.5.0",
"description": "一个可以将签内样式px转换vw的plugin",

@@ -5,0 +5,0 @@ "exports": {

30

README.md

@@ -5,2 +5,6 @@ # vite-plugin-style-to-vw

> A plugin that can convert intra-tag style px to vw
[![NPM version](https://img.shields.io/npm/v/vite-plugin-style-to-vw.svg)](https://www.npmjs.com/package/vite-plugin-style-to-vw)
## Development reasons

@@ -160,3 +164,29 @@ Some plug-ins will convert class='text-20px' in the atomic plug-in class to class='text-2.666666666665vw', so I wrote this plug-in, only convert class =' text-20px 'in style

## If you want to use it manually, please use the following method
```javascript
import { stylePxToVw } from "vite-plugin-style-to-vw";
const a = stylePxToVw(100)
console.log(a) // 13.3333
const b = stylePxToVw('100')
console.log(b) // 13.3333
const c = stylePxToVw('100px')
console.log(c) // 13.3333vw
const d = stylePxToVw('100px', {
unitToConvert: "px", // The unit to be converted is "px" by default.
viewportWidth: 750, // The viewport width of the design draft, such as
unitPrecision: 0, // Precision retained after unit conversion.
viewportUnit: "vw", // Viewport units you want to use.
fontViewportUnit: "vw", // Viewport units used by fonts.
})
console.log(d) // 13vw
```
### If you don't want to switch, please use PX instead.

@@ -163,0 +193,0 @@

30

README.zh-CN.md

@@ -6,2 +6,7 @@

> 一个可以将 标签内样式 px 转换 vw 的 plugin
[![NPM version](https://img.shields.io/npm/v/vite-plugin-style-to-vw.svg)](https://www.npmjs.com/package/vite-plugin-style-to-vw)
## 开发原因

@@ -167,3 +172,28 @@

## 如果您想手动使用，请使用以下方法
```javascript
import { stylePxToVw } from "vite-plugin-style-to-vw";
const a = stylePxToVw(100)
console.log(a) // 13.3333
const b = stylePxToVw('100')
console.log(b) // 13.3333
const c = stylePxToVw('100px')
console.log(c) // 13.3333vw
const d = stylePxToVw('100px', {
unitToConvert: "px", // The unit to be converted is "px" by default.
viewportWidth: 750, // The viewport width of the design draft, such as
unitPrecision: 0, // Precision retained after unit conversion.
viewportUnit: "vw", // Viewport units you want to use.
fontViewportUnit: "vw", // Viewport units used by fonts.
})
console.log(d) // 13vw
```
### 如果你不想转换 请用PX代替

@@ -170,0 +200,0 @@

39

src/index.ts

@@ -35,3 +35,3 @@ import type { IdefaultsProp } from './index.d'

}
let extraOptions = defaultsProp
const templateReg = /<template>([\s\S]+)<\/template>/gi;

@@ -49,2 +49,3 @@ const pxGlobalReg = /(\d+)px/g;

customOptions = Object.assign(defaultsProp, customOptions)
extraOptions = customOptions
if (/.vue$/.test(id)) {

@@ -170,3 +171,38 @@ let _source = ''

// 手动转换成vw 100 ==> 13.33333 '100px' ==> '13.33333px
export const stylePxToVw = (code: string | number,customOptions: IdefaultsProp = extraOptions) => {
customOptions = Object.assign(extraOptions, customOptions)
if (typeof code === 'number' || (typeof Number(code) === 'number' && !isNaN(Number(code
)))) {
let returnCode = code.toString().replace(/(\d+)/g, (match) => {
return match.replace(
/(\d+)/g,
createPxReplace(
customOptions.viewportWidth,
customOptions.minPixelValue,
customOptions.unitPrecision,
''
),
)
})
if (typeof code === 'number') {
return Number(returnCode)
} else {
return returnCode
}
} else {
return code.toString().replace(pxGlobalReg, (match) => {
return match.replace(
pxGlobalReg,
createPxReplace(
customOptions.viewportWidth,
customOptions.minPixelValue,
customOptions.unitPrecision,
customOptions.viewportUnit,
),
)
})
}
}

@@ -176,1 +212,2 @@ 

dist/index.mjs

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc