Security News
pnpm 10.0.0 Blocks Lifecycle Scripts by Default
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
postcss-adaptive
Advanced tools
A postcss plugin that calculates and generates adaptive css code, such as rem and 0.5px borders for retina devices
A postcss plugin that calculates and generates adaptive css code, such as rem
and 0.5px borders for retina devices
.
Set rem unit and hairline class. For example:
(function (win, doc) {
var docEl = doc.documentElement;
function setRemUnit () {
var docWidth = docEl.clientWidth;
var rem = docWidth / 10;
docEl.style.fontSize = rem + 'px';
}
win.addEventListener('resize', function () {
setRemUnit();
}, false);
win.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit();
}
}, false);
setRemUnit();
if (win.devicePixelRatio && win.devicePixelRatio >= 2) {
var testEl = doc.createElement('div');
var fakeBody = doc.createElement('body');
testEl.style.border = '0.5px solid transparent';
fakeBody.appendChild(testEl);
docEl.appendChild(fakeBody);
if (testEl.offsetHeight === 1) {
docEl.classList.add('hairlines');
}
docEl.removeChild(fakeBody);
}
}) (window, document);
The raw stylesheet only contains @2x style, and if you
rem
unit,add /*rem*/
after the declaration/*no*/
after the declarationpx
unit when autoRem
is set to true
, add /*px*/
after the declarationAttention: Dealing with SASS or LESS, only /*...*/
comment can be used, in order to have the comments persisted.
Before processing:
.selector {
height: 64px;
width: 150px; /*rem*/
padding: 10px; /*no*/
border-top: 1px solid #ddd;
}
After processing:
.selector {
height: 32px;
width: 2rem;
padding: 10px;
border-top: 1px solid #ddd;
}
.hairlines .selector {
border-top: 0.5px solid #ddd;
}
adaptive(config)
Config:
remUnit
: number, rem unit value (default: 75)baseDpr
: number, base device pixel ratio (default: 2)remPrecision
: number, rem value precision (default: 6)hairlineClass
: string, class name of 1px border (default 'hairlines')autoRem
: boolean, whether to transform to rem unit (default: false)npm install postcss-adaptive
var postcss = require('postcss');
var adaptive = require('postcss-adaptive');
var originCssText = '...';
var newCssText = postcss().use(adaptive({ remUnit: 75 })).process(originCssText).css;
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var adaptive = require('postcss-adaptive');
gulp.task('default', function () {
var processors = [adaptive({ remUnit: 75 })];
return gulp.src('./src/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dest'));
});
var adaptive = require('postcss-adaptive');
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function () {
return [adaptive({ remUnit: 75 })];
}
}
module.exports = function (grunt) {
grunt.initConfig({
postcss: {
options: {
processors: [
adaptive({ remUnit: 75 })
]
},
dist: {
src: 'src/*.css',
dest: 'build'
}
}
});
grunt.loadNpmTasks('grunt-postcss');
grunt.registerTask('default', ['postcss']);
}
hairline
when the declaration is commented with /*no*/
.minify
option, please use other postcss plugins like cssnano
instead.minify
option to minify the output css code.autoRem
option./*no*/
comment.MIT
FAQs
A postcss plugin that calculates and generates adaptive css code, such as rem and 0.5px borders for retina devices
The npm package postcss-adaptive receives a total of 8 weekly downloads. As such, postcss-adaptive popularity was classified as not popular.
We found that postcss-adaptive 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
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.