diff --git a/index.js b/index.js index caab19e..fca2567 100644 --- a/index.js +++ b/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) diff --git a/package.json b/package.json index c2be72b..a076c20 100644 --- a/package.json +++ b/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", diff --git a/test/flexible.spec.js b/test/flexible.spec.js index 0281882..5613598 100644 --- a/test/flexible.spec.js +++ b/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()) + }) + }) diff --git a/test/output-custom-2.css b/test/output-custom-2.css new file mode 100644 index 0000000..b2b9831 --- /dev/null +++ b/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; +}