Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@tchainstack/postcss-px-to-viewport
Advanced tools
A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).
A plugin for PostCSS that generates viewport units (vw, vh, vmin, vmax) from pixel units.
If your project involves a fixed width, this script will help to convert pixels into viewport units.
// input
.class {
margin: -10px .5vh;
padding: 5vmin 9.5px 1px;
border: 3px solid black;
border-bottom-width: 1px;
font-size: 14px;
line-height: 20px;
}
.class2 {
border: 1px solid black;
margin-bottom: 1px;
font-size: 20px;
line-height: 30px;
}
@media (min-width: 750px) {
.class3 {
font-size: 16px;
line-height: 22px;
}
}
// output
.class {
margin: -3.125vw .5vh;
padding: 5vmin 2.96875vw 1px;
border: 0.9375vw solid black;
border-bottom-width: 1px;
font-size: 4.375vw;
line-height: 6.25vw;
}
.class2 {
border: 1px solid black;
margin-bottom: 1px;
font-size: 6.25vw;
line-height: 9.375vw;
}
@media (min-width: 234.375vw) {
.class3 {
font-size: 5vw;
line-height: 6.875vw;
}
}
'use strict';
var fs = require('fs');
var postcss = require('postcss');
var pxToViewport = require('..');
var css = fs.readFileSync('main.css', 'utf8');
var options = {
replace: false
};
var processedCss = postcss(pxToViewport(options)).process(css).css;
fs.writeFile('main-viewport.css', processedCss, function (err) {
if (err) {
throw err;
}
console.log('File with viewport units written.');
});
Default:
{
unitToConvert: 'px',
viewportWidth: 320,
viewportHeight: 568, // not now used; TODO: need for different units and math for different properties
unitPrecision: 5,
viewportUnit: 'vw',
fontViewportUnit: 'vw', // vmin is more suitable.
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false
}
unitToConvert
(String) unit to convert, by default, it is px.viewportWidth
(Number) The width of the viewport.viewportHeight
(Number) The height of the viewport.unitPrecision
(Number) The decimal numbers to allow the REM units to grow to.viewportUnit
(String) Expected units.fontViewportUnit
(String) Expected units for font.selectorBlackList
(Array) The selectors to ignore and leave as px.
['body']
will match .body-class
[/^body$/]
will match body
but not .body
minPixelValue
(Number) Set the minimum pixel value to replace.mediaQuery
(Boolean) Allow px to be converted in media queries.var gulp = require('gulp');
var postcss = require('gulp-postcss');
var pxtoviewport = require('postcss-px-to-viewport');
gulp.task('css', function () {
var processors = [
pxtoviewport({
viewportWidth: 320,
viewportUnit: 'vmin'
})
];
return gulp.src(['build/css/**/*.css'])
.pipe(postcss(processors))
.pipe(gulp.dest('build/css'));
});
FAQs
A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).
The npm package @tchainstack/postcss-px-to-viewport receives a total of 0 weekly downloads. As such, @tchainstack/postcss-px-to-viewport popularity was classified as not popular.
We found that @tchainstack/postcss-px-to-viewport demonstrated a not healthy version release cadence and project activity because the last version was released 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
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.