From ce383a625e56770bc0402f9b738460d803391b5b Mon Sep 17 00:00:00 2001 From: Ivan Bunin Date: Wed, 23 Jan 2019 15:40:52 +0300 Subject: [PATCH 1/5] add tests --- spec/px-to-viewport.spec.js | 198 ++++++++++++++++++++++++++++++++++++ 1 file changed, 198 insertions(+) create mode 100644 spec/px-to-viewport.spec.js diff --git a/spec/px-to-viewport.spec.js b/spec/px-to-viewport.spec.js new file mode 100644 index 0000000..23632e2 --- /dev/null +++ b/spec/px-to-viewport.spec.js @@ -0,0 +1,198 @@ +// Jasmine unit tests +// To run tests, run these commands from the project root: +// 1. `npm install -g jasmine-node` +// 2. `jasmine-node spec` + +/* global describe, it, expect */ + +'use strict'; +var postcss = require('postcss'); +var pxToViewport = require('..'); +var basicCSS = '.rule { font-size: 15px }'; + +describe('px-to-viewport', function() { + it('should work on the readme example', function () { + var input = 'h1 { margin: 0 0 20px; font-size: 32px; line-height: 2; letter-spacing: 1px; }'; + var output = 'h1 { margin: 0 0 6.25vw; font-size: 10vw; line-height: 2; letter-spacing: 1px; }'; + var processed = postcss(pxToViewport()).process(input).css; + + expect(processed).toBe(output); + }); + + it('should replace the px unit with vw', function () { + var processed = postcss(pxToViewport()).process(basicCSS).css; + var expected = '.rule { font-size: 4.6875vw }'; + + expect(processed).toBe(expected); + }); + + it('should handle < 1 values and values without a leading 0', function () { + var rules = '.rule { margin: 0.5rem .5px -0.2px -.2em }'; + var expected = '.rule { margin: 0.5rem 0.15625vw -0.0625vw -.2em }'; + var options = { + minPixelValue: 0 + }; + var processed = postcss(pxToViewport(options)).process(rules).css; + + expect(processed).toBe(expected); + }); +}); + +describe('value parsing', function() { + it('should not replace values in double quotes or single quotes', function () { + var options = { + propList: ['*'] + }; + var rules = '.rule { content: \'16px\'; font-family: "16px"; font-size: 16px; }'; + var expected = '.rule { content: \'16px\'; font-family: "16px"; font-size: 5vw; }'; + var processed = postcss(pxToViewport(options)).process(rules).css; + + expect(processed).toBe(expected); + }); + + it('should not replace values in `url()`', function () { + var rules = '.rule { background: url(16px.jpg); font-size: 16px; }'; + var expected = '.rule { background: url(16px.jpg); font-size: 5vw; }'; + var processed = postcss(pxToViewport()).process(rules).css; + + expect(processed).toBe(expected); + }); +}); + +describe('unitToConvert', function() { + it('should ignore non px values by default', function () { + var expected = '.rule { font-size: 2em }'; + var processed = postcss(pxToViewport()).process(expected).css; + + expect(processed).toBe(expected); + }); + + it('should convert only values described in options', function () { + var rules = '.rule { font-size: 5em; line-height: 2px }'; + var expected = '.rule { font-size: 1.5625vw; line-height: 2px }'; + var options = { + unitToConvert: 'em' + }; + var processed = postcss(pxToViewport(options)).process(rules).css; + + expect(processed).toBe(expected); + }); +}); + +describe('viewportWidth', function() { + it('should should replace using 320px by default', function() { + var expected = '.rule { font-size: 4.6875vw }'; + var processed = postcss(pxToViewport()).process(basicCSS).css; + + expect(processed).toBe(expected); + }); + + it('should replace using viewportWidth from options', function() { + var expected = '.rule { font-size: 3.125vw }'; + var options = { + viewportWidth: 480 + } + var processed = postcss(pxToViewport(options)).process(basicCSS).css; + + expect(processed).toBe(expected); + }) +}); + +describe('unitPrecision', function () { + it('should replace using a decimal of 2 places', function () { + var expected = '.rule { font-size: 4.69vw }'; + var options = { + unitPrecision: 2 + }; + var processed = postcss(pxToViewport(options)).process(basicCSS).css; + + expect(processed).toBe(expected); + }); +}); + +describe('viewportUnit', function() { + it('should replace using unit from options', function() { + var rules = '.rule { margin-top: 15px }'; + var expected = '.rule { margin-top: 4.6875vh }'; + var options = { + viewportUnit: 'vh' + }; + var processed = postcss(pxToViewport(options)).process(rules).css; + + expect(processed).toBe(expected); + }); +}); + +describe('fontViewportUnit', function() { + it('should replace only font-size using unit from options', function() { + var rules = '.rule { margin-top: 15px; font-size: 8px; }'; + var expected = '.rule { margin-top: 4.6875vw; font-size: 2.5vmax; }'; + var options = { + fontViewportUnit: 'vmax' + }; + var processed = postcss(pxToViewport(options)).process(rules).css; + + expect(processed).toBe(expected); + }); +}); + +describe('selectorBlackList', function () { + it('should ignore selectors in the selector black list', function () { + var rules = '.rule { font-size: 15px } .rule2 { font-size: 15px }'; + var expected = '.rule { font-size: 4.6875vw } .rule2 { font-size: 15px }'; + var options = { + selectorBlackList: ['.rule2'] + }; + var processed = postcss(pxToViewport(options)).process(rules).css; + + expect(processed).toBe(expected); + }); + + it('should ignore every selector with `body$`', function () { + var rules = 'body { font-size: 16px; } .class-body$ { font-size: 16px; } .simple-class { font-size: 16px; }'; + var expected = 'body { font-size: 5vw; } .class-body$ { font-size: 16px; } .simple-class { font-size: 5vw; }'; + var options = { + selectorBlackList: ['body$'] + }; + var processed = postcss(pxToViewport(options)).process(rules).css; + + expect(processed).toBe(expected); + }); + + it('should only ignore exactly `body`', function () { + var rules = 'body { font-size: 16px; } .class-body { font-size: 16px; } .simple-class { font-size: 16px; }'; + var expected = 'body { font-size: 16px; } .class-body { font-size: 5vw; } .simple-class { font-size: 5vw; }'; + var options = { + selectorBlackList: [/^body$/] + }; + var processed = postcss(pxToViewport(options)).process(rules).css; + + expect(processed).toBe(expected); + }); +}); + +describe('mediaQuery', function () { + it('should replace px in media queries', function () { + var options = { + mediaQuery: true + }; + var processed = postcss(pxToViewport(options)).process('@media (min-width: 500px) { .rule { font-size: 16px } }').css; + var expected = '@media (min-width: 156.25vw) { .rule { font-size: 5vw } }'; + + expect(processed).toBe(expected); + }); +}); + +describe('minPixelValue', function () { + it('should not replace values below minPixelValue', function () { + var options = { + propWhiteList: [], + minPixelValue: 2 + }; + var rules = '.rule { border: 1px solid #000; font-size: 16px; margin: 1px 10px; }'; + var expected = '.rule { border: 1px solid #000; font-size: 5vw; margin: 1px 3.125vw; }'; + var processed = postcss(pxToViewport(options)).process(rules).css; + + expect(processed).toBe(expected); + }); +}); From 43c6ba7d163845ebd62ba286ac3025ac0e88ad74 Mon Sep 17 00:00:00 2001 From: Ivan Bunin Date: Wed, 23 Jan 2019 15:41:11 +0300 Subject: [PATCH 2/5] up dependencies --- package.json | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index c72b57b..f11cda8 100755 --- a/package.json +++ b/package.json @@ -11,6 +11,12 @@ "bugs": "https://github.com/evrone/postcss-px-to-viewport/issues", "homepage": "https://github.com/evrone/postcss-px-to-viewport", "main": "index.js", + "scripts": { + "test": "jasmine-node spec" + }, + "devDependencies": { + "jasmine-node": "~1.11.0" + }, "keywords": [ "css", "units", @@ -25,7 +31,7 @@ "postcss-plugin" ], "dependencies": { - "object-assign": "^4.0.1", - "postcss": "^5.0.2" + "object-assign": "^4.1.0", + "postcss": "^5.2.10" } } From 1822d16469ef2cc985157458dbf3b7e25274821d Mon Sep 17 00:00:00 2001 From: Ivan Bunin Date: Wed, 23 Jan 2019 16:35:44 +0300 Subject: [PATCH 3/5] change postcss version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f11cda8..d64162f 100755 --- a/package.json +++ b/package.json @@ -32,6 +32,6 @@ ], "dependencies": { "object-assign": "^4.1.0", - "postcss": "^5.2.10" + "postcss": ">=5.2.10" } } From 9b4139699c98464e33913b46c292476d938e2ecf Mon Sep 17 00:00:00 2001 From: Ivan Bunin Date: Wed, 23 Jan 2019 16:37:38 +0300 Subject: [PATCH 4/5] dep versions --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index d64162f..6fe2bc7 100755 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "postcss-plugin" ], "dependencies": { - "object-assign": "^4.1.0", - "postcss": ">=5.2.10" + "object-assign": "^4.0.1", + "postcss": ">=5.0.2" } } From ae4e24e8ce3ec704db46e5e52765d415326e12f4 Mon Sep 17 00:00:00 2001 From: Ivan Bunin Date: Wed, 23 Jan 2019 16:38:50 +0300 Subject: [PATCH 5/5] object assign version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6fe2bc7..88bf31f 100755 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "postcss-plugin" ], "dependencies": { - "object-assign": "^4.0.1", + "object-assign": ">=4.0.1", "postcss": ">=5.0.2" } }