Add test #2, Fix <ratio> unit(16/9)

Author: yisibl

README-zh.md

@@ -1,10 +1,10 @@
-# PostCSS Media Minmax
+# PostCSS Media Minmax [![Build Status](https://travis-ci.org/postcss/postcss-media-minmax.svg)](https://travis-ci.org/postcss/postcss-media-minmax)
 
 > 写简单优雅的 Media Queries！
 
 Media Queries 中的 `min-width` 和 `max-width` 等属性非常容易混淆，每次看到他们，我都想哭。现在[新的规范](http://dev.w3.org/csswg/mediaqueries/#mq-min-max)中，可以使用更加直观的 `>=`或`<=` 替代 media queries 中的 min-/max- 前缀。
 
-这是一个实现 CSS Media Queries Level 4 Polyfill 的插件，让你现在就可以使用这些特性，妈妈再也不用担心我记不住了，鹅妹子嘤！
+这是一个实现 [CSS Media Queries Level 4](http://dev.w3.org/csswg/mediaqueries/) Polyfill 的插件，让你现在就可以使用这些特性，妈妈再也不用担心我记不住了，鹅妹子嘤！
 
 
 [English](README.md)
@@ -67,19 +67,54 @@ input.css：
 
 ## 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>
 ```
 
+## [取值(Values)](http://dev.w3.org/csswg/mediaqueries/#values)
+ 
+**The special values:**
+
+* [<ratio>](http://dev.w3.org/csswg/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>](http://dev.w3.org/csswg/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 */
+    }
+    ```
 
 ## 如何使用
 
 ### 简写
 
-示例 1中同一个 feature name 同时存在 `>=` 和 `<=` 时，可以简写为：
+示例 1中同一个 Media features name 同时存在 `>=` 和 `<=` 时，可以简写为：
 
 ```css
 @media screen and (500px <= width <= 1200px) {
@@ -104,7 +139,7 @@ input.css：
   }
 }
 ```
-**注意**：当 feature name 在中间的时候，一定要保证两个 `<=` 或 `>=` 的方向一致，否则不会转换。
+**注意**：当 Media features name 在中间的时候，一定要保证两个 `<=` 或 `>=` 的方向一致，否则不会转换。
 
 例如在下面的示例中，width 大于等于 500px 同时又大于等于 1200px，这在语法和逻辑上都是错误的。
 
@@ -116,7 +151,7 @@ input.css：
 }
 ```
 
-### 支持的 feature name
+### 支持的 Media features name
 
 规范中目前以下属性支持 min-/max 前缀，PostCSS Media Minmax 全部支持自动转换。
 
@@ -139,7 +174,7 @@ input.css：
 var fs = require('fs')
 var chokidar = require('chokidar')
 var postcss = require('postcss')
-var minmax = require('minmax')
+var minmax = require('postcss-media-minmax')
 var customMedia = require('postcss-custom-media')
 
 var src = 'input.css'

README.md

@@ -1,4 +1,5 @@
-# PostCSS Media Minmax
+# PostCSS Media Minmax [![Build Status](https://travis-ci.org/postcss/postcss-media-minmax.svg)](https://travis-ci.org/postcss/postcss-media-minmax)
+
 
 > Writing simple and graceful Media Queries!
 

index.js

@@ -30,7 +30,10 @@ function mediaMinmax() {
        * (width <= 900px) => (max-width: 900px)
        */
 
-      rule.params = rule.params.replace(/\(\s*([a-z-]+?)\s*([<>]=)\s*((?:-?\d*\.?\d+[a-z]*)?)\s*\)/gi, function($0, $1, $2, $3) {
+      //取值不支持负值
+      //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) {
 
         var params = '';
 
@@ -54,7 +57,7 @@ function mediaMinmax() {
        * (900px >= width >= 300px)  => (min-width: 300px) and (max-width: 900px)
        */
 
-      rule.params = rule.params.replace(/\(\s*((?:-?\d*\.?\d+[a-z]*)?)\s*(<=|>=)\s*([a-z-]+)\s*(<=|>=)\s*((?:-?\d*\.?\d+[a-z]*)?)\s*\)/gi, function($0, $1, $2, $3, $4, $5) {
+      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) {
 
         if (feature_name.indexOf($3) > -1) {
           if ($2 === '<=' && $4 === '<=' || $2 === '>=' && $4 === '>=') {
@@ -67,6 +70,7 @@ function mediaMinmax() {
         return $0;
 
       });
+
     });
 
   }

test/fixtures/aspect-ratio.css

@@ -0,0 +1,14 @@
+@media screen and (aspect-ratio >= 1/1000) and (aspect-ratio <= 16/9) {
+
+}
+
+@media screen and (1 / 1000 <= aspect-ratio <= 16  /  9) {
+
+}
+
+@media screen and (0/0 <= aspect-ratio <= 16/9) {
+}
+
+@media screen and (aspect-ratio) and (1 / 1000 <= aspect-ratio <= 16  /  9) {
+
+}

test/fixtures/aspect-ratio.output.css

@@ -0,0 +1,14 @@
+@media screen and (min-aspect-ratio: 1/1000) and (max-aspect-ratio: 16/9) {
+
+}
+
+@media screen and (min-aspect-ratio: 1 / 1000) and (max-aspect-ratio: 16  /  9) {
+
+}
+
+@media screen and (min-aspect-ratio: 0/0) and (max-aspect-ratio: 16/9) {
+}
+
+@media screen and (aspect-ratio) and (min-aspect-ratio: 1 / 1000) and (max-aspect-ratio: 16  /  9) {
+
+}

test/fixtures/color-index.css

@@ -0,0 +1,11 @@
+@media screen and (color-index >= 0) and (color-index <= 8) {
+
+}
+
+@media screen and (0 <= color-index <= 8) {
+
+}
+
+@media screen and (color-index) and (6 <= color-index <= 256) {
+
+}

test/fixtures/color-index.output.css

@@ -0,0 +1,11 @@
+@media screen and (min-color-index: 0) and (max-color-index: 8) {
+
+}
+
+@media screen and (min-color-index: 0) and (max-color-index: 8) {
+
+}
+
+@media screen and (color-index) and (min-color-index: 6) and (max-color-index: 256) {
+
+}

test/fixtures/color.css

@@ -0,0 +1,11 @@
+@media screen and (color >= 0) and (color <= 8) {
+
+}
+
+@media screen and (0 <= color <= 8) {
+
+}
+
+@media screen and (color) and (6 <= color <= 256) {
+
+}

test/fixtures/color.output.css

@@ -0,0 +1,11 @@
+@media screen and (min-color: 0) and (max-color: 8) {
+
+}
+
+@media screen and (min-color: 0) and (max-color: 8) {
+
+}
+
+@media screen and (color) and (min-color: 6) and (max-color: 256) {
+
+}

test/fixtures/comment.css

@@ -0,0 +1,11 @@
+@media screen and /* comment */ (/* comment */width >= 500px) /* comment */ and (width/* comment */ <= 1200px) /* comment */{
+  .bar {
+    display: block;
+  }
+}
+
+@media screen and /* comment */(500px/* comment */ <= /* comment */width <= 1200px/* comment */) /* comment */{
+  .bar {
+    display: block;
+  }
+}