postcss-convert-values 5.1.0 → 5.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-convert-values",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "description": "Convert values with PostCSS (e.g. ms -> s)",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -24,6 +24,7 @@
   },
   "repository": "cssnano/cssnano",
   "dependencies": {
+    "browserslist": "^4.20.3",
     "postcss-value-parser": "^4.2.0"
   },
   "bugs": {
@@ -37,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,5 +1,6 @@
 'use strict';
 const valueParser = require('postcss-value-parser');
+const browserslist = require('browserslist');
 const convert = require('./lib/convert.js');
 
 const LENGTH_UNITS = new Set([
@@ -36,6 +37,9 @@ 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,
@@ -104,14 +108,16 @@ function clampOpacity(node) {
 
 /**
  * @param {import('postcss').Declaration} decl
+ * @param {string[]} browsers
  * @return {boolean}
  */
-function shouldKeepZeroUnit(decl) {
+function shouldKeepZeroUnit(decl, browsers) {
   const { parent } = decl;
   const lowerCasedProp = decl.prop.toLowerCase();
   return (
     (decl.value.includes('%') &&
-      (lowerCasedProp === 'max-height' || lowerCasedProp === 'height')) ||
+      keepZeroPercent.has(lowerCasedProp) &&
+      browsers.includes('ie 11')) ||
     (parent &&
       parent.parent &&
       parent.parent.type === 'atrule' &&
@@ -124,10 +130,11 @@ function shouldKeepZeroUnit(decl) {
 }
 /**
  * @param {Options} opts
+ * @param {string[]} browsers
  * @param {import('postcss').Declaration} decl
  * @return {void}
  */
-function transform(opts, decl) {
+function transform(opts, browsers, decl) {
   const lowerCasedProp = decl.prop.toLowerCase();
   if (
     lowerCasedProp.includes('flex') ||
@@ -142,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'
@@ -175,17 +182,23 @@ function transform(opts, decl) {
 
 const plugin = 'postcss-convert-values';
 /**
- * @typedef {{precision: boolean | number, angle?: boolean, time?: boolean, length?: boolean}} Options */
+ * @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/types/index.d.ts

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