New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

node-px2rem

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

node-px2rem - npm Package Compare versions

Comparing version 1.1.7 to 2.0.0

.eslintrc
.huskyrc
.nyc_output/0a8cf764-7285-4f36-babf-4197a2a0e92a.json
.nyc_output/34a7d006-d426-404a-9262-912a5827f821.json

21

demo/index.js
'use strict';
var fs = require('fs');
var px2rem = require('../index.js');
var css = fs.readFileSync('main.css', 'utf8');
var processedCSS = px2rem.process(css, {
mediaQuery: true
const fs = require('fs');
const path = require('path');
const px2rem = require('../index.js');
const css = fs.readFileSync(path.join(__dirname, 'main.css'), 'utf8');
const processedCSS = px2rem.process(css, {
mediaQuery: true
});
fs.writeFile('main-rem.css', processedCSS, function(err) {
if (err) {
throw err;
}
fs.writeFile(path.join(__dirname, 'main-rem.css'), processedCSS, (err) => {
if (err) {
throw err;
}
console.log('Done.');
console.log('Done.');
});

147

index.js
'use strict';
var postCSS = require('postcss');
var extend = require('extend');
const postCSS = require('postcss');
const extend = require('extend');
var pxRegExp = /(\d*\.?\d+)px/ig;
const pxRegExp = /(\d*\.?\d+)px/ig;
var defaults = {
rootValue: 16,
unitPrecision: 5,
propertyBlackList: [],
propertyWhiteList: [],
replace: false,
mediaQuery: false,
minPx: 1
const defaults = {
rootValue: 16,
unitPrecision: 5,
propertyBlackList: [],
propertyWhiteList: [],
replace: false,
mediaQuery: false,
minPx: 1
};
var o;
let o;
var px2rem;
function toPx(value) {
var parts = /^(\d+\.?\d*)([a-zA-Z%]*)$/.exec(value);
var number = parts[1];
var unit = parts[2];
const parts = /^(\d+\.?\d*)([a-zA-Z%]*)$/.exec(value);
const [, number, unit] = parts;
if (unit === 'px' || unit === '') {
return parseFloat(number);
} else if (unit === 'em' || unit === 'rem') {
return parseFloat(number) * 16;
} else if (unit === '%') {
return (parseFloat(number) / 100) * 16;
}
if (unit === 'px' || unit === '') {
return parseFloat(number);
} else if (unit === 'em' || unit === 'rem') {
return parseFloat(number) * 16;
} else if (unit === '%') {
return (parseFloat(number) / 100) * 16;
}
return 1;
return 1;
}
function toFixed(number, precision) {
var multiplier = Math.pow(10, precision + 1);
var wholeNumber = Math.floor(number * multiplier);
const multiplier = Math.pow(10, precision + 1);
const wholeNumber = Math.floor(number * multiplier);
return Math.round(wholeNumber / 10) * 10 / multiplier;
return Math.round(wholeNumber / 10) * 10 / multiplier;
}
function pxReplace(strArg) {
var str = parseFloat(strArg);
const str = parseFloat(strArg);
if (o.minPx >= str) {
return str + 'px';
}
if (o.minPx >= str) {
return `${str}px`;
}
return toFixed(str / toPx(o.rootValue), o.unitPrecision) + 'rem';
return `${toFixed(str / toPx(o.rootValue), o.unitPrecision)}rem`;
}
function equals(decls, prop, value) {
return decls.some(function(decl) {
return (decl.prop === prop && decl.value === value);
});
return decls.some(decl => (decl.prop === prop && decl.value === value));
}
function Px2Rem(options) {
o = extend(true, {}, defaults, options);
o = extend(true, {}, defaults, options);
}
Px2Rem.prototype.process = function(css, options) {
return postCSS(this.postCSS).process(css, options).css;
return postCSS(this.postCSS).process(css, options).css;
};
Px2Rem.prototype.postCSS = function(css) {
css.walkDecls(function(decl, i) {
var rule;
var value;
css.walkDecls((decl, i) => {
if (o.propertyBlackList.indexOf(decl.prop) !== -1) {
return;
}
if (o.propertyBlackList.indexOf(decl.prop) !== -1) {
return;
}
if (o.propertyWhiteList.length > 0 && o.propertyWhiteList.indexOf(decl.prop) === -1) {
return;
}
if (o.propertyWhiteList.length > 0 &&
o.propertyWhiteList.indexOf(decl.prop) === -1) {
return;
}
const rule = decl.parent;
let { value } = decl;
rule = decl.parent;
value = decl.value;
if (value.indexOf('px') !== -1) {
value = value.replace(pxRegExp, pxReplace);
if (value.indexOf('px') !== -1) {
value = value.replace(pxRegExp, pxReplace);
if (equals(rule.nodes, decl.prop, value)) {
return;
}
if (equals(rule.nodes, decl.prop, value)) {
return;
}
if (o.replace) {
decl.value = value;
} else {
rule.insertAfter(i, decl.clone({
value
}));
}
}
});
if (o.replace) {
decl.value = value;
} else {
rule.insertAfter(i, decl.clone({
value: value
}));
}
}
if (o.mediaQuery) {
css.each((rule) => {
if (rule.type !== 'atrule' && rule.name !== 'media') {
return;
}
if (rule.params.indexOf('px') !== -1) {
rule.params = rule.params.replace(pxRegExp, pxReplace);
}
});
if (o.mediaQuery) {
css.each(function(rule) {
if (rule.type !== 'atrule' && rule.name !== 'media') {
return;
}
if (rule.params.indexOf('px') !== -1) {
rule.params = rule.params.replace(pxRegExp, pxReplace);
}
});
}
}
};
px2rem = function(options) {
return new Px2Rem(options);
const px2rem = function(options) {
return new Px2Rem(options);
};
px2rem.process = function(css, options, postCSSOptions) {
return new Px2Rem(options).process(css, postCSSOptions);
return new Px2Rem(options).process(css, postCSSOptions);
};
module.exports = px2rem;

20

package.json
{
"name": "node-px2rem",
"version": "1.1.7",
"version": "2.0.0",
"description": "Pixel to rem postproccessor",

@@ -29,21 +29,15 @@ "main": "index.js",

"extend": "^3.0.2",
"postcss": "^7.0.1"
"postcss": "^7.0.13"
},
"devDependencies": {
"ava": "^0.25.0",
"ava": "^1.1.0",
"coveralls": "^3.0.2",
"eslint": "^5.2.0",
"eslint": "^5.12.1",
"eslint-config-mito": "^8.0.0",
"nyc": "^12.0.2",
"pre-commit": "^1.2.2"
"nyc": "^13.1.0",
"husky": "^1.3.1"
},
"engines": {
"node": ">=6"
},
"eslintConfig": {
"extends": "mito/legacy"
},
"pre-commit": [
"test"
]
}
}

38

README.md
# Pixel to rem [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url] [![Coverage Status][coverage-image]][coverage-url]
Version: **1.1.7**
Version: **2.0.0**

@@ -13,15 +13,15 @@ ## Installation

var fs = require('fs');
var px2rem = require('node-px2rem');
var css = fs.readFileSync('main.css', 'utf8');
var processedCSS = px2rem.process(css, {
rootValue: 16
const fs = require('fs');
const px2rem = require('node-px2rem');
const css = fs.readFileSync('main.css', 'utf8');
const processedCSS = px2rem.process(css, {
rootValue: 16
});
fs.writeFile('main-rem.css', processedCSS, function(err) {
if (err) {
throw err;
}
fs.writeFile('main-rem.css', processedCSS, (err) => {
if (err) {
throw err;
}
console.log('Done.');
console.log('Done.');
});

@@ -38,9 +38,9 @@ ```

{
rootValue: 16,
unitPrecision: 5,
propertyBlackList: [],
propertyWhiteList: [],
replace: false,
mediaQuery: false,
minPx: 1
rootValue: 16,
unitPrecision: 5,
propertyBlackList: [],
propertyWhiteList: [],
replace: false,
mediaQuery: false,
minPx: 1
}

@@ -58,3 +58,3 @@ ```

# License
MIT © 2018 Gergely Kovács (gg.kovacs@gmail.com)
MIT © 2019 Gergely Kovács (gg.kovacs@gmail.com)

@@ -61,0 +61,0 @@ [npm-image]: https://badge.fury.io/js/node-px2rem.svg

139

test/test.js
import test from 'ava';
import fs from 'fs';
import path from 'path';
import px2rem from '../';

@@ -8,104 +7,104 @@

test.before('setup', t => {
css = fs.readFileSync(`${__dirname}/data/styles.css`, 'utf8');
test.before('setup', () => {
css = fs.readFileSync(`${__dirname}/data/styles.css`, 'utf8');
});
test('processed #1', t => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/styles.css`, 'utf8');
const processedCSS = px2rem.process(css);
test('processed #1', (t) => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/styles.css`, 'utf8');
const processedCSS = px2rem.process(css);
t.is(processedCSS, validProcessedCSS);
t.is(processedCSS, validProcessedCSS);
});
test('processed #2', t => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/styles.css`, 'utf8');
const pxToRem = px2rem();
const processedCSS = pxToRem.process(css);
test('processed #2', (t) => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/styles.css`, 'utf8');
const pxToRem = px2rem();
const processedCSS = pxToRem.process(css);
t.is(processedCSS, validProcessedCSS);
t.is(processedCSS, validProcessedCSS);
});
test('processed with `mediaQuery`', t => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/media-query.css`, 'utf8');
const processedCSS = px2rem.process(css, {
mediaQuery: true
});
test('processed with `mediaQuery`', (t) => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/media-query.css`, 'utf8');
const processedCSS = px2rem.process(css, {
mediaQuery: true
});
t.is(processedCSS, validProcessedCSS);
t.is(processedCSS, validProcessedCSS);
});
test('processed with `rootValue`', t => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/root-value.css`, 'utf8');
const processedCSS = px2rem.process(css, {
rootValue: 12
});
test('processed with `rootValue`', (t) => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/root-value.css`, 'utf8');
const processedCSS = px2rem.process(css, {
rootValue: 12
});
t.is(processedCSS, validProcessedCSS);
t.is(processedCSS, validProcessedCSS);
});
test('processed with percent `rootValue`', t => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/root-value-percent.css`, 'utf8');
const processedCSS = px2rem.process(css, {
rootValue: '10%'
});
test('processed with percent `rootValue`', (t) => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/root-value-percent.css`, 'utf8');
const processedCSS = px2rem.process(css, {
rootValue: '10%'
});
t.is(processedCSS, validProcessedCSS);
t.is(processedCSS, validProcessedCSS);
});
test('processed with rem `rootValue`', t => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/root-value-rem.css`, 'utf8');
const processedCSS = px2rem.process(css, {
rootValue: '10rem'
});
test('processed with rem `rootValue`', (t) => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/root-value-rem.css`, 'utf8');
const processedCSS = px2rem.process(css, {
rootValue: '10rem'
});
t.is(processedCSS, validProcessedCSS);
t.is(processedCSS, validProcessedCSS);
});
test('processed with pt `rootValue`', t => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/root-value-pt.css`, 'utf8');
const processedCSS = px2rem.process(css, {
rootValue: '1pt'
});
test('processed with pt `rootValue`', (t) => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/root-value-pt.css`, 'utf8');
const processedCSS = px2rem.process(css, {
rootValue: '1pt'
});
t.is(processedCSS, validProcessedCSS);
t.is(processedCSS, validProcessedCSS);
});
test('processed with `unitPrecision`', t => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/unit-precision.css`, 'utf8');
const processedCSS = px2rem.process(css, {
unitPrecision: 2
});
test('processed with `unitPrecision`', (t) => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/unit-precision.css`, 'utf8');
const processedCSS = px2rem.process(css, {
unitPrecision: 2
});
t.is(processedCSS, validProcessedCSS);
t.is(processedCSS, validProcessedCSS);
});
test('processed with `propertyBlackList`', t => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/property-blacklist.css`, 'utf8');
const processedCSS = px2rem.process(css, {
propertyBlackList: [
'font-size'
]
});
test('processed with `propertyBlackList`', (t) => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/property-blacklist.css`, 'utf8');
const processedCSS = px2rem.process(css, {
propertyBlackList: [
'font-size'
]
});
t.is(processedCSS, validProcessedCSS);
t.is(processedCSS, validProcessedCSS);
});
test('processed with `propertyWhiteList`', t => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/property-whitelist.css`, 'utf8');
const processedCSS = px2rem.process(css, {
propertyWhiteList: [
'font-size'
]
});
test('processed with `propertyWhiteList`', (t) => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/property-whitelist.css`, 'utf8');
const processedCSS = px2rem.process(css, {
propertyWhiteList: [
'font-size'
]
});
t.is(processedCSS, validProcessedCSS);
t.is(processedCSS, validProcessedCSS);
});
test('processed with `replace`', t => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/replace.css`, 'utf8');
const processedCSS = px2rem.process(css, {
replace: true
});
test('processed with `replace`', (t) => {
const validProcessedCSS = fs.readFileSync(`${__dirname}/valid/replace.css`, 'utf8');
const processedCSS = px2rem.process(css, {
replace: true
});
t.is(processedCSS, validProcessedCSS);
t.is(processedCSS, validProcessedCSS);
});
.eslintignore
.nyc_output/8479845f56297d70087c0d620ebbd149.json
.nyc_output/bd09dacfdaf3733c86ac10f09830cf77.json
LICENSE

Sorry, the diff of this file is not supported yet

test/data/styles.css

Sorry, the diff of this file is not supported yet

test/valid/media-query.css

Sorry, the diff of this file is not supported yet

test/valid/property-blacklist.css

Sorry, the diff of this file is not supported yet

test/valid/property-whitelist.css

Sorry, the diff of this file is not supported yet

test/valid/replace.css

Sorry, the diff of this file is not supported yet

test/valid/root-value-percent.css

Sorry, the diff of this file is not supported yet

test/valid/root-value-pt.css

Sorry, the diff of this file is not supported yet

test/valid/root-value-rem.css

Sorry, the diff of this file is not supported yet

test/valid/root-value.css

Sorry, the diff of this file is not supported yet

test/valid/styles.css

Sorry, the diff of this file is not supported yet

test/valid/unit-precision.css

Sorry, the diff of this file is not supported yet

yarn.lock

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc