postcss-media-minmax - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

index.js

@@ -33,4 +33,7 @@ module.exports = mediaMinmax
 
-      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 = '';
@@ -58,3 +61,3 @@
 
-      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) {
 
@@ -72,2 +75,3 @@ if (feature_name.indexOf($3) > -1) {
       });
+
     });
@@ -74,0 +78,0 @@

package.json

 {
   "name": "postcss-media-minmax",
-  "version": "1.0.0",
-  "description": "Writing simple and graceful Media Queries!Using more intuitive `>=` or `<=` instead of media queries min/max prefix.",
-  "main": "index.js",
+  "version": "1.1.0",
+  "description": "Using more intuitive `>=` or `<=` instead of media queries min/max prefix.",
   "scripts": {
@@ -18,3 +17,4 @@ "test": "tape test"
     "postcss-plugins",
-    "Media Queries"
+    "media querie",
+    "media queries"
   ],
@@ -25,2 +25,3 @@ "author": "yisi",
     "CHANGELOG.md",
+    "README.md",
     "README-zh.md",
@@ -27,0 +28,0 @@ "LICENSE",

README-zh.md

@@ -1,2 +0,2 @@
-# 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)
 
@@ -7,3 +7,3 @@ > 写简单优雅的 Media Queries！
 
-这是一个实现 CSS Media Queries Level 4 Polyfill 的插件，让你现在就可以使用这些特性，妈妈再也不用担心我记不住了，鹅妹子嘤！
+这是一个实现 [CSS Media Queries Level 4](http://dev.w3.org/csswg/mediaqueries/) Polyfill 的插件，让你现在就可以使用这些特性，妈妈再也不用担心我记不住了，鹅妹子嘤！
 
@@ -71,2 +71,4 @@
 
+### [语法](http://dev.w3.org/csswg/mediaqueries/#mq-syntax)
+
 ```
@@ -79,3 +81,38 @@ <mf-range> = <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 */
+    }
+    ```
+
 ## 如何使用
@@ -85,3 +122,3 @@
 
-示例 1中同一个 feature name 同时存在 `>=` 和 `<=` 时，可以简写为：
+示例 1中同一个 Media features name 同时存在 `>=` 和 `<=` 时，可以简写为：
 
@@ -111,3 +148,3 @@ ```css
 ```
-**注意**：当 feature name 在中间的时候，一定要保证两个 `<=` 或 `>=` 的方向一致，否则不会转换。
+**注意**：当 Media features name 在中间的时候，一定要保证两个 `<=` 或 `>=` 的方向一致，否则不会转换。
 
@@ -124,3 +161,3 @@ 例如在下面的示例中，width 大于等于 500px 同时又大于等于 1200px，这在语法和逻辑上都是错误的。
 
-### 支持的 feature name
+### 支持的 Media features name
 
@@ -148,3 +185,3 @@ 规范中目前以下属性支持 min-/max 前缀，PostCSS Media Minmax 全部支持自动转换。
 var postcss = require('postcss')
-var minmax = require('minmax')
+var minmax = require('postcss-media-minmax')
 var customMedia = require('postcss-custom-media')
@@ -151,0 +188,0 @@

README.md

@@ -1,8 +0,9 @@
-# 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!
 
-The `min-width`,`max-width` and so on propertys of Media Queries is really easy to confuse, every time I see them, I want to cry. Right now in the new specs, you can use more intuitive  <= or >= to instead of the  min-/max- prefix of media queries.
+The `min-width`,`max-width` and many other propertys of Media Queries are really confused, every time I see them, I want to cry. Right now in the new specs, you can use more intuitive  <= or >= to instead of the  min-/max- prefix of media queries.
 
-This is a supporting CSS Media Queries Level 4 Polyfill plugin,which let you can ues these features right now. Mom won't never worry  about my study, so amazing!
+This is a supporting [CSS Media Queries Level 4](http://dev.w3.org/csswg/mediaqueries/) Polyfill plugin,which let you can ues these features right now. Mom won't never worry  about my study, so amazing!
 
@@ -70,2 +71,4 @@
 
+### [Syntax](http://dev.w3.org/csswg/mediaqueries/#mq-syntax)
+
 ```
@@ -78,3 +81,38 @@ <mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value>
 
+PostCSS Media Minmax doesn't implement such syntax as `200px > = width` or `200px < = width` currently, because the syntax readability is not good enough.
 
+## [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 */
+    }
+    ```
+
 ## How to use
@@ -84,3 +122,3 @@
 
-In Example 1, the same feature name is `>=` and `<=`,  which will be    abbreviated as the following:
+In Example 1, the same feature name is >= and <=, which will be abbreviated as the following:
 
@@ -111,3 +149,3 @@ ```css
 
-**Note**: when the feature name in the middle, we must ensure that two `<=` or `>=` in the same direction, otherwise which will not be converted.
+**Note**: When the Media features name in the middle, we must ensure that two `<=` or `>=` in the same direction, otherwise which will not be converted.
 
@@ -125,3 +163,3 @@ E.g. in the example below, width is greater than or equal to 500px and is greater than or equal to 1200px, this is the wrong in grammar and logic.
 
-### feature name
+### Media features name
 
@@ -149,3 +187,3 @@ The following property supports the min-/max prefix in specification at present, which will be automatically converted by PostCSS Media Minmax.
 var postcss = require('postcss')
-var minmax = require('minmax')
+var minmax = require('postcss-media-minmax')
 var customMedia = require('postcss-custom-media')
@@ -152,0 +190,0 @@

No alert changes

Improved metrics

Total package byte prevSize

18099

increased by21.91%

Lines of code

63

increased by3.28%

Number of lines in readme file

302

increased by14.39%

No dependency changes