postcss-aspect-ratio-mini - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

CHANGELOG.md

@@ -0,1 +1,6 @@
+# 1.1.0 - 2020-05-13
+* Support `/` separator(`aspect-ratio: 16 / 9`)
+* One or more whitespace characters are supported before or after the separator.
+* Use number-precision module to fix JS calculation precision problem.
+
 # 1.0.1 - 2018-12-03
@@ -2,0 +7,0 @@ * Fix: `npm test` error(In Node.js 10.0.0, the callback parameter is no longer optional. Not passing it will throw a TypeError at runtime. See [doc](https://nodejs.org/api/fs.html#fs_fs_writefile_file_data_options_callback))

index.js

 var postcss = require('postcss')
+var NP = require('number-precision')
 
@@ -27,9 +28,11 @@ // Default properties for aspect ratios.
 
+// 解析 aspect-ratio 的值，支持 : | / 三种分隔符，分隔符前后可以有一个或多个空格，例如：
+// 16:9, 16 | 9, 16 / 9
 function processRatioValue(css, rule, decl) {
   var ratio = null
-  var re = /[''""]?(((?:\d*\.?\d*)?)(?:\:|\|)(\d+))[''""]?/g
+  var re = /['"]?(((?:\d*\.?\d*)?)(?:\s*[\:\|\/]\s*)(\d*\.?\d*))['"]?/g
 
   ratio = decl.value
   ratio = ratio.replace(re, function(match, r, x, y) {
-    return y / x * 100 + '%'
+    return NP.times(NP.divide(y, x), 100) + '%' // Use number-precision module to fix JS calculation precision problem.
   })
@@ -86,3 +89,3 @@
         rule.each(function(decl) {
-          if (decl.prop == k) {
+          if (decl.prop === k) {
             decl.value = v
@@ -89,0 +92,0 @@ found = true

package.json

 {
   "name": "postcss-aspect-ratio-mini",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A PostCSS plugin to fix an element's dimensions to an aspect ratio.",
@@ -29,2 +29,3 @@ "main": "index.js",
   "dependencies": {
+    "number-precision": "^1.3.2",
     "postcss": "^7.0.6"
@@ -35,7 +36,6 @@ },
     "gulp-postcss": "^8.0.0",
-    "gulp-shell": "^0.5.2",
-    "gulp-tape": "0.0.7",
+    "gulp-tape": "1.0.0",
     "tap-diff": "^0.1.1",
-    "tape": "^4.4.0"
+    "tape": "^5.0.0"
   }
 }

README.md

@@ -7,2 +7,4 @@ [travis]:       https://travis-ci.org/yisibl/postcss-aspect-ratio-mini
 
+There is already a standard [aspect-ratio](https://drafts.csswg.org/css-sizing-4/#aspect-ratio) in the CSS specification, and Chrome has [experimental support](https://bugs.chromium.org/p/chromium/issues/detail?id=1045668#c16). **So it is recommended to use `/` to separate values, the next version may deprecate `:` separator.**
+
 ## Install
@@ -27,3 +29,3 @@
 
-A simple example using the custom ratio value `'16:9'`.
+A simple example using the custom ratio value `16 / 9`.
 
@@ -39,4 +41,8 @@
 .aspect-box {
-    aspect-ratio: '16:9';
+    aspect-ratio: 16 / 9;
 }
+
+.aspect-box2 {
+    aspect-ratio: 0.1 / 0.3;
+}
 ```
@@ -54,2 +60,6 @@
 }
+
+.aspect-box2:before {
+    padding-top: 300%;
+}
 ```
@@ -56,0 +66,0 @@

No alert changes

Improved metrics

Total package byte prevSize

6942

increased by15.64%

Dev dependency count

5

decreased by-16.67%

Lines of code

84

increased by3.7%

Number of lines in readme file

72

increased by16.13%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addednumber-precision@^1.3.2

• + Addednumber-precision@1.6.0(transitive)