New: Support / separator(aspect-ratio: 16 / 9)，fix #6

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 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
 * 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))
 

README.md

@@ -4,6 +4,8 @@
 
 A PostCSS plugin to fix an element's dimensions to an aspect ratio.
 
+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
 
 ```shell
@@ -23,7 +25,7 @@ var output = postcss()
 
 ## Example
 
-A simple example using the custom ratio value `'16:9'`.
+A simple example using the custom ratio value `16 / 9`.
 
 
 ### Input
@@ -34,7 +36,11 @@ A simple example using the custom ratio value `'16:9'`.
 }
 
 .aspect-box {
-    aspect-ratio: '16:9';
+    aspect-ratio: 16 / 9;
+}
+
+.aspect-box2 {
+    aspect-ratio: 0.1 / 0.3;
 }
 ```
 
@@ -48,6 +54,10 @@ A simple example using the custom ratio value `'16:9'`.
 .aspect-box:before {
     padding-top: 56.25%;
 }
+
+.aspect-box2:before {
+    padding-top: 300%;
+}
 ```
 
 ## Test

gulpfile.js

@@ -1,6 +1,5 @@
 var gulp = require('gulp')
 var postcss = require('gulp-postcss')
-var ifm = require('./index.js')
 var tape = require('gulp-tape')
 var tapDiff = require('tap-diff')
 

index.js

@@ -1,4 +1,5 @@
 var postcss = require('postcss')
+var NP = require('number-precision')
 
 // Default properties for aspect ratios.
 var defaults = {}
@@ -24,13 +25,15 @@ module.exports = postcss.plugin('postcss-layout', function(opts) {
   }
 })
 
+// 解析 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.
   })
 
   return ratio
@@ -82,7 +85,7 @@ function objToRule(obj, clonedRule) {
       // If clonedRule was passed in, check for an existing property.
       if (clonedRule) {
         rule.each(function(decl) {
-          if (decl.prop == k) {
+          if (decl.prop === k) {
             decl.value = v
             found = true
             return false

package.json

@@ -1,6 +1,6 @@
 {
   "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.",
   "main": "index.js",
   "scripts": {
@@ -26,14 +26,14 @@
   },
   "homepage": "https://github.com/yisibl/postcss-aspect-ratio-mini",
   "dependencies": {
+    "number-precision": "^1.3.2",
     "postcss": "^7.0.6"
   },
   "devDependencies": {
     "gulp": "^3.9.0",
     "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"
   }
 }

test/fixtures/damo.actual.css

@@ -1,3 +1,11 @@
+.aspect-box {
+    position: relative;
+}
+
 [aspectratio][aspect-ratio="16:9"]:before {
-    padding-top: 56.25%
+    padding-top: 56.25%;
+}
+
+[aspectratio][aspect-ratio="16/9"]:before {
+    padding-top: 56.25%;
 }

test/fixtures/damo.css

@@ -1,3 +1,11 @@
+.aspect-box {
+    position: relative;
+}
+
 [aspectratio][aspect-ratio="16:9"] {
     aspect-ratio: '16:9';
 }
+
+[aspectratio][aspect-ratio="16/9"] {
+    aspect-ratio: 16 / 9;
+}

test/fixtures/damo.expected.css

@@ -1,3 +1,11 @@
+.aspect-box {
+    position: relative;
+}
+
 [aspectratio][aspect-ratio="16:9"]:before {
-    padding-top: 56.25%
+    padding-top: 56.25%;
+}
+
+[aspectratio][aspect-ratio="16/9"]:before {
+    padding-top: 56.25%;
 }

test/fixtures/default.actual.css

@@ -5,3 +5,11 @@
 .aspect-box:before {
     padding-top: 56.25%;
 }
+
+.aspect-box:before {
+    padding-top: 56.25%;
+}
+
+.aspect-box:before {
+    padding-top: 56.25%;
+}

test/fixtures/default.css

@@ -3,5 +3,13 @@
 }
 
 .aspect-box {
-    aspect-ratio: '16:9';
+    aspect-ratio: 16   /     9;
+}
+
+.aspect-box {
+    aspect-ratio: '16   :   9';
+}
+
+.aspect-box {
+    aspect-ratio: '16 |  9';
 }

test/fixtures/default.expected.css

@@ -5,3 +5,11 @@
 .aspect-box:before {
     padding-top: 56.25%;
 }
+
+.aspect-box:before {
+    padding-top: 56.25%;
+}
+
+.aspect-box:before {
+    padding-top: 56.25%;
+}

test/fixtures/precision.actual.css

@@ -0,0 +1,11 @@
+.aspect-box {
+    position: relative;
+}
+
+.aspect-box:before {
+    padding-top: 300%;
+}
+
+.aspect-box:before {
+    padding-top: 110%;
+}

test/fixtures/precision.css

@@ -0,0 +1,11 @@
+.aspect-box {
+    position: relative;
+}
+
+.aspect-box {
+    aspect-ratio: "0.1 / 0.3";
+}
+
+.aspect-box {
+    aspect-ratio: 1.1/1.21;
+}

test/fixtures/precision.expected.css

@@ -0,0 +1,11 @@
+.aspect-box {
+    position: relative;
+}
+
+.aspect-box:before {
+    padding-top: 300%;
+}
+
+.aspect-box:before {
+    padding-top: 110%;
+}

test/test.js

@@ -37,3 +37,8 @@ test('double-quote', function(t) {
   compareFixtures(t, 'double-quote', 'should equal')
   t.end()
 })
+
+test('number precision', function(t) {
+  compareFixtures(t, 'precision', 'should equal')
+  t.end()
+})