Mail

frontend/node_modules/postcss-media-minmax/CHANGELOG.md

@@ -0,0 +1,41 @@
+# 5.0.0 2021-01-12
+
+- Updated: Support for PostCSS v8+
+- Updated: Support for Node v10+
+
+# 4.0.0 2017-09-17
+
+- Updated: Support for PostCSS v7+
+- Updated: Support for Node v6+
+
+# 3.0.0 2017-05-10
+
+Change: Use PostCSS 6 API.
+
+# 2.1.2 2016-04-01
+
+Fix: incorrect output when using both > and >= (or similar).(#12)
+
+# 2.1.1 2015-11-26
+
+Fix: Pixels rounding errors in fractional pixels media queries.
+
+# 2.1.0 2015-09-08
+
+Add: Support for `<` and `>` without `=`.
+
+# 2.0.0 2015-09-05
+
+Change: Use PostCSS 5.0 API.
+
+# 1.2.0 2015-07-06
+
+Change: Use PostCSS 4.1 plugin API.
+
+# 1.1.0 2014-12-15
+
+Add: `( 300px <= width <= 900px)` or `( 900px >= width >= 300px)` syntax.
+
+# 1.0.0
+
+The first release.

frontend/node_modules/postcss-media-minmax/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 PostCSS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

frontend/node_modules/postcss-media-minmax/README-zh.md

@@ -0,0 +1,304 @@
+# PostCSS Media Minmax
+
+[![Build Status](https://travis-ci.org/postcss/postcss-media-minmax.svg?branch=master)](https://travis-ci.org/postcss/postcss-media-minmax) 
+[![NPM Downloads](https://img.shields.io/npm/dm/postcss-media-minmax.svg?style=flat)](https://www.npmjs.com/package/postcss-media-minmax) 
+[![NPM Version](http://img.shields.io/npm/v/postcss-media-minmax.svg?style=flat)](https://www.npmjs.com/package/postcss-media-minmax) 
+[![License](https://img.shields.io/npm/l/postcss-media-minmax.svg?style=flat)](http://opensource.org/licenses/MIT) 
+
+> 写简单优雅的 Media Queries！
+
+Media Queries 中的 `min-width` 和 `max-width` 等属性非常容易混淆，每次看到他们，我都想哭。现在[新的规范](https://drafts.csswg.org/mediaqueries/#mq-range-context)中，可以使用更加直观的 `>=`或`<=` 替代 media queries 中的 min-/max- 前缀。
+
+**V2.1.0 开始支持 `>` 或 `<` 符号。**
+
+这是一个实现 [CSS Media Queries Level 4](http://dev.w3.org/csswg/mediaqueries/) Polyfill 的插件，让你现在就可以使用这些特性，妈妈再也不用担心我记不住了，鹅妹子嘤！
+
+ 
+[English](README.md)
+
+-----
+
+![Gif Demo](http://gtms02.alicdn.com/tps/i2/TB1UIjyGVXXXXcCaXXXx274FpXX-877-339.gif)
+
+
+## 安装
+
+    $ npm install postcss-media-minmax
+
+## 快速开始
+
+示例 1：
+
+```js
+var fs = require('fs')
+var postcss = require('postcss')
+var minmax = require('postcss-media-minmax')
+
+var css = fs.readFileSync('input.css', 'utf8')
+
+var output = postcss()
+  .use(minmax())
+  .process(css)
+  .css
+  
+console.log('\n====>Output CSS:\n', output)  
+```
+
+或者只需：
+
+```js
+var output = postcss(minmax())
+  .process(css)
+  .css
+```
+
+input.css：
+
+```css
+@media screen and (width >= 500px) and (width <= 1200px) {
+  .bar {
+    display: block;
+  }
+}
+```
+
+你将得到：
+
+```css
+@media screen and (min-width: 500px) and (max-width: 1200px) {
+  .bar {
+    display: block;
+  }
+}
+```
+
+## CSS 语法
+
+### [语法](http://dev.w3.org/csswg/mediaqueries/#mq-syntax)
+
+```
+<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value>
+           | <mf-value> [ '<' | '>' ]? '='? <mf-name>
+           | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value>
+           | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>
+```
+
+![syntax](http://gtms03.alicdn.com/tps/i3/TB1Rje0HXXXXXXeXpXXccZJ0FXX-640-290.png)
+
+PostCSS Media Minmax 目前并没有实现 `200px >= width` 或者 `200px <= width` 这样的语法，因为这样的语法可读性并不不是太好。
+
+## [取值(Values)](http://dev.w3.org/csswg/mediaqueries/#values)
+ 
+**The special values:**
+
+* [<ratio>](http://dev.w3.org/csswg/mediaqueries/#typedef-ratio)
+
+    <ratio> 是一个正（非零非负）的 <integer>（整型）取值，其后跟随0个或多个空白，接着跟随一个斜线（“/”），再跟随0个或多个空白，最后跟随一个正<integer>。
+
+    ```css
+    @media screen and (device-aspect-ratio: 16 /   9) {
+      /* rules */
+    }
+
+    /* equivalent to */
+    @media screen and (device-aspect-ratio: 16/9) {
+      /* rules */
+    }
+    ```
+
+* [<mq-boolean>](http://dev.w3.org/csswg/mediaqueries/#typedef-mq-boolean)
+
+    <mq-boolean> 值是一个 0 或 1 的 <integer>（整型）取值。其他任何整数无效。注意， 在 CSS 中 -0 总是等价于 0 的，所以也作为一种有效的 <mq-boolean> 取值。  
+
+    ```css
+    @media screen and (grid: -0) {
+      /* rules */
+    }
+
+    /* equivalent to */
+    @media screen and (grid: 0) {
+      /* rules */
+    }
+    ```
+
+## 如何使用
+
+### 简写
+
+示例 1中同一个 Media features name 同时存在 `>=` 和 `<=` 时，可以简写为：
+
+```css
+@media screen and (500px <= width <= 1200px) {
+  .bar {
+    display: block;
+  }
+}
+/* 或者 */
+@media screen and (1200px >= width >= 500px) {
+  .bar {
+    display: block;
+  }
+}
+```
+
+都会得到一样的输出结果：
+
+```css
+@media screen and (min-width: 500px) and (max-width: 1200px) {
+  .bar {
+    display: block;
+  }
+}
+```
+**注意**：当 Media features name 在中间的时候，一定要保证两个 `<=` 或 `>=` 的方向一致，否则不会转换。
+
+例如在下面的示例中，width 大于等于 500px 同时又大于等于 1200px，这在语法和逻辑上都是错误的。
+
+```css
+@media screen and (1200px <= width >= 500px) {
+  .bar {
+    display: block;
+  }
+}
+```
+
+### 支持的 Media features name
+
+规范中目前以下属性支持 min-/max 前缀，PostCSS Media Minmax 全部支持自动转换。
+
+* `width`
+* `height`
+* `device-width`
+* `device-height`
+* `aspect-ratio`
+* `device-aspect-ratio`
+* `color`
+* `color-index`
+* `monochrome`
+* `resolution`
+
+
+
+### 支持在 `@custom-media` 中使用 & Node Watch
+
+```js
+var fs = require('fs')
+var chokidar = require('chokidar')
+var postcss = require('postcss')
+var minmax = require('postcss-media-minmax')
+var customMedia = require('postcss-custom-media')
+
+var src = 'input.css'
+
+console.info('Watching…\nModify the input.css and save.')
+
+
+chokidar.watch(src, {
+  ignored: /[\/\\]\./,
+  persistent: true
+}).on('all',
+  function(event, path, stats) {
+    var css = fs.readFileSync(src, 'utf8')
+    var output = postcss()
+      .use(customMedia())
+      .use(minmax())
+      .process(css)
+      .css;
+    fs.writeFileSync('output.css', output)
+  })
+
+```
+
+
+input.css:
+
+```css
+@custom-media --foo (width >= 20em) and (width <= 50em);
+@custom-media --bar (height >= 300px) and (height <= 600px);
+
+@media (--foo) and (--bar) {
+  
+}
+```
+
+output.css:
+
+```css
+@media (min-width: 20em) and (max-width: 50em) and (min-height: 300px) and (max-height: 600px) {
+  
+}
+```
+
+### Grunt
+
+```js
+module.exports = function(grunt) {
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    postcss: {
+      options: {
+        processors: [
+          require('autoprefixer-core')({ browsers: ['> 0%'] }).postcss, //Other plugin
+          require('postcss-media-minmax')(),
+        ]
+      },
+      dist: {
+        src: ['src/*.css'],
+        dest: 'build/grunt.css'
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-postcss');
+
+  grunt.registerTask('default', ['postcss']);
+}
+```
+
+### Gulp
+
+```js
+var gulp = require('gulp');
+var rename = require('gulp-rename');
+var postcss = require('gulp-postcss');
+var selector = require('postcss-media-minmax')
+var autoprefixer = require('autoprefixer-core')
+
+gulp.task('default', function () {
+    var processors = [
+        autoprefixer({ browsers: ['> 0%'] }), //Other plugin
+        minmax()
+    ];
+    gulp.src('src/*.css')
+        .pipe(postcss(processors))
+        .pipe(rename('gulp.css'))
+        .pipe(gulp.dest('build'))
+});
+gulp.watch('src/*.css', ['default']);
+```
+
+
+## 贡献
+
+* 安装相关的依赖模块。
+* 尊重编码风格（安装 [EditorConfig](http://editorconfig.org/)）。
+* 在[test](test)目录添加测试用例。
+* 运行测试。
+
+```
+$ git clone https://github.com/postcss/postcss-media-minmaxs.git
+$ git checkout -b patch
+$ npm install
+$ npm test
+```
+
+## 致谢
+
+* 感谢 PostCSS 作者 [Andrey Sitnik](https://github.com/ai)，带给我们如此简单易用的 CSS 语法解析工具。
+* 感谢 [Tab Atkins Jr.](http://xanthir.com/contact/) 辛苦编写了 Media Queries Level 4 规范。
+* 感谢 [@紫云飞](http://weibo.com/p/1005051708684567) 对本插件的建议和帮助。
+
+## [Changelog](CHANGELOG.md)
+
+## [License](LICENSE)

frontend/node_modules/postcss-media-minmax/README.md

@@ -0,0 +1,310 @@
+# PostCSS Media Minmax
+
+[![CSS Standard Status](https://cssdb.org/badge/media-query-ranges.svg)](https://cssdb.org/#media-query-ranges)
+[![Build Status](https://travis-ci.org/postcss/postcss-media-minmax.svg?branch=master)](https://travis-ci.org/postcss/postcss-media-minmax) 
+[![NPM Downloads](https://img.shields.io/npm/dm/postcss-media-minmax.svg?style=flat)](https://www.npmjs.com/package/postcss-media-minmax) 
+[![NPM Version](https://img.shields.io/npm/v/postcss-media-minmax.svg?style=flat)](https://www.npmjs.com/package/postcss-media-minmax) 
+[![License](https://img.shields.io/npm/l/postcss-media-minmax.svg?style=flat)](https://opensource.org/licenses/MIT) 
+
+> Writing simple and graceful media queries!
+
+The `min-width`, `max-width` and many other properties of media queries are really confusing. I want to cry every time I see them. But right now according to the new specs, you can use more intuitive `<=` or `>=` to replace the  `min-`/`max-` prefixes in media queries.
+
+V2.1.0 began to support `>` or `<` symbol.
+
+This is a polyfill plugin which supports [CSS Media Queries Level 4](https://drafts.csswg.org/mediaqueries/#mq-range-context) and gives you access to the new features right away. Mom will never worry about my study any more. So amazing!
+
+
+[简体中文](README-zh.md)
+
+-----
+
+![Gif Demo](https://gtms02.alicdn.com/tps/i2/TB1UIjyGVXXXXcCaXXXx274FpXX-877-339.gif)
+
+
+## Installation
+
+    $ npm install postcss-media-minmax
+
+## Quick Start
+
+Example 1:
+
+```js
+var fs = require('fs')
+var postcss = require('postcss')
+var minmax = require('postcss-media-minmax')
+
+var css = fs.readFileSync('input.css', 'utf8')
+
+var output = postcss()
+  .use(minmax())
+  .process(css)
+  .css
+  
+console.log('\n====>Output CSS:\n', output)  
+```
+
+Or just:
+
+```js
+var output = postcss(minmax())
+  .process(css)
+  .css
+```
+
+input.css:
+
+```css
+@media screen and (width >= 500px) and (width <= 1200px) {
+  .bar {
+    display: block;
+  }
+}
+```
+
+You will get:
+
+```css
+@media screen and (min-width: 500px) and (max-width: 1200px) {
+  .bar {
+    display: block;
+  }
+}
+```
+
+## CSS syntax
+
+### [Syntax](https://drafts.csswg.org/mediaqueries/#mq-range-context)
+
+```
+<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value>
+           | <mf-value> [ '<' | '>' ]? '='? <mf-name>
+           | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value>
+           | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>
+```
+
+![syntax](https://gtms03.alicdn.com/tps/i3/TB1Rje0HXXXXXXeXpXXccZJ0FXX-640-290.png)
+
+PostCSS Media Minmax hasn't implemented syntax such as `200px > = width` or `200px < = width` currently because its readability is not good enough yet.
+
+## [Values](https://drafts.csswg.org/mediaqueries/#values)
+ 
+**The special values:**
+
+* [<ratio>](https://drafts.csswg.org/mediaqueries/#typedef-ratio)
+
+    The <ratio> value type is a positive (not zero or negative) <integer> followed by optional whitespace, followed by a solidus ('/'), followed by optional whitespace, followed by a positive <integer>. <ratio>s can be ordered or compared by transforming them into the number obtained by dividing their first <integer> by their second <integer>.
+
+    ```css
+    @media screen and (device-aspect-ratio: 16 /   9) {
+      /* rules */
+    }
+
+    /* equivalent to */
+    @media screen and (device-aspect-ratio: 16/9) {
+      /* rules */
+    }
+    ```
+
+* [<mq-boolean>](https://drafts.csswg.org/mediaqueries/#typedef-mq-boolean)
+
+    The <mq-boolean> value type is an <integer> with the value 0 or 1. Any other integer value is invalid. Note that -0 is always equivalent to 0 in CSS, and so is also accepted as a valid <mq-boolean> value. 
+
+    ```css
+    @media screen and (grid: -0) {
+      /* rules */
+    }
+
+    /* equivalent to */
+    @media screen and (grid: 0) {
+      /* rules */
+    }
+    ```
+
+## How to use
+
+### Shorthand
+
+In Example 1, if a feature has both `>=` and `<=` logic, it can be written as follows:
+
+```css
+@media screen and (500px <= width <= 1200px) {
+  .bar {
+    display: block;
+  }
+}
+/* Or */
+@media screen and (1200px >= width >= 500px) {
+  .bar {
+    display: block;
+  }
+}
+```
+
+Which will output:
+
+```css
+@media screen and (min-width: 500px) and (max-width: 1200px) {
+  .bar {
+    display: block;
+  }
+}
+```
+
+**Note**: When the media feature name is in the middle, we must ensure that two `<=` or `>=` are in the same direction, otherwise which will not be converted.
+
+E.g. in the example below, `width` is greater than or equal to 500px and is greater than or equal to 1200px, which is the wrong in both grammar and logic.
+
+
+```css
+@media screen and (1200px <= width >= 500px) {
+  .bar {
+    display: block;
+  }
+}
+```
+
+### Media feature names
+
+The following properties support the `min-`/`max-` prefixes in the specifications at present, and will be automatically converted by PostCSS Media Minmax.
+
+* `width`
+* `height`
+* `device-width`
+* `device-height`
+* `aspect-ratio`
+* `device-aspect-ratio`
+* `color`
+* `color-index`
+* `monochrome`
+* `resolution`
+
+
+
+### Using with `@custom-media` & Node Watch
+
+```js
+var fs = require('fs')
+var chokidar = require('chokidar')
+var postcss = require('postcss')
+var minmax = require('postcss-media-minmax')
+var customMedia = require('postcss-custom-media')
+
+var src = 'input.css'
+
+console.info('Watching…\nModify the input.css and save.')
+
+
+chokidar.watch(src, {
+  ignored: /[\/\\]\./,
+  persistent: true
+}).on('all',
+  function(event, path, stats) {
+    var css = fs.readFileSync(src, 'utf8')
+    var output = postcss()
+      .use(customMedia())
+      .use(minmax())
+      .process(css)
+      .css;
+    fs.writeFileSync('output.css', output)
+  })
+
+```
+
+
+input.css:
+
+```css
+@custom-media --foo (width >= 20em) and (width <= 50em);
+@custom-media --bar (height >= 300px) and (height <= 600px);
+
+@media (--foo) and (--bar) {
+  
+}
+```
+
+output.css:
+
+```css
+@media (min-width: 20em) and (max-width: 50em) and (min-height: 300px) and (max-height: 600px) {
+  
+}
+```
+
+### Grunt
+
+```js
+module.exports = function(grunt) {
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    postcss: {
+      options: {
+        processors: [
+          require('autoprefixer-core')({ browsers: ['> 0%'] }).postcss, //Other plugin
+          require('postcss-media-minmax')(),
+        ]
+      },
+      dist: {
+        src: ['src/*.css'],
+        dest: 'build/grunt.css'
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-postcss');
+
+  grunt.registerTask('default', ['postcss']);
+}
+```
+
+### Gulp
+
+```js
+var gulp = require('gulp');
+var rename = require('gulp-rename');
+var postcss = require('gulp-postcss');
+var selector = require('postcss-media-minmax')
+var autoprefixer = require('autoprefixer-core')
+
+gulp.task('default', function () {
+    var processors = [
+        autoprefixer({ browsers: ['> 0%'] }), //Other plugin
+        minmax()
+    ];
+    gulp.src('src/*.css')
+        .pipe(postcss(processors))
+        .pipe(rename('gulp.css'))
+        .pipe(gulp.dest('build'))
+});
+gulp.watch('src/*.css', ['default']);
+```
+
+
+## Contributing
+
+* Install all the dependent modules.
+* Respect the coding style (Use [EditorConfig](https://editorconfig.org/)).
+* Add test cases in the [test](test) directory.
+* Run the test cases.
+
+```
+$ git clone https://github.com/postcss/postcss-media-minmaxs.git
+$ git checkout -b patch
+$ npm install
+$ npm test
+```
+
+## Acknowledgements
+
+* Thank the author of PostCSS [Andrey Sitnik](https://github.com/ai) for giving us such simple and easy CSS syntax analysis tools.
+
+* Thank [Tab Atkins Jr.](https://www.xanthir.com/contact/) for writing the specs of Media Queries Level 4.
+
+* Thank [ziyunfei](https://weibo.com/p/1005051708684567) for suggestions and help of this plugin.
+
+
+## [Changelog](CHANGELOG.md)
+
+## [License](LICENSE)

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

@@ -0,0 +1,122 @@
+const feature_unit = {
+  'width': 'px',
+  'height': 'px',
+  'device-width': 'px',
+  'device-height': 'px',
+  'aspect-ratio': '',
+  'device-aspect-ratio': '',
+  'color': '',
+  'color-index': '',
+  'monochrome': '',
+  'resolution': 'dpi'
+};
+
+// Supported min-/max- attributes
+const feature_name = Object.keys(feature_unit);
+
+const step = .001; // smallest even number that won’t break complex queries (1in = 96px)
+
+const power = {
+  '>': 1,
+  '<': -1
+};
+
+const minmax = {
+  '>': 'min',
+  '<': 'max'
+};
+
+function create_query(name, gtlt, eq, value) {
+  return value.replace(/([-\d\.]+)(.*)/, function (_match, number, unit) {
+    const 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 + ')';
+  });
+}
+
+function transform(rule) {
+  /**
+   * 转换 <mf-name> <|>= <mf-value>
+   *    $1  $2   $3
+   * (width >= 300px) => (min-width: 300px)
+   * (width <= 900px) => (max-width: 900px)
+   */
+
+  if (!rule.params.includes('<') && !rule.params.includes('>')) {
+    return
+  }
+
+  // The value doesn't support negative values
+  // 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) {
+    if (feature_name.indexOf($1) > -1) {
+      return create_query($1, $2, $3, $4);
+    }
+    // If it is not the specified attribute, don't replace
+    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 === '>') {
+        const min = ($2 === '<') ? $1 : $7;
+        const max = ($2 === '<') ? $7 : $1;
+
+        // output differently depended on expression direction
+        // <mf-value> <|<= <mf-name> <|<= <mf-value>
+        // or
+        // <mf-value> >|>= <mf-name> >|>= <mf-value>
+        let equals_for_min = $3;
+        let 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);
+      }
+    }
+    // If it is not the specified attribute, don't replace
+    return $0;
+  });
+}
+
+module.exports = () => ({
+  postcssPlugin: 'postcss-media-minmax',
+  AtRule: {
+    media: (atRule) => {
+      transform(atRule);
+    },
+    'custom-media': (atRule) => {
+      transform(atRule);
+    },
+  },
+});
+
+module.exports.postcss = true

frontend/node_modules/postcss-media-minmax/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "postcss-media-minmax",
+  "version": "5.0.0",
+  "description": "Using more intuitive `>=`, `<=`, `>`, `<` instead of media queries min/max prefix.",
+  "scripts": {
+    "test": "tape test",
+    "release": "npmpub"
+  },
+  "repository": "https://github.com/postcss/postcss-media-minmax.git",
+  "keywords": [
+    "css",
+    "css3",
+    "postcss",
+    "postcss-plugin",
+    "media querie",
+    "media queries"
+  ],
+  "author": "yisi",
+  "license": "MIT",
+  "files": [
+    "CHANGELOG.md",
+    "README.md",
+    "README-zh.md",
+    "LICENSE",
+    "index.js"
+  ],
+  "engines": {
+    "node": ">=10.0.0"
+  },
+  "peerDependencies": {
+    "postcss": "^8.1.0"
+  },
+  "devDependencies": {
+    "npmpub": "^4.1.0",
+    "postcss": "^8.1.0",
+    "tape": "^4.9.1"
+  }
+}