Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
postcss-plugin-px2rem
Advanced tools
A plugin for PostCSS that generates rem units from multi units.
postcss plugin px2rem.
A plugin for PostCSS that generates rem units from pixel units.
$ npm i --save postcss-plugin-px2rem
// input
h1 {
margin: 0 0 20px;
font-size: 32px;
line-height: 1.2;
letter-spacing: 1px;
}
// output
h1 {
margin: 0 0 0.2rem;
font-size: 0.32rem;
line-height: 1.2;
letter-spacing: 0.01rem;
}
import { writeFile, readFileSync } from 'fs';
import postcss from 'postcss';
import pxtorem from 'postcss-plugin-px2rem';
const css = readFileSync('/path/to/test.css', 'utf8');
const options = {
replace: false,
};
const processedCss = postcss(pxtorem(options)).process(css).css;
writeFile('/path/to/test.rem.css', processedCss, err => {
if (err) throw err;
console.log('Rem file written.');
});
import px2rem from 'postcss-plugin-px2rem';
const px2remOpts = {
......
};
export default {
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader!postcss-loader',
},
],
},
postcss: [px2rem(px2remOpts)],
}
webpack.connfig.js
import webpack from 'atool-build/lib/webpack';
import px2rem from 'postcss-plugin-px2rem';
export default webpackConfig => {
const px2remOpts = {
......
};
webpackConfig.postcss.push(px2rem(px2remOpts));
return webpackConfig;
};
Default:
{
rootValue: 100,
unitPrecision: 5,
propWhiteList: [],
propBlackList: [],
exclude:false,
selectorBlackList: [],
ignoreIdentifier: false,
replace: true,
mediaQuery: false,
minPixelValue: 0
}
rootValue
(Number|Object) The root element font size. Default is 100.
{ px: 50, rpx: 100 }
, it will
replace rpx to 1/100 rem , and px to 1/50 rem.unitPrecision
(Number) The decimal numbers to allow the REM units to grow to.propWhiteList
(Array) The properties that can change from px to rem.
propBlackList
(Array) The properties that should not change from px to rem.
exclude
(Reg) a way to exclude some folder,eg. /(node_module)/.selectorBlackList
(Array) The selectors to ignore and leave as px.
['body']
will match .body-class
[/^body$/]
will match body
but not .body
ignoreIdentifier
(Boolean/String) a way to have a single property ignored, when ignoreIdentifier enabled, then replace
would be set to true
automatically.replace
(Boolean) replaces rules containing rems instead of adding fallbacks.mediaQuery
(Boolean) Allow px to be converted in media queries.minPixelValue
(Number) Set the minimum pixel value to replace.MIT
FAQs
A plugin for PostCSS that generates rem units from multi units.
The npm package postcss-plugin-px2rem receives a total of 2,390 weekly downloads. As such, postcss-plugin-px2rem popularity was classified as popular.
We found that postcss-plugin-px2rem 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
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.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.