Jesus sucks

backend/frontend/node_modules/postcss-media-minmax/index.js

@@ -0,0 +1,121 @@
+var postcss = require('postcss');
+
+module.exports = postcss.plugin('postcss-media-minmax', function () {
+  return function(css) {
+    var feature_unit = {
+      'width': 'px',
+      'height': 'px',
+      'device-width': 'px',
+      'device-height': 'px',
+      'aspect-ratio': '',
+      'device-aspect-ratio': '',
+      'color': '',
+      'color-index': '',
+      'monochrome': '',
+      'resolution': 'dpi'
+    };
+
+    //支持 min-/max- 前缀的属性
+    var feature_name = Object.keys(feature_unit);
+
+    var step = .001; // smallest even number that won’t break complex queries (1in = 96px)
+
+    var power = {
+      '>': 1,
+      '<': -1
+    };
+
+    var minmax = {
+      '>': 'min',
+      '<': 'max'
+    };
+
+    function create_query(name, gtlt, eq, value, params) {
+      return value.replace(/([-\d\.]+)(.*)/, function (match, number, unit) {
+        var initialNumber = parseFloat(number);
+
+        if (parseFloat(number) || eq) {
+          // if eq is true, then number remains same
+          if (!eq) {
+            // change integer pixels value only on integer pixel
+            if (unit === 'px' && initialNumber === parseInt(number, 10)) {
+              number = initialNumber + power[gtlt];
+            } else {
+              number = Number(Math.round(parseFloat(number) + step * power[gtlt] + 'e6')+'e-6');
+            }
+          }
+        } else {
+          number = power[gtlt] + feature_unit[name];
+        }
+
+        return '(' + minmax[gtlt] + '-' + name + ': ' + number + unit + ')';
+      });
+    }
+
+    // 读取 media-feature
+    css.walkAtRules(function(rule, i) {
+      if (rule.name !== "media" && rule.name !== "custom-media") {
+        return
+      }
+
+      /**
+       * 转换 <mf-name> <|>= <mf-value>
+       *    $1  $2   $3
+       * (width >= 300px) => (min-width: 300px)
+       * (width <= 900px) => (max-width: 900px)
+       */
+
+      //取值不支持负值
+      //But -0 is always equivalent to 0 in CSS, and so is also accepted as a valid <mq-boolean> value.
+
+      rule.params = rule.params.replace(/\(\s*([a-z-]+?)\s*([<>])(=?)\s*((?:-?\d*\.?(?:\s*\/?\s*)?\d+[a-z]*)?)\s*\)/gi, function($0, $1, $2, $3, $4) {
+
+        var params = '';
+
+        if (feature_name.indexOf($1) > -1) {
+          return create_query($1, $2, $3, $4, rule.params);
+        }
+        //如果不是指定的属性，不做替换
+        return $0;
+      })
+
+      /**
+       * 转换  <mf-value> <|<= <mf-name> <|<= <mf-value>
+       * 转换  <mf-value> >|>= <mf-name> >|>= <mf-value>
+       *   $1  $2$3 $4  $5$6  $7
+       * (500px <= width <= 1200px) => (min-width: 500px) and (max-width: 1200px)
+       * (500px < width <= 1200px) => (min-width: 501px) and (max-width: 1200px)
+       * (900px >= width >= 300px)  => (min-width: 300px) and (max-width: 900px)
+       */
+
+      rule.params = rule.params.replace(/\(\s*((?:-?\d*\.?(?:\s*\/?\s*)?\d+[a-z]*)?)\s*(<|>)(=?)\s*([a-z-]+)\s*(<|>)(=?)\s*((?:-?\d*\.?(?:\s*\/?\s*)?\d+[a-z]*)?)\s*\)/gi, function($0, $1, $2, $3, $4, $5, $6, $7) {
+
+        if (feature_name.indexOf($4) > -1) {
+          if ($2 === '<' && $5 === '<' || $2 === '>' && $5 === '>') {
+            var min = ($2 === '<') ? $1 : $7;
+            var max = ($2 === '<') ? $7 : $1;
+
+            // output differently depended on expression direction
+            // <mf-value> <|<= <mf-name> <|<= <mf-value>
+            // or
+            // <mf-value> >|>= <mf-name> >|>= <mf-value>
+            var equals_for_min = $3;
+            var equals_for_max = $6;
+
+            if ($2 === '>') {
+              equals_for_min = $6;
+              equals_for_max = $3;
+            }
+
+            return create_query($4, '>', equals_for_min, min) + ' and ' + create_query($4, '<', equals_for_max, max);
+          }
+        }
+        //如果不是指定的属性，不做替换
+        return $0;
+
+      });
+
+    });
+
+  }
+});