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

Comparing version 1.1.7 to 1.1.8

dist/index.js

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

package.json

 {
   "name": "vite-plugin-style-to-vw",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "一个可以将签内样式px转换vw的plugin",
@@ -5,0 +5,0 @@ "exports": {

README.md

@@ -120,3 +120,32 @@ # vite-plugin-style-to-vw
 
+### react style add! important takes effect, please use the following methods
+```jsx
+import React from 'react'
+import './App.css'
 
+function App() {
+  return (
+    <>
+      <div 
+        style={{
+          height: '100px',
+          width: '100px',
+          backgroundColor: 'blue',
+          paddingBottom: '30px',
+        }}
+        ref={(el) => {
+          if (el) {
+            el.style.setProperty('height', '100px', 'important');
+            el.style.setProperty('width', '100px', 'important');
+            el.style.setProperty('background-color', 'red');
+            el.style.setProperty('padding-bottom', '30px', 'important');
+          }
+        }}>A</div>
+    </>
+  )
+}
+export default App
+```
+
+
 ### If you don't want to switch, please use PX instead.
@@ -123,0 +152,0 @@

README.zh-CN.md

@@ -124,3 +124,32 @@ # vite-plugin-style-to-vw
 
+### react style 添加 !important 生效,请使用以下方式
+```jsx
+import React from 'react'
+import './App.css'
 
+function App() {
+  return (
+    <>
+      <div 
+        style={{
+          height: '100px',
+          width: '100px',
+          backgroundColor: 'blue',
+          paddingBottom: '30px',
+        }}
+        ref={(el) => {
+          if (el) {
+            el.style.setProperty('height', '100px', 'important');
+            el.style.setProperty('width', '100px', 'important');
+            el.style.setProperty('background-color', 'red');
+            el.style.setProperty('padding-bottom', '30px', 'important');
+          }
+        }}>A</div>
+    </>
+  )
+}
+export default App
+```
+
+
 ### 如果你不想转换 请用PX代替
@@ -127,0 +156,0 @@

src/index.ts

@@ -39,2 +39,3 @@ import type { IdefaultsProp } from './index.d'
 const styleRegex = /style\s*(:|=)\s*(?:"([^"]*?)"|'([^']*?)'|{([^}]*)})/g;
+const styleSetPropertyReg = /style.setProperty\(.*\)/g
 
@@ -68,5 +69,3 @@ function vitePluginStyleToVw(customOptions: IdefaultsProp = defaultsProp) {
               const styleValue = styleMatches[i]
-
               const newStyleValue = styleValue.replace(pxGlobalReg, (match) => {
-                // console.log('match',match)
                 return match.replace(
@@ -82,6 +81,4 @@ pxGlobalReg,
               })
-              // console.log('newStyleValue',newStyleValue)
               newStyleValues.push(newStyleValue)
             }
-            // console.log('styleMatches',newStyleValues)
             // 将新的 style 属性值替换回原始字符串
@@ -95,8 +92,7 @@ let newStr = _source
           }
-
-
         }
       } else if (/\.tsx|\.jsx$/.test(id)) {
-        const _source = code
-        const _sourceCopy = code
+        let _source = code
+        let _sourceCopy = code
+        // 匹配style
         if (styleRegex.test(_source)) {
@@ -109,3 +105,2 @@ const styleMatches = _source.match(styleRegex) as string[]
               const styleValue = styleMatches[i]
-
               const newStyleValue = styleValue.replace(pxGlobalReg, (match) => {
@@ -130,6 +125,35 @@ return match.replace(
             code = code.replace(_sourceCopy, newStr)
+            _sourceCopy = code
+            _source = code
           }
-
-
         }
+        // react 设置important
+        if(styleSetPropertyReg.test(_source)) {
+          const styleMatches = _source.match(styleSetPropertyReg) as string[]
+          if (styleMatches?.length) {
+            // 遍历每个 style 属性值,替换 px 为 vw
+            const newStyleValues: string[] = []
+            for (let i = 0; i < styleMatches.length; i++) {
+              const styleValue = styleMatches[i]
+              const newStyleValue = styleValue.replace(pxGlobalReg, (match) => {
+                return match.replace(
+                  pxGlobalReg,
+                  createPxReplace(
+                    customOptions.viewportWidth,
+                    customOptions.minPixelValue,
+                    customOptions.unitPrecision,
+                    customOptions.viewportUnit,
+                  ),
+                )
+              })
+              newStyleValues.push(newStyleValue)
+            }
+            // 将新的 style 属性值替换回原始字符串
+            let newStr = _source
+            for (let i = 0; i < styleMatches.length; i++) {
+              newStr = newStr.replace(styleMatches[i], `${newStyleValues[i]}`)
+            }
+            code = code.replace(code, newStr)
+          }
+        }
       }
@@ -136,0 +160,0 @@ return {

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

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

24498

increased by15.11%

Lines of code

237

increased by16.18%

Number of lines in readme file

168

increased by20.86%

No dependency changes