Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@reaf-toolkit/postcss-px-to-viewport
Advanced tools
A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).
Readme
将 px 单位转换为视口单位的 (vw, vh, vmin, vmax) 的 PostCSS 插件.
如果你的样式需要做根据视口大小来调整宽度,这个脚本可以将你 CSS 中的 px 单位转化为 vw,1vw 等于 1/100 视口宽度。
.class {
margin: -10px 0.5vh;
padding: 5vmin 9.5px 1px;
border: 3px solid black;
border-bottom-width: 1px;
font-size: 14px;
line-height: 20px;
}
.class2 {
padding-top: 10px; /* px-to-viewport-ignore */
/* px-to-viewport-ignore-next */
padding-bottom: 10px;
/* Any other comment */
border: 1px solid black;
margin-bottom: 1px;
font-size: 20px;
line-height: 30px;
}
@media (min-width: 750px) {
.class3 {
font-size: 16px;
line-height: 22px;
}
}
.class {
margin: -3.125vw 0.5vh;
padding: 5vmin 2.96875vw 1px;
border: 0.9375vw solid black;
border-bottom-width: 1px;
font-size: 4.375vw;
line-height: 6.25vw;
}
.class2 {
padding-top: 10px;
padding-bottom: 10px;
/* Any other comment */
border: 1px solid black;
margin-bottom: 1px;
font-size: 6.25vw;
line-height: 9.375vw;
}
@media (min-width: 750px) {
.class3 {
font-size: 16px;
line-height: 22px;
}
}
使用 npm 安装
$ npm install @reaf-toolkit/postcss-px-to-viewport --save-dev
或者使用 yarn 进行安装
$ yarn add -D @reaf-toolkit/postcss-px-to-viewport
默认参数:
{
unitToConvert: "px",
viewportWidth: 320,
viewportHeight: 568,
unitPrecision: 5,
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: [],
propList: ["*"],
minPixelValue: 1,
mediaQuery: false,
replace: true,
landscape: false,
landscapeUnit: "vw",
landscapeWidth: 568,
}
interface IOptions {
/** 转换单位 */
unitToConvert?: string;
/** viewport宽,可根据文件自定义 */
viewportWidth?: ((file: string) => number) | number;
/** viewport高 */
viewportHeight?: number;
/** 小数点 */
unitPrecision?: number;
/** viewport单位 */
viewportUnit?: string;
/** 字体单位 */
fontViewportUnit?: string;
/** 黑名单 */
selectorBlackList?: string[];
/** 属性列表 */
propList?: string[];
/** 最小转换单位 */
minPixelValue?: number;
/** 是否开启媒体查询 */
mediaQuery?: boolean;
/** 是否直接更换属性值,而不添加备用属性 */
replace?: boolean;
/** 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape) */
landscape?: boolean;
/** 横屏时使用的单位 */
landscapeUnit?: string;
/** 横屏时使用的视口宽度 */
landscapeWidth?: number;
/** 根据文件自定义单位替换 */
createPxReplace?: (
file: string,
pixels: number,
toFixed?: (number: number, precision: number) => number,
unitPrecision?: number
) => string;
/** 排除文件 */
exclude?: RegExp | RegExp[];
/** 包含文件 */
include?: RegExp | RegExp[];
}
You can use special comments for ignore conversion of single lines:
/* px-to-viewport-ignore-next */
— on a separate line, prevents conversion on the next line./* px-to-viewport-ignore */
— after the property on the right, prevents conversion on the same line.Example:
/* example input: */
.class {
/* px-to-viewport-ignore-next */
width: 10px;
padding: 10px;
height: 10px; /* px-to-viewport-ignore */
border: solid 2px #000; /* px-to-viewport-ignore */
}
/* example output: */
.class {
width: 10px;
padding: 3.125vw;
height: 10px;
border: solid 2px #000;
}
There are several more reasons why your pixels may not convert, the following options may affect this:
propList
, selectorBlackList
, minPixelValue
, mediaQuery
, exclude
, include
.
在postcss.config.js
添加如下配置
module.exports = {
plugins: {
// ...
"@reaf-toolkit/postcss-px-to-viewport": {
// options
},
},
};
FAQs
A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).
The npm package @reaf-toolkit/postcss-px-to-viewport receives a total of 0 weekly downloads. As such, @reaf-toolkit/postcss-px-to-viewport popularity was classified as not popular.
We found that @reaf-toolkit/postcss-px-to-viewport demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.