postcss-convert-values 5.0.3 → 5.1.1

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "postcss-convert-values",
-  "version": "5.0.3",
+  "version": "5.1.1",
   "description": "Convert values with PostCSS (e.g. ms -> s)",
-  "main": "dist/index.js",
+  "main": "src/index.js",
+  "types": "types/index.d.ts",
   "files": [
     "LICENSE-MIT",
-    "dist"
+    "src",
+    "types"
   ],
   "keywords": [
     "css",
@@ -22,6 +24,7 @@
   },
   "repository": "cssnano/cssnano",
   "dependencies": {
+    "browserslist": "^4.20.3",
     "postcss-value-parser": "^4.2.0"
   },
   "bugs": {
@@ -35,10 +38,5 @@
   },
   "peerDependencies": {
     "postcss": "^8.2.15"
-  },
-  "scripts": {
-    "prebuild": "rimraf dist",
-    "build": "babel src --config-file ../../babel.config.json --out-dir dist --ignore \"**/__tests__/\""
-  },
-  "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

@@ -0,0 +1,207 @@
+'use strict';
+const valueParser = require('postcss-value-parser');
+const browserslist = require('browserslist');
+const convert = require('./lib/convert.js');
+
+const LENGTH_UNITS = new Set([
+  'em',
+  'ex',
+  'ch',
+  'rem',
+  'vw',
+  'vh',
+  'vmin',
+  'vmax',
+  'cm',
+  'mm',
+  'q',
+  'in',
+  'pt',
+  'pc',
+  'px',
+]);
+
+// These properties only accept percentages, so no point in trying to transform
+const notALength = new Set([
+  'descent-override',
+  'ascent-override',
+  'font-stretch',
+  'size-adjust',
+  'line-gap-override',
+]);
+
+// Can't change the unit on these properties when they're 0
+const keepWhenZero = new Set([
+  'stroke-dashoffset',
+  'stroke-width',
+  '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)) {
+    return item.slice(1);
+  } else {
+    return 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) {
+    const num = Number(pair.number);
+    const u = stripLeadingDot(pair.unit);
+    if (num === 0) {
+      node.value =
+        0 +
+        (keepZeroUnit || (!LENGTH_UNITS.has(u.toLowerCase()) && u !== '%')
+          ? u
+          : '');
+    } else {
+      node.value = convert(num, u, opts);
+
+      if (
+        typeof opts.precision === 'number' &&
+        u.toLowerCase() === 'px' &&
+        pair.number.includes('.')
+      ) {
+        const precision = Math.pow(10, opts.precision);
+        node.value =
+          Math.round(parseFloat(node.value) * precision) / precision + u;
+      }
+    }
+  }
+}
+
+/**
+ * @param {valueParser.WordNode} node
+ * @return {void}
+ */
+function clampOpacity(node) {
+  const pair = valueParser.unit(node.value);
+  if (!pair) {
+    return;
+  }
+  let num = Number(pair.number);
+  if (num > 1) {
+    node.value = pair.unit === '%' ? num + pair.unit : 1 + pair.unit;
+  } else if (num < 0) {
+    node.value = 0 + pair.unit;
+  }
+}
+
+/**
+ * @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('%') &&
+      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)
+  );
+}
+/**
+ * @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') ||
+    lowerCasedProp.indexOf('--') === 0 ||
+    notALength.has(lowerCasedProp)
+  ) {
+    return;
+  }
+
+  decl.value = valueParser(decl.value)
+    .walk((node) => {
+      const lowerCasedValue = node.value.toLowerCase();
+
+      if (node.type === 'word') {
+        parseWord(node, opts, shouldKeepZeroUnit(decl, browsers));
+        if (
+          lowerCasedProp === 'opacity' ||
+          lowerCasedProp === 'shape-image-threshold'
+        ) {
+          clampOpacity(node);
+        }
+      } else if (node.type === 'function') {
+        if (
+          lowerCasedValue === 'calc' ||
+          lowerCasedValue === 'min' ||
+          lowerCasedValue === 'max' ||
+          lowerCasedValue === 'clamp' ||
+          lowerCasedValue === 'hsl' ||
+          lowerCasedValue === 'hsla'
+        ) {
+          valueParser.walk(node.nodes, (n) => {
+            if (n.type === 'word') {
+              parseWord(n, opts, true);
+            }
+          });
+          return false;
+        }
+        if (lowerCasedValue === 'url') {
+          return false;
+        }
+      }
+    })
+    .toString();
+}
+
+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((decl) => transform(opts, browsers, decl));
+    },
+  };
+}
+
+pluginCreator.postcss = true;
+module.exports = pluginCreator;

package/src/lib/convert.js

@@ -0,0 +1,85 @@
+'use strict';
+const lengthConv = new Map([
+  ['in', 96],
+  ['px', 1],
+  ['pt', 4 / 3],
+  ['pc', 16],
+]);
+
+const timeConv = new Map([
+  ['s', 1000],
+  ['ms', 1],
+]);
+
+const angleConv = new Map([
+  ['turn', 360],
+  ['deg', 1],
+]);
+/**
+ * @param {number} number
+ * @return {string}
+ */
+function dropLeadingZero(number) {
+  const value = String(number);
+
+  if (number % 1) {
+    if (value[0] === '0') {
+      return value.slice(1);
+    }
+
+    if (value[0] === '-' && value[1] === '0') {
+      return '-' + value.slice(2);
+    }
+  }
+
+  return value;
+}
+/**
+ * @param {number} number
+ * @param {string} originalUnit
+ * @param {Map<string, number>} conversions
+ * @return {string}
+ */
+function transform(number, originalUnit, conversions) {
+  let conversionUnits = [...conversions.keys()].filter((u) => {
+    return originalUnit !== u;
+  });
+
+  const base = number * /** @type {number} */ (conversions.get(originalUnit));
+
+  return conversionUnits
+    .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;
+  const lowerCaseUnit = unit.toLowerCase();
+  if (length !== false && lengthConv.has(lowerCaseUnit)) {
+    converted = transform(number, lowerCaseUnit, lengthConv);
+  }
+
+  if (time !== false && timeConv.has(lowerCaseUnit)) {
+    converted = transform(number, lowerCaseUnit, timeConv);
+  }
+
+  if (angle !== false && angleConv.has(lowerCaseUnit)) {
+    converted = transform(number, lowerCaseUnit, angleConv);
+  }
+
+  if (converted && converted.length < value.length) {
+    value = converted;
+  }
+
+  return value;
+};

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;

package/dist/index.js

@@ -1,132 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _postcssValueParser = _interopRequireWildcard(require("postcss-value-parser"));
-
-var _convert = _interopRequireDefault(require("./lib/convert"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const LENGTH_UNITS = new Set(['em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', 'cm', 'mm', 'q', 'in', 'pt', 'pc', 'px']); // These properties only accept percentages, so no point in trying to transform
-
-const notALength = new Set(['descent-override', 'ascent-override', 'font-stretch', 'size-adjust', 'line-gap-override']); // Can't change the unit on these properties when they're 0
-
-const keepWhenZero = new Set(['stroke-dashoffset', 'stroke-width', 'line-height']);
-/*
- * 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.
- */
-
-function stripLeadingDot(item) {
-  if (item.charCodeAt(0) === '.'.charCodeAt(0)) {
-    return item.slice(1);
-  } else {
-    return item;
-  }
-}
-
-function parseWord(node, opts, keepZeroUnit) {
-  const pair = (0, _postcssValueParser.unit)(node.value);
-
-  if (pair) {
-    const num = Number(pair.number);
-    const u = stripLeadingDot(pair.unit);
-
-    if (num === 0) {
-      node.value = 0 + (keepZeroUnit || !LENGTH_UNITS.has(u.toLowerCase()) && u !== '%' ? u : '');
-    } else {
-      node.value = (0, _convert.default)(num, u, opts);
-
-      if (typeof opts.precision === 'number' && u.toLowerCase() === 'px' && pair.number.includes('.')) {
-        const precision = Math.pow(10, opts.precision);
-        node.value = Math.round(parseFloat(node.value) * precision) / precision + u;
-      }
-    }
-  }
-}
-
-function clampOpacity(node) {
-  const pair = (0, _postcssValueParser.unit)(node.value);
-
-  if (!pair) {
-    return;
-  }
-
-  let num = Number(pair.number);
-
-  if (num > 1) {
-    node.value = pair.unit === '%' ? num + pair.unit : 1 + pair.unit;
-  } else if (num < 0) {
-    node.value = 0 + pair.unit;
-  }
-}
-
-function shouldKeepZeroUnit(decl) {
-  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' && lowerCasedProp === 'stroke-dasharray' || keepWhenZero.has(lowerCasedProp);
-}
-
-function transform(opts, decl) {
-  const lowerCasedProp = decl.prop.toLowerCase();
-
-  if (lowerCasedProp.includes('flex') || lowerCasedProp.indexOf('--') === 0 || notALength.has(lowerCasedProp)) {
-    return;
-  }
-
-  decl.value = (0, _postcssValueParser.default)(decl.value).walk(node => {
-    const lowerCasedValue = node.value.toLowerCase();
-
-    if (node.type === 'word') {
-      parseWord(node, opts, shouldKeepZeroUnit(decl));
-
-      if (lowerCasedProp === 'opacity' || lowerCasedProp === 'shape-image-threshold') {
-        clampOpacity(node);
-      }
-    } else if (node.type === 'function') {
-      if (lowerCasedValue === 'calc' || lowerCasedValue === 'min' || lowerCasedValue === 'max' || lowerCasedValue === 'clamp' || lowerCasedValue === 'hsl' || lowerCasedValue === 'hsla') {
-        (0, _postcssValueParser.walk)(node.nodes, n => {
-          if (n.type === 'word') {
-            parseWord(n, opts, true);
-          }
-        });
-        return false;
-      }
-
-      if (lowerCasedValue === 'url') {
-        return false;
-      }
-    }
-  }).toString();
-}
-
-const plugin = 'postcss-convert-values';
-
-function pluginCreator(opts = {
-  precision: false
-}) {
-  return {
-    postcssPlugin: plugin,
-
-    OnceExit(css) {
-      css.walkDecls(transform.bind(null, opts));
-    }
-
-  };
-}
-
-pluginCreator.postcss = true;
-var _default = pluginCreator;
-exports.default = _default;
-module.exports = exports.default;

package/dist/lib/convert.js

@@ -1,85 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = _default;
-const lengthConv = {
-  in: 96,
-  px: 1,
-  pt: 4 / 3,
-  pc: 16
-};
-const timeConv = {
-  s: 1000,
-  ms: 1
-};
-const angleConv = {
-  turn: 360,
-  deg: 1
-};
-
-function dropLeadingZero(number) {
-  const value = String(number);
-
-  if (number % 1) {
-    if (value[0] === '0') {
-      return value.slice(1);
-    }
-
-    if (value[0] === '-' && value[1] === '0') {
-      return '-' + value.slice(2);
-    }
-  }
-
-  return value;
-}
-
-function transform(number, unit, conversion) {
-  const lowerCasedUnit = unit.toLowerCase();
-  let one, base;
-  let convertionUnits = Object.keys(conversion).filter(u => {
-    if (conversion[u] === 1) {
-      one = u;
-    }
-
-    return lowerCasedUnit !== u;
-  });
-
-  if (lowerCasedUnit === one) {
-    base = number / conversion[lowerCasedUnit];
-  } else {
-    base = number * conversion[lowerCasedUnit];
-  }
-
-  return convertionUnits.map(u => dropLeadingZero(base / conversion[u]) + u).reduce((a, b) => a.length < b.length ? a : b);
-}
-
-function _default(number, unit, {
-  time,
-  length,
-  angle
-}) {
-  let value = dropLeadingZero(number) + (unit ? unit : '');
-  let converted;
-
-  if (length !== false && unit.toLowerCase() in lengthConv) {
-    converted = transform(number, unit, lengthConv);
-  }
-
-  if (time !== false && unit.toLowerCase() in timeConv) {
-    converted = transform(number, unit, timeConv);
-  }
-
-  if (angle !== false && unit.toLowerCase() in angleConv) {
-    converted = transform(number, unit, angleConv);
-  }
-
-  if (converted && converted.length < value.length) {
-    value = converted;
-  }
-
-  return value;
-}
-
-module.exports = exports.default;