Project files
This commit is contained in:
41
receipeServer/frontend_old/node_modules/postcss-media-minmax/CHANGELOG.md
generated
vendored
Normal file
41
receipeServer/frontend_old/node_modules/postcss-media-minmax/CHANGELOG.md
generated
vendored
Normal file
@@ -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.
|
||||
22
receipeServer/frontend_old/node_modules/postcss-media-minmax/LICENSE
generated
vendored
Normal file
22
receipeServer/frontend_old/node_modules/postcss-media-minmax/LICENSE
generated
vendored
Normal file
@@ -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.
|
||||
|
||||
304
receipeServer/frontend_old/node_modules/postcss-media-minmax/README-zh.md
generated
vendored
Normal file
304
receipeServer/frontend_old/node_modules/postcss-media-minmax/README-zh.md
generated
vendored
Normal file
@@ -0,0 +1,304 @@
|
||||
# PostCSS Media Minmax
|
||||
|
||||
[](https://travis-ci.org/postcss/postcss-media-minmax)
|
||||
[](https://www.npmjs.com/package/postcss-media-minmax)
|
||||
[](https://www.npmjs.com/package/postcss-media-minmax)
|
||||
[](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)
|
||||
|
||||
-----
|
||||
|
||||
|
||||
|
||||
|
||||
## 安装
|
||||
|
||||
$ 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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
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)
|
||||
310
receipeServer/frontend_old/node_modules/postcss-media-minmax/README.md
generated
vendored
Normal file
310
receipeServer/frontend_old/node_modules/postcss-media-minmax/README.md
generated
vendored
Normal file
@@ -0,0 +1,310 @@
|
||||
# PostCSS Media Minmax
|
||||
|
||||
[](https://cssdb.org/#media-query-ranges)
|
||||
[](https://travis-ci.org/postcss/postcss-media-minmax)
|
||||
[](https://www.npmjs.com/package/postcss-media-minmax)
|
||||
[](https://www.npmjs.com/package/postcss-media-minmax)
|
||||
[](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)
|
||||
|
||||
-----
|
||||
|
||||
|
||||
|
||||
|
||||
## 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>
|
||||
```
|
||||
|
||||
|
||||
|
||||
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)
|
||||
122
receipeServer/frontend_old/node_modules/postcss-media-minmax/index.js
generated
vendored
Normal file
122
receipeServer/frontend_old/node_modules/postcss-media-minmax/index.js
generated
vendored
Normal file
@@ -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
|
||||
38
receipeServer/frontend_old/node_modules/postcss-media-minmax/package.json
generated
vendored
Normal file
38
receipeServer/frontend_old/node_modules/postcss-media-minmax/package.json
generated
vendored
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user