postcss-convert-values 5.0.4 → 5.1.2

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "postcss-convert-values",
-  "version": "5.0.4",
+  "version": "5.1.2",
   "description": "Convert values with PostCSS (e.g. ms -> s)",
   "main": "src/index.js",
+  "types": "types/index.d.ts",
   "files": [
     "LICENSE-MIT",
-    "src"
+    "src",
+    "types"
   ],
   "keywords": [
     "css",
@@ -22,6 +24,7 @@
   },
   "repository": "cssnano/cssnano",
   "dependencies": {
+    "browserslist": "^4.20.3",
     "postcss-value-parser": "^4.2.0"
   },
   "bugs": {
@@ -35,6 +38,5 @@
   },
   "peerDependencies": {
     "postcss": "^8.2.15"
-  },
-  "readme": "# [postcss][postcss]-convert-values\n\n> Convert values with PostCSS (e.g. ms -> s)\n\n## Install\n\nWith [npm](https://npmjs.org/package/postcss-convert-values) do:\n\n```\nnpm install postcss-convert-values --save\n```\n\n## Example\n\nThis plugin reduces CSS size by converting values to use different units\nwhere possible; for example, `500ms` can be represented as `.5s`. You can\nread more about these units in [this article][csstricks].\n\n### Input\n\n```css\nh1 {\n    font-size: 16px;\n    width: 0em\n}\n```\n\n### Output\n\n```css\nh1 {\n    font-size: 1pc;\n    width: 0\n}\n```\n\nNote that this plugin only covers conversions for duration and absolute length\nvalues. For color conversions, use [postcss-colormin][colormin].\n\n## API\n\n### convertValues([options])\n\n#### options\n\n##### length\n\nType: `boolean`\nDefault: `true`\n\nPass `false` to disable conversion from `px` to other absolute length units,\nsuch as `pc` & `pt` & vice versa.\n\n##### time\n\nType: `boolean`\nDefault: `true`\n\nPass `false` to disable conversion from `ms` to `s` & vice versa.\n\n##### angle\n\nType: `boolean`\nDefault: `true`\n\nPass `false` to disable conversion from `deg` to `turn` & vice versa.\n\n##### precision\n\nType: `boolean|number`\nDefault: `false`\n\nSpecify any numeric value here to round `px` values to that many decimal places;\nfor example, using `{precision: 2}` will round `6.66667px` to `6.67px`, and\n`{precision: 0}` will round it to `7px`. Passing `false` (the default) will\nleave these values as is.\n\nIt is recommended for most use cases to set this option to `2`.\n\n\n## Usage\n\nSee the [PostCSS documentation](https://github.com/postcss/postcss#usage) for\nexamples for your environment.\n\n\n## Contributors\n\nSee [CONTRIBUTORS.md](https://github.com/cssnano/cssnano/blob/master/CONTRIBUTORS.md).\n\n\n## License\n\nMIT © [Ben Briggs](http://beneb.info)\n\n\n[postcss]: https://github.com/postcss/postcss\n[csstricks]: https://css-tricks.com/the-lengths-of-css/\n"
+  }
 }

package/src/index.js

@@ -1,6 +1,7 @@
 'use strict';
 const valueParser = require('postcss-value-parser');
-const convert = require('./lib/convert');
+const browserslist = require('browserslist');
+const convert = require('./lib/convert.js');
 
 const LENGTH_UNITS = new Set([
   'em',
@@ -36,10 +37,16 @@ const keepWhenZero = new Set([
   'line-height',
 ]);
 
-/*
+// Can't remove the % on these properties when they're 0 on IE 11
+const keepZeroPercent = new Set(['max-height', 'height', 'min-width']);
+
+/**
  * Numbers without digits after the dot are technically invalid,
  * but in that case css-value-parser returns the dot as part of the unit,
  * so we use this to remove the dot.
+ *
+ * @param {string} item
+ * @return {string}
  */
 function stripLeadingDot(item) {
   if (item.charCodeAt(0) === '.'.charCodeAt(0)) {
@@ -49,6 +56,12 @@ function stripLeadingDot(item) {
   }
 }
 
+/**
+ * @param {valueParser.Node} node
+ * @param {Options} opts
+ * @param {boolean} keepZeroUnit
+ * @return {void}
+ */
 function parseWord(node, opts, keepZeroUnit) {
   const pair = valueParser.unit(node.value);
   if (pair) {
@@ -76,6 +89,10 @@ function parseWord(node, opts, keepZeroUnit) {
   }
 }
 
+/**
+ * @param {valueParser.WordNode} node
+ * @return {void}
+ */
 function clampOpacity(node) {
   const pair = valueParser.unit(node.value);
   if (!pair) {
@@ -89,21 +106,35 @@ function clampOpacity(node) {
   }
 }
 
-function shouldKeepZeroUnit(decl) {
+/**
+ * @param {import('postcss').Declaration} decl
+ * @param {string[]} browsers
+ * @return {boolean}
+ */
+function shouldKeepZeroUnit(decl, browsers) {
   const { parent } = decl;
   const lowerCasedProp = decl.prop.toLowerCase();
   return (
     (decl.value.includes('%') &&
-      (lowerCasedProp === 'max-height' || lowerCasedProp === 'height')) ||
-    (parent.parent &&
-      parent.parent.name &&
-      parent.parent.name.toLowerCase() === 'keyframes' &&
+      keepZeroPercent.has(lowerCasedProp) &&
+      browsers.includes('ie 11')) ||
+    (parent &&
+      parent.parent &&
+      parent.parent.type === 'atrule' &&
+      /** @type {import('postcss').AtRule} */ (
+        parent.parent
+      ).name.toLowerCase() === 'keyframes' &&
       lowerCasedProp === 'stroke-dasharray') ||
     keepWhenZero.has(lowerCasedProp)
   );
 }
-
-function transform(opts, decl) {
+/**
+ * @param {Options} opts
+ * @param {string[]} browsers
+ * @param {import('postcss').Declaration} decl
+ * @return {void}
+ */
+function transform(opts, browsers, decl) {
   const lowerCasedProp = decl.prop.toLowerCase();
   if (
     lowerCasedProp.includes('flex') ||
@@ -118,7 +149,7 @@ function transform(opts, decl) {
       const lowerCasedValue = node.value.toLowerCase();
 
       if (node.type === 'word') {
-        parseWord(node, opts, shouldKeepZeroUnit(decl));
+        parseWord(node, opts, shouldKeepZeroUnit(decl, browsers));
         if (
           lowerCasedProp === 'opacity' ||
           lowerCasedProp === 'shape-image-threshold'
@@ -150,12 +181,24 @@ function transform(opts, decl) {
 }
 
 const plugin = 'postcss-convert-values';
-
+/**
+ * @typedef {{precision: boolean | number, angle?: boolean, time?: boolean, length?: boolean} & browserslist.Options} Options */
+/**
+ * @type {import('postcss').PluginCreator<Options>}
+ * @param {Options} opts
+ * @return {import('postcss').Plugin}
+ */
 function pluginCreator(opts = { precision: false }) {
+  const browsers = browserslist(null, {
+    stats: opts.stats,
+    path: __dirname,
+    env: opts.env,
+  });
+
   return {
     postcssPlugin: plugin,
     OnceExit(css) {
-      css.walkDecls(transform.bind(null, opts));
+      css.walkDecls((decl) => transform(opts, browsers, decl));
     },
   };
 }

package/src/lib/convert.js

@@ -15,7 +15,10 @@ const angleConv = new Map([
   ['turn', 360],
   ['deg', 1],
 ]);
-
+/**
+ * @param {number} number
+ * @return {string}
+ */
 function dropLeadingZero(number) {
   const value = String(number);
 
@@ -31,19 +34,33 @@ function dropLeadingZero(number) {
 
   return value;
 }
-
+/**
+ * @param {number} number
+ * @param {string} originalUnit
+ * @param {lengthConv | timeConv | angleConv} conversions
+ * @return {string}
+ */
 function transform(number, originalUnit, conversions) {
   let conversionUnits = [...conversions.keys()].filter((u) => {
     return originalUnit !== u;
   });
 
-  const base = number * conversions.get(originalUnit);
+  const base = number * /** @type {number} */ (conversions.get(originalUnit));
 
   return conversionUnits
-    .map((u) => dropLeadingZero(base / conversions.get(u)) + u)
+    .map(
+      (u) =>
+        dropLeadingZero(base / /** @type {number} */ (conversions.get(u))) + u
+    )
     .reduce((a, b) => (a.length < b.length ? a : b));
 }
 
+/**
+ * @param {number} number
+ * @param {string} unit
+ * @param {{time?: boolean, length?: boolean, angle?: boolean}} options
+ * @return {string}
+ */
 module.exports = function (number, unit, { time, length, angle }) {
   let value = dropLeadingZero(number) + (unit ? unit : '');
   let converted;

package/types/index.d.ts

@@ -0,0 +1,20 @@
+export = pluginCreator;
+/**
+ * @typedef {{precision: boolean | number, angle?: boolean, time?: boolean, length?: boolean} & browserslist.Options} Options */
+/**
+ * @type {import('postcss').PluginCreator<Options>}
+ * @param {Options} opts
+ * @return {import('postcss').Plugin}
+ */
+declare function pluginCreator(opts?: Options): import('postcss').Plugin;
+declare namespace pluginCreator {
+    export { postcss, Options };
+}
+type Options = {
+    precision: boolean | number;
+    angle?: boolean;
+    time?: boolean;
+    length?: boolean;
+} & browserslist.Options;
+declare var postcss: true;
+import browserslist = require("browserslist");

package/types/lib/convert.d.ts

@@ -0,0 +1,6 @@
+declare function _exports(number: number, unit: string, { time, length, angle }: {
+    time?: boolean;
+    length?: boolean;
+    angle?: boolean;
+}): string;
+export = _exports;