You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
@ttou/postcss-px-to-viewport
Advanced tools
@ttou/postcss-px-to-viewport - npm Package Compare versions
Comparing version 1.1.7 to 2.0.0
| import type { Plugin } from 'postcss' | ||
| import type { Options } from './types' | ||
| declare const _default: (options?: Options) => Plugin | ||
| export default _default | ||
| export = _default |
331
out/index.js
@@ -1,330 +0,1 @@ | ||
| 'use strict'; | ||
| var postcss = require('postcss'); | ||
| function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
| var postcss__default = /*#__PURE__*/_interopDefaultLegacy(postcss); | ||
| // excluding regex trick: http://www.rexegg.com/regex-best-trick.html | ||
| // Not anything inside double quotes | ||
| // Not anything inside single quotes | ||
| // Not anything inside url() | ||
| // Any digit followed by px | ||
| // !singlequotes|!doublequotes|!url()|pixelunit | ||
| function getUnitRegexp(unit) { | ||
| return new RegExp('"[^"]+"|\'[^\']+\'|url\\([^\\)]+\\)|(\\d*\\.?\\d+)' + unit, 'g'); | ||
| } | ||
| const filterPropList = { | ||
| exact: function (list) { | ||
| return list.filter(function (m) { | ||
| return m.match(/^[^\*\!]+$/); | ||
| }); | ||
| }, | ||
| contain: function (list) { | ||
| return list | ||
| .filter(function (m) { | ||
| return m.match(/^\*.+\*$/); | ||
| }) | ||
| .map(function (m) { | ||
| return m.substr(1, m.length - 2); | ||
| }); | ||
| }, | ||
| endWith: function (list) { | ||
| return list | ||
| .filter(function (m) { | ||
| return m.match(/^\*[^\*]+$/); | ||
| }) | ||
| .map(function (m) { | ||
| return m.substr(1); | ||
| }); | ||
| }, | ||
| startWith: function (list) { | ||
| return list | ||
| .filter(function (m) { | ||
| return m.match(/^[^\*\!]+\*$/); | ||
| }) | ||
| .map(function (m) { | ||
| return m.substr(0, m.length - 1); | ||
| }); | ||
| }, | ||
| notExact: function (list) { | ||
| return list | ||
| .filter(function (m) { | ||
| return m.match(/^\![^\*].*$/); | ||
| }) | ||
| .map(function (m) { | ||
| return m.substr(1); | ||
| }); | ||
| }, | ||
| notContain: function (list) { | ||
| return list | ||
| .filter(function (m) { | ||
| return m.match(/^\!\*.+\*$/); | ||
| }) | ||
| .map(function (m) { | ||
| return m.substr(2, m.length - 3); | ||
| }); | ||
| }, | ||
| notEndWith: function (list) { | ||
| return list | ||
| .filter(function (m) { | ||
| return m.match(/^\!\*[^\*]+$/); | ||
| }) | ||
| .map(function (m) { | ||
| return m.substr(2); | ||
| }); | ||
| }, | ||
| notStartWith: function (list) { | ||
| return list | ||
| .filter(function (m) { | ||
| return m.match(/^\![^\*]+\*$/); | ||
| }) | ||
| .map(function (m) { | ||
| return m.substr(1, m.length - 2); | ||
| }); | ||
| } | ||
| }; | ||
| function createPropListMatcher(propList) { | ||
| const hasWild = propList.indexOf('*') > -1; | ||
| const matchAll = hasWild && propList.length === 1; | ||
| const lists = { | ||
| exact: filterPropList.exact(propList), | ||
| contain: filterPropList.contain(propList), | ||
| startWith: filterPropList.startWith(propList), | ||
| endWith: filterPropList.endWith(propList), | ||
| notExact: filterPropList.notExact(propList), | ||
| notContain: filterPropList.notContain(propList), | ||
| notStartWith: filterPropList.notStartWith(propList), | ||
| notEndWith: filterPropList.notEndWith(propList) | ||
| }; | ||
| return function (prop) { | ||
| if (matchAll) | ||
| return true; | ||
| return ((hasWild || | ||
| lists.exact.indexOf(prop) > -1 || | ||
| lists.contain.some(function (m) { | ||
| return prop.indexOf(m) > -1; | ||
| }) || | ||
| lists.startWith.some(function (m) { | ||
| return prop.indexOf(m) === 0; | ||
| }) || | ||
| lists.endWith.some(function (m) { | ||
| return prop.indexOf(m) === prop.length - m.length; | ||
| })) && | ||
| !(lists.notExact.indexOf(prop) > -1 || | ||
| lists.notContain.some(function (m) { | ||
| return prop.indexOf(m) > -1; | ||
| }) || | ||
| lists.notStartWith.some(function (m) { | ||
| return prop.indexOf(m) === 0; | ||
| }) || | ||
| lists.notEndWith.some(function (m) { | ||
| return prop.indexOf(m) === prop.length - m.length; | ||
| }))); | ||
| }; | ||
| } | ||
| const defaults = { | ||
| 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 | ||
| }; | ||
| const ignoreNextComment = 'px-to-viewport-ignore-next'; | ||
| const ignorePrevComment = 'px-to-viewport-ignore'; | ||
| var index = (options = {}) => { | ||
| const opts = Object.assign({}, defaults, options); | ||
| checkRegExpOrArray(opts, 'exclude'); | ||
| checkRegExpOrArray(opts, 'include'); | ||
| const pxRegex = getUnitRegexp(opts.unitToConvert); | ||
| const satisfyPropList = createPropListMatcher(opts.propList); | ||
| const landscapeRules = []; | ||
| return { | ||
| postcssPlugin: 'postcss-px-to-viewport', | ||
| Once(css, { result }) { | ||
| css.walkRules(function (rule) { | ||
| const file = rule.source && rule.source.input.file; | ||
| if (opts.include && file) { | ||
| if (Object.prototype.toString.call(opts.include) === '[object RegExp]') { | ||
| if (!opts.include.test(file)) | ||
| return; | ||
| } | ||
| else if (Object.prototype.toString.call(opts.include) === '[object Array]') { | ||
| let flag = false; | ||
| const include = opts.include; | ||
| for (let i = 0; i < include.length; i++) { | ||
| if (include[i].test(file)) { | ||
| flag = true; | ||
| break; | ||
| } | ||
| } | ||
| if (!flag) | ||
| return; | ||
| } | ||
| } | ||
| if (opts.exclude && file) { | ||
| if (Object.prototype.toString.call(opts.exclude) === '[object RegExp]') { | ||
| if (opts.exclude.test(file)) | ||
| return; | ||
| } | ||
| else if (Object.prototype.toString.call(opts.exclude) === '[object Array]') { | ||
| const exclude = opts.exclude; | ||
| for (let i = 0; i < exclude.length; i++) { | ||
| if (exclude[i].test(file)) | ||
| return; | ||
| } | ||
| } | ||
| else { | ||
| throw new Error('options.exclude should be RegExp or Array.'); | ||
| } | ||
| } | ||
| if (blacklistedSelector(opts.selectorBlackList, rule.selector)) | ||
| return; | ||
| if (opts.landscape && !rule.parent.params) { | ||
| const landscapeRule = rule.clone().removeAll(); | ||
| rule.walkDecls(function (decl) { | ||
| if (decl.value.indexOf(opts.unitToConvert) === -1) | ||
| return; | ||
| if (!satisfyPropList(decl.prop)) | ||
| return; | ||
| landscapeRule.append(decl.clone({ | ||
| value: decl.value.replace(pxRegex, createPxReplace(opts, opts.landscapeUnit, opts.landscapeWidth)) | ||
| })); | ||
| }); | ||
| if (landscapeRule.nodes.length > 0) { | ||
| landscapeRules.push(landscapeRule); | ||
| } | ||
| } | ||
| if (!validateParams(rule.parent.params, opts.mediaQuery)) { | ||
| return; | ||
| } | ||
| rule.walkDecls(function (decl, i) { | ||
| if (decl.value.indexOf(opts.unitToConvert) === -1) | ||
| return; | ||
| if (!satisfyPropList(decl.prop)) | ||
| return; | ||
| const prev = decl.prev(); | ||
| if (prev && | ||
| prev.type === 'comment' && | ||
| prev.text === ignoreNextComment) { | ||
| prev.remove(); | ||
| return; | ||
| } | ||
| const next = decl.next(); | ||
| if (next && | ||
| next.type === 'comment' && | ||
| next.text === ignorePrevComment) { | ||
| if (/\n/.test(next.raws.before)) { | ||
| result.warn('Unexpected comment /* ' + | ||
| ignorePrevComment + | ||
| ' */ must be after declaration at same line.', { node: next }); | ||
| } | ||
| else { | ||
| next.remove(); | ||
| return; | ||
| } | ||
| } | ||
| let unit; | ||
| let size; | ||
| const params = rule.parent.params; | ||
| if (opts.landscape && params && params.indexOf('landscape') !== -1) { | ||
| unit = opts.landscapeUnit; | ||
| size = opts.landscapeWidth; | ||
| } | ||
| else { | ||
| unit = getUnit(decl.prop, opts); | ||
| size = opts.viewportWidth; | ||
| } | ||
| const value = decl.value.replace(pxRegex, createPxReplace(opts, unit, size)); | ||
| if (declarationExists(decl.parent, decl.prop, value)) | ||
| return; | ||
| if (opts.replace) { | ||
| decl.value = value; | ||
| } | ||
| else { | ||
| decl.parent.insertAfter(i, decl.clone({ value: value })); | ||
| } | ||
| }); | ||
| }); | ||
| if (landscapeRules.length > 0) { | ||
| const landscapeRoot = postcss__default["default"].atRule({ | ||
| params: '(orientation: landscape)', | ||
| name: 'media' | ||
| }); | ||
| landscapeRules.forEach(function (rule) { | ||
| landscapeRoot.append(rule); | ||
| }); | ||
| css.append(landscapeRoot); | ||
| } | ||
| } | ||
| }; | ||
| }; | ||
| function getUnit(prop, opts) { | ||
| return prop.indexOf('font') === -1 ? opts.viewportUnit : opts.fontViewportUnit; | ||
| } | ||
| function createPxReplace(opts, viewportUnit, viewportSize) { | ||
| return function (m, $1) { | ||
| if (!$1) | ||
| return m; | ||
| const pixels = parseFloat($1); | ||
| if (pixels <= opts.minPixelValue) | ||
| return m; | ||
| const parsedVal = toFixed((pixels / viewportSize) * 100, opts.unitPrecision); | ||
| return parsedVal === 0 ? '0' : parsedVal + viewportUnit; | ||
| }; | ||
| } | ||
| function checkRegExpOrArray(options, optionName) { | ||
| const option = options[optionName]; | ||
| if (!option) | ||
| return; | ||
| if (Object.prototype.toString.call(option) === '[object RegExp]') | ||
| return; | ||
| if (Object.prototype.toString.call(option) === '[object Array]') { | ||
| let bad = false; | ||
| for (let i = 0; i < option.length; i++) { | ||
| if (Object.prototype.toString.call(option[i]) !== '[object RegExp]') { | ||
| bad = true; | ||
| break; | ||
| } | ||
| } | ||
| if (!bad) | ||
| return; | ||
| } | ||
| throw new Error('options.' + optionName + ' should be RegExp or Array of RegExp.'); | ||
| } | ||
| function toFixed(number, precision) { | ||
| const multiplier = Math.pow(10, precision + 1); | ||
| const wholeNumber = Math.floor(number * multiplier); | ||
| return (Math.round(wholeNumber / 10) * 10) / multiplier; | ||
| } | ||
| function blacklistedSelector(blacklist, selector) { | ||
| if (typeof selector !== 'string') | ||
| return; | ||
| return blacklist.some(function (regex) { | ||
| if (typeof regex === 'string') | ||
| return selector.indexOf(regex) !== -1; | ||
| return selector.match(regex); | ||
| }); | ||
| } | ||
| function declarationExists(decls, prop, value) { | ||
| return decls.some(function (decl) { | ||
| return decl.prop === prop && decl.value === value; | ||
| }); | ||
| } | ||
| function validateParams(params, mediaQuery) { | ||
| return !params || (params && mediaQuery); | ||
| } | ||
| module.exports = index; | ||
| "use strict";var O=require("postcss");function y(n){return n&&typeof n=="object"&&"default"in n?n:{default:n}}var W=y(O);function E(n){return new RegExp(`"[^"]+"|'[^']+'|url\\([^\\)]+\\)|(\\d*\\.?\\d+)`+n,"g")}const l={exact:function(n){return n.filter(function(t){return t.match(/^[^\*\!]+$/)})},contain:function(n){return n.filter(function(t){return t.match(/^\*.+\*$/)}).map(function(t){return t.substr(1,t.length-2)})},endWith:function(n){return n.filter(function(t){return t.match(/^\*[^\*]+$/)}).map(function(t){return t.substr(1)})},startWith:function(n){return n.filter(function(t){return t.match(/^[^\*\!]+\*$/)}).map(function(t){return t.substr(0,t.length-1)})},notExact:function(n){return n.filter(function(t){return t.match(/^\![^\*].*$/)}).map(function(t){return t.substr(1)})},notContain:function(n){return n.filter(function(t){return t.match(/^\!\*.+\*$/)}).map(function(t){return t.substr(2,t.length-3)})},notEndWith:function(n){return n.filter(function(t){return t.match(/^\!\*[^\*]+$/)}).map(function(t){return t.substr(2)})},notStartWith:function(n){return n.filter(function(t){return t.match(/^\![^\*]+\*$/)}).map(function(t){return t.substr(1,t.length-2)})}};function R(n){const t=n.indexOf("*")>-1,r=t&&n.length===1,e={exact:l.exact(n),contain:l.contain(n),startWith:l.startWith(n),endWith:l.endWith(n),notExact:l.notExact(n),notContain:l.notContain(n),notStartWith:l.notStartWith(n),notEndWith:l.notEndWith(n)};return function(i){return r?!0:(t||e.exact.indexOf(i)>-1||e.contain.some(function(u){return i.indexOf(u)>-1})||e.startWith.some(function(u){return i.indexOf(u)===0})||e.endWith.some(function(u){return i.indexOf(u)===i.length-u.length}))&&!(e.notExact.indexOf(i)>-1||e.notContain.some(function(u){return i.indexOf(u)>-1})||e.notStartWith.some(function(u){return i.indexOf(u)===0})||e.notEndWith.some(function(u){return i.indexOf(u)===i.length-u.length}))}}const j={unitToConvert:"px",viewportWidth:320,viewportHeight:568,unitPrecision:5,viewportUnit:"vw",fontViewportUnit:"vw",selectorBlackList:[],propList:["*"],minPixelValue:1,mediaQuery:!1,replace:!0,landscape:!1,landscapeUnit:"vw",landscapeWidth:568},S="px-to-viewport-ignore-next",b="px-to-viewport-ignore";function P(n,t){return n.indexOf("font")===-1?t.viewportUnit:t.fontViewportUnit}function v(n,t,r){return function(e,i){if(!i)return e;const u=parseFloat(i);if(u<=n.minPixelValue)return e;const d=C(u/r*100,n.unitPrecision);return d===0?"0":d+t}}function w(n,t){const r=n[t];if(!!r&&Object.prototype.toString.call(r)!=="[object RegExp]"){if(Object.prototype.toString.call(r)==="[object Array]"){let e=!1;for(let i=0;i<r.length;i++)if(Object.prototype.toString.call(r[i])!=="[object RegExp]"){e=!0;break}if(!e)return}throw new Error("options."+t+" should be RegExp or Array of RegExp.")}}function C(n,t){const r=Math.pow(10,t+1),e=Math.floor(n*r);return Math.round(e/10)*10/r}function U(n,t){if(typeof t=="string")return n.some(function(r){return typeof r=="string"?t.indexOf(r)!==-1:t.match(r)})}function k(n,t,r){return n.some(function(e){return e.prop===t&&e.value===r})}function A(n,t){return!n||n&&t}module.exports=(n={})=>{const t=Object.assign({},j,n);w(t,"exclude"),w(t,"include");const r=E(t.unitToConvert),e=R(t.propList),i=[];return{postcssPlugin:"postcss-px-to-viewport",Once(u,{result:d}){if(u.walkRules(function(a){const f=a.source&&a.source.input.file;if(t.include&&f){if(Object.prototype.toString.call(t.include)==="[object RegExp]"){if(!t.include.test(f))return}else if(Object.prototype.toString.call(t.include)==="[object Array]"){let o=!1;const c=t.include;for(let s=0;s<c.length;s++)if(c[s].test(f)){o=!0;break}if(!o)return}}if(t.exclude&&f)if(Object.prototype.toString.call(t.exclude)==="[object RegExp]"){if(t.exclude.test(f))return}else if(Object.prototype.toString.call(t.exclude)==="[object Array]"){const o=t.exclude;for(let c=0;c<o.length;c++)if(o[c].test(f))return}else throw new Error("options.exclude should be RegExp or Array.");if(!U(t.selectorBlackList,a.selector)){if(t.landscape&&!a.parent.params){const o=a.clone().removeAll();a.walkDecls(function(c){c.value.indexOf(t.unitToConvert)!==-1&&(!e(c.prop)||o.append(c.clone({value:c.value.replace(r,v(t,t.landscapeUnit,t.landscapeWidth))})))}),o.nodes.length>0&&i.push(o)}!A(a.parent.params,t.mediaQuery)||a.walkDecls(function(o,c){if(o.value.indexOf(t.unitToConvert)===-1||!e(o.prop))return;const s=o.prev();if(s&&s.type==="comment"&&s.text===S){s.remove();return}const p=o.next();if(p&&p.type==="comment"&&p.text===b)if(/\n/.test(p.raws.before))d.warn("Unexpected comment /* "+b+" */ must be after declaration at same line.",{node:p});else{p.remove();return}let h,x;const g=a.parent.params;t.landscape&&g&&g.indexOf("landscape")!==-1?(h=t.landscapeUnit,x=t.landscapeWidth):(h=P(o.prop,t),x=t.viewportWidth);const m=o.value.replace(r,v(t,h,x));k(o.parent,o.prop,m)||(t.replace?o.value=m:o.parent.insertAfter(c,o.clone({value:m})))})}}),i.length>0){const a=W.default.atRule({params:"(orientation: landscape)",name:"media"});i.forEach(function(f){a.append(f)}),u.append(a)}}}}; |
| export declare function getUnitRegexp(unit: string): RegExp |
@@ -0,0 +0,0 @@ export declare const filterPropList: { |
@@ -0,0 +0,0 @@ export declare type Options = { |
| { | ||
| "name": "@ttou/postcss-px-to-viewport", | ||
| "description": "A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).", | ||
| "version": "1.1.7", | ||
| "version": "2.0.0", | ||
| "author": "Dmitry Karpunin <koderfunk@gmail.com>", | ||
@@ -16,3 +16,2 @@ "license": "MIT", | ||
| "require": "./out/index.js", | ||
| "import": "./out/index.mjs", | ||
| "types": "./out/index.d.ts" | ||
@@ -22,3 +21,2 @@ } | ||
| "main": "out/index.js", | ||
| "module": "out/index.mjs", | ||
| "types": "out/index.d.ts", | ||
@@ -42,14 +40,11 @@ "keywords": [ | ||
| "scripts": { | ||
| "build": "run-p build:*", | ||
| "build:src": "rollup -c", | ||
| "build:dts": "tsc", | ||
| "build": "vite build", | ||
| "test": "vitest", | ||
| "prebuild": "rimraf out", | ||
| "commit": "git add . && git cz" | ||
| }, | ||
| "devDependencies": { | ||
| "@commitlint/cli": "^16.0.0", | ||
| "@commitlint/config-conventional": "^16.0.0", | ||
| "@commitlint/cli": "^17.0.0", | ||
| "@commitlint/config-conventional": "^17.0.0", | ||
| "@rollup/plugin-typescript": "^8.3.0", | ||
| "@ttou/define-config": "^1.0.0", | ||
| "@ttou/define-config": "^2.0.0", | ||
| "@typescript-eslint/eslint-plugin": "^5.0.0", | ||
@@ -63,12 +58,9 @@ "@typescript-eslint/parser": "^5.0.0", | ||
| "eslint-plugin-simple-import-sort": "^7.0.0", | ||
| "lint-staged": "^11.2.6", | ||
| "npm-run-all": "^4.1.5", | ||
| "lint-staged": "^12.0.0", | ||
| "postcss": "^8.0.0", | ||
| "prettier": "^2.6.0", | ||
| "rimraf": "^3.0.2", | ||
| "rollup": "^2.64.0", | ||
| "rollup-plugin-commonjs": "^10.1.0", | ||
| "rollup-plugin-node-resolve": "^5.2.0", | ||
| "simple-git-hooks": "^2.8.0", | ||
| "typescript": "^4.5.4", | ||
| "typescript": "^4.7.2", | ||
| "vite": "^2.9.10", | ||
| "vite-plugin-dts": "^1.2.0", | ||
| "vitest": "^0.14.0" | ||
@@ -75,0 +67,0 @@ }, |
@@ -28,3 +28,4 @@ import type { Plugin, Rule } from 'postcss' | ||
| export default (options: Options = {} as Options) => { | ||
| // @ts-ignore | ||
| export = (options: Options = {} as Options) => { | ||
| const opts = Object.assign({}, defaults, options) | ||
@@ -31,0 +32,0 @@ |
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
20
-13.04%Worsened metrics
- Total package byte prevSize
39940
-47.2%- Number of package files
15
-42.31%- Lines of code
533
-63.84%- Number of low quality alerts
1
Infinity%- Number of medium supply chain risk alerts
1
Infinity%No dependency changes