update tests

Author: crossjs

index.js

@@ -4,7 +4,6 @@ var postcss = require('postcss')
 
 var valueRegExp = /(dpr|rem|url)\((.+?)(px)?\)/
 var dprRegExp = /dpr\((\d+(?:\.\d+)?)px\)/
-var urlRegExp = /url\(['"]?\S+?@[1-3]x\S+?['"]?\)/
 
 module.exports = postcss.plugin('postcss-flexible', function (options) {
   if (!options) {
@@ -23,6 +22,7 @@ module.exports = postcss.plugin('postcss-flexible', function (options) {
       return prefix + ' ' + selector
     }
     var dprList = (options.dprList || [3, 2, 1]).sort().reverse()
+    var urlRegExp = new RegExp('url\\([\'"]?\\S+?@(' + dprList.join('|') + ')x\\S+?[\'"]?\\)')
 
     // get calculated value of px or rem
     function getCalcValue (value, dpr) {
@@ -35,7 +35,7 @@ module.exports = postcss.plugin('postcss-flexible', function (options) {
       return value.replace(valueGlobalRegExp, function ($0, $1, $2) {
         if ($1 === 'url') {
           if (dpr) {
-            return 'url(' + $2.replace(/@[1-3]x/g, '@' + dpr + 'x') + ')'
+            return 'url(' + $2.replace(new RegExp('@(' + dprList.join('|') + ')x', 'g'), '@' + dpr + 'x') + ')'
           }
         } else if ($1 === 'dpr') {
           if (dpr) {
@@ -55,7 +55,7 @@ module.exports = postcss.plugin('postcss-flexible', function (options) {
             decl.value = '0'
           } else {
             if (dprRegExp.test(decl.value) || urlRegExp.test(decl.value)) {
-              decl.value = getCalcValue(decl.value, 2)
+              decl.value = getCalcValue(decl.value, baseDpr)
             } else {
               // only has rem()
               decl.value = getCalcValue(decl.value)

package.json

@@ -4,7 +4,8 @@
   "description": "flexible transformer for flexible",
   "main": "index.js",
   "scripts": {
-    "test": "istanbul cover _mocha"
+    "test": "istanbul cover _mocha",
+    "test-win": "istanbul cover node_modules/mocha/bin/_mocha"
   },
   "repository": {
     "type": "git",

test/flexible.spec.js

@@ -46,4 +46,16 @@ describe('postcss-flexible', function() {
     assert.equal(outputText.trim(), expectedText.trim())
   })
 
+  it('should output right css text with dprList', function() {
+    var srcPath = path.join(__dirname, 'source.css')
+    var srcText = fs.readFileSync(srcPath, {
+      encoding: 'utf8'
+    })
+    var outputText = postcss().use(flexible({ dprList: [4, 2] })).process(srcText).css
+    var expectedText = fs.readFileSync(path.join(__dirname, 'output-custom-2.css'), {
+      encoding: 'utf8'
+    })
+    assert.equal(outputText.trim(), expectedText.trim())
+  })
+
 })

test/output-custom-2.css

@@ -0,0 +1,58 @@
+.selector,
+.selector2 {
+  width: 1rem;
+  line-height: 3;
+}
+
+[data-dpr="2"] .selector, [data-dpr="2"] .selector2 {
+  font-size: 32px;
+  background-image: url(/images/qr@2x.png);
+}
+
+[data-dpr="4"] .selector, [data-dpr="4"] .selector2 {
+  font-size: 64px;
+  background-image: url(/images/qr@4x.png);
+}
+
+[data-dpr="2"] .selector3 {
+  padding: 20px;
+}
+
+[data-dpr="4"] .selector3 {
+  padding: 40px;
+}
+
+[data-dpr="2"] .selector4 {
+  background: url(/images/qr@2x.png) 20px 0.266667rem;
+}
+
+[data-dpr="4"] .selector4 {
+  background: url(/images/qr@4x.png) 40px 0.266667rem;
+}
+
+@media screen and (min-width: 480px) {
+  [data-dpr="2"] body {
+    margin: 20px;
+  }
+  [data-dpr="4"] body {
+    margin: 40px;
+  }
+}
+
+@keyframes c-spinner-snake {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+html[data-dpr="2"][dir="rtl"] body {
+  padding: 8px;
+}
+
+html[data-dpr="4"][dir="rtl"] body {
+  padding: 16px;
+}