diff --git a/README.md b/README.md index 234df59..3dd0ff3 100644 --- a/README.md +++ b/README.md @@ -74,11 +74,11 @@ If your project involves a fixed width, this script will help to convert pixels ### Installation Add via npm ``` -$ npm install postcss-px-to-viewport --save-dev +$ npm install postcss-px-to-viewport postcss --save-dev ``` or yarn ``` -$ yarn add -D postcss-px-to-viewport +$ yarn add -D postcss-px-to-viewport postcss ``` ### Usage diff --git a/README_CN.md b/README_CN.md index 158f2e4..0003fa5 100644 --- a/README_CN.md +++ b/README_CN.md @@ -74,11 +74,11 @@ ### 安装 使用npm安装 ``` -$ npm install postcss-px-to-viewport --save-dev +$ npm install postcss-px-to-viewport postcss --save-dev ``` 或者使用yarn进行安装 ``` -$ yarn add -D postcss-px-to-viewport +$ yarn add -D postcss-px-to-viewport postcss ``` ### 配置参数 diff --git a/index.js b/index.js index 6419322..6b9967e 100755 --- a/index.js +++ b/index.js @@ -1,9 +1,9 @@ -'use strict'; +'use strict' -var postcss = require('postcss'); -var objectAssign = require('object-assign'); -var { createPropListMatcher } = require('./src/prop-list-matcher'); -var { getUnitRegexp } = require('./src/pixel-unit-regexp'); +var { atRule } = require('postcss') +var objectAssign = require('object-assign') +var { createPropListMatcher } = require('./src/prop-list-matcher') +var { getUnitRegexp } = require('./src/pixel-unit-regexp') var defaults = { unitToConvert: 'px', @@ -11,7 +11,7 @@ var defaults = { viewportHeight: 568, // not now used; TODO: need for different units and math for different properties unitPrecision: 5, viewportUnit: 'vw', - fontViewportUnit: 'vw', // vmin is more suitable. + fontViewportUnit: 'vw', // vmin is more suitable. selectorBlackList: [], propList: ['*'], minPixelValue: 1, @@ -19,186 +19,228 @@ var defaults = { replace: true, landscape: false, landscapeUnit: 'vw', - landscapeWidth: 568 -}; - -var ignoreNextComment = 'px-to-viewport-ignore-next'; -var ignorePrevComment = 'px-to-viewport-ignore'; - -module.exports = postcss.plugin('postcss-px-to-viewport', function (options) { - var opts = objectAssign({}, defaults, options); - - checkRegExpOrArray(opts, 'exclude'); - checkRegExpOrArray(opts, 'include'); - - var pxRegex = getUnitRegexp(opts.unitToConvert); - var satisfyPropList = createPropListMatcher(opts.propList); - var landscapeRules = []; - - return function (css, result) { - css.walkRules(function (rule) { - // Add exclude option to ignore some files like 'node_modules' - var file = rule.source && rule.source.input.file; - - if (opts.include && file) { - if (Object.prototype.toString.call(opts.include) === '[object RegExp]') { - if (!opts.include.test(file)) return; - } else if (Object.prototype.toString.call(opts.include) === '[object Array]') { - var flag = false; - for (var i = 0; i < opts.include.length; i++) { - if (opts.include[i].test(file)) { - flag = true; - break; + landscapeWidth: 568, +} + +var ignoreNextComment = 'px-to-viewport-ignore-next' +var ignorePrevComment = 'px-to-viewport-ignore' + +module.exports = (options = {}) => { + var opts = objectAssign({}, defaults, options) + + checkRegExpOrArray(opts, 'exclude') + checkRegExpOrArray(opts, 'include') + + var pxRegex = getUnitRegexp(opts.unitToConvert) + var satisfyPropList = createPropListMatcher(opts.propList) + var landscapeRules = [] + return { + postcssPlugin: 'postcss-px-to-viewport', + Once(root, { result }) { + root.walkRules(function (rule) { + // Add exclude option to ignore some files like 'node_modules' + var file = rule.source && rule.source.input.file + + if (opts.include && file) { + if ( + Object.prototype.toString.call(opts.include) === '[object RegExp]' + ) { + if (!opts.include.test(file)) return + } else if ( + Object.prototype.toString.call(opts.include) === '[object Array]' + ) { + var flag = false + for (var i = 0; i < opts.include.length; i++) { + if (opts.include[i].test(file)) { + flag = true + break + } } + if (!flag) return } - if (!flag) return; } - } - if (opts.exclude && file) { - if (Object.prototype.toString.call(opts.exclude) === '[object RegExp]') { - if (opts.exclude.test(file)) return; - } else if (Object.prototype.toString.call(opts.exclude) === '[object Array]') { - for (var i = 0; i < opts.exclude.length; i++) { - if (opts.exclude[i].test(file)) return; + if (opts.exclude && file) { + if ( + Object.prototype.toString.call(opts.exclude) === '[object RegExp]' + ) { + if (opts.exclude.test(file)) return + } else if ( + Object.prototype.toString.call(opts.exclude) === '[object Array]' + ) { + for (var i = 0; i < opts.exclude.length; i++) { + if (opts.exclude[i].test(file)) return + } } } - } - - if (blacklistedSelector(opts.selectorBlackList, rule.selector)) return; - - if (opts.landscape && !rule.parent.params) { - var landscapeRule = rule.clone().removeAll(); - - rule.walkDecls(function(decl) { - if (decl.value.indexOf(opts.unitToConvert) === -1) return; - if (!satisfyPropList(decl.prop)) return; - landscapeRule.append(decl.clone({ - value: decl.value.replace(pxRegex, createPxReplace(opts, opts.landscapeUnit, opts.landscapeWidth)) - })); - }); - - if (landscapeRule.nodes.length > 0) { - landscapeRules.push(landscapeRule); + if (blacklistedSelector(opts.selectorBlackList, rule.selector)) return + + if (opts.landscape && !rule.parent.params) { + var landscapeRule = rule.clone().removeAll() + + rule.walkDecls(function (decl) { + if (decl.value.indexOf(opts.unitToConvert) === -1) return + if (!satisfyPropList(decl.prop)) return + + landscapeRule.append( + decl.clone({ + value: decl.value.replace( + pxRegex, + createPxReplace( + opts, + opts.landscapeUnit, + opts.landscapeWidth, + ), + ), + }), + ) + }) + + if (landscapeRule.nodes.length > 0) { + landscapeRules.push(landscapeRule) + } } - } - if (!validateParams(rule.parent.params, opts.mediaQuery)) return; + if (!validateParams(rule.parent.params, opts.mediaQuery)) return - rule.walkDecls(function(decl, i) { - if (decl.value.indexOf(opts.unitToConvert) === -1) return; - if (!satisfyPropList(decl.prop)) return; + rule.walkDecls(function (decl, i) { + if (decl.value.indexOf(opts.unitToConvert) === -1) return + if (!satisfyPropList(decl.prop)) return - var prev = decl.prev(); - // prev declaration is ignore conversion comment at same line - if (prev && prev.type === 'comment' && prev.text === ignoreNextComment) { - // remove comment - prev.remove(); - return; - } - var next = decl.next(); - // next declaration is ignore conversion comment at same line - if (next && next.type === 'comment' && next.text === ignorePrevComment) { - if (/\n/.test(next.raws.before)) { - result.warn('Unexpected comment /* ' + ignorePrevComment + ' */ must be after declaration at same line.', { node: next }); - } else { + var prev = decl.prev() + // prev declaration is ignore conversion comment at same line + if ( + prev && + prev.type === 'comment' && + prev.text === ignoreNextComment + ) { // remove comment - next.remove(); - return; + prev.remove() + return + } + var next = decl.next() + // next declaration is ignore conversion comment at same line + if ( + next && + next.type === 'comment' && + next.text === ignorePrevComment + ) { + if (/\n/.test(next.raws.before)) { + result.warn( + 'Unexpected comment /* ' + + ignorePrevComment + + ' */ must be after declaration at same line.', + { node: next }, + ) + } else { + // remove comment + next.remove() + return + } } - } - - var unit; - var size; - var params = rule.parent.params; - - if (opts.landscape && params && params.indexOf('landscape') !== -1) { - unit = opts.landscapeUnit; - size = opts.landscapeWidth; - } else { - unit = getUnit(decl.prop, opts); - size = opts.viewportWidth; - } - var value = decl.value.replace(pxRegex, createPxReplace(opts, unit, size)); + var unit + var size + var params = rule.parent.params - if (declarationExists(decl.parent, decl.prop, value)) return; + if (opts.landscape && params && params.indexOf('landscape') !== -1) { + unit = opts.landscapeUnit + size = opts.landscapeWidth + } else { + unit = getUnit(decl.prop, opts) + size = opts.viewportWidth + } - if (opts.replace) { - decl.value = value; - } else { - decl.parent.insertAfter(i, decl.clone({ value: value })); - } - }); - }); + var value = decl.value.replace( + pxRegex, + createPxReplace(opts, unit, size), + ) - if (landscapeRules.length > 0) { - var landscapeRoot = new postcss.atRule({ params: '(orientation: landscape)', name: 'media' }); + if (declarationExists(decl.parent, decl.prop, value)) return - landscapeRules.forEach(function(rule) { - landscapeRoot.append(rule); - }); - css.append(landscapeRoot); - } - }; -}); + if (opts.replace) { + decl.value = value + } else { + decl.parent.insertAfter(i, decl.clone({ value: value })) + } + }) + }) + + if (landscapeRules.length > 0) { + var landscapeRoot = atRule({ + params: '(orientation: landscape)', + name: 'media', + }) + + landscapeRules.forEach(function (rule) { + landscapeRoot.append(rule) + }) + root.append(landscapeRoot) + } + }, + } +} function getUnit(prop, opts) { - return prop.indexOf('font') === -1 ? opts.viewportUnit : opts.fontViewportUnit; + return prop.indexOf('font') === -1 ? opts.viewportUnit : opts.fontViewportUnit } function createPxReplace(opts, viewportUnit, viewportSize) { return function (m, $1) { - if (!$1) return m; - var pixels = parseFloat($1); - if (pixels <= opts.minPixelValue) return m; - var parsedVal = toFixed((pixels / viewportSize * 100), opts.unitPrecision); - return parsedVal === 0 ? '0' : parsedVal + viewportUnit; - }; + if (!$1) return m + var pixels = parseFloat($1) + if (pixels <= opts.minPixelValue) return m + var parsedVal = toFixed((pixels / viewportSize) * 100, opts.unitPrecision) + return parsedVal === 0 ? '0' : parsedVal + viewportUnit + } } function error(decl, message) { - throw decl.error(message, { plugin: 'postcss-px-to-viewport' }); + throw decl.error(message, { plugin: 'postcss-px-to-viewport' }) } function checkRegExpOrArray(options, optionName) { - var option = options[optionName]; - if (!option) return; - if (Object.prototype.toString.call(option) === '[object RegExp]') return; + var option = options[optionName] + if (!option) return + if (Object.prototype.toString.call(option) === '[object RegExp]') return if (Object.prototype.toString.call(option) === '[object Array]') { - var bad = false; + var bad = false for (var i = 0; i < option.length; i++) { if (Object.prototype.toString.call(option[i]) !== '[object RegExp]') { - bad = true; - break; + bad = true + break } } - if (!bad) return; + if (!bad) return } - throw new Error('options.' + optionName + ' should be RegExp or Array of RegExp.'); + throw new Error( + 'options.' + optionName + ' should be RegExp or Array of RegExp.', + ) } function toFixed(number, precision) { var multiplier = Math.pow(10, precision + 1), - wholeNumber = Math.floor(number * multiplier); - return Math.round(wholeNumber / 10) * 10 / multiplier; + wholeNumber = Math.floor(number * multiplier) + return (Math.round(wholeNumber / 10) * 10) / multiplier } function blacklistedSelector(blacklist, selector) { - if (typeof selector !== 'string') return; + if (typeof selector !== 'string') return return blacklist.some(function (regex) { - if (typeof regex === 'string') return selector.indexOf(regex) !== -1; - return selector.match(regex); - }); + if (typeof regex === 'string') return selector.indexOf(regex) !== -1 + return selector.match(regex) + }) } function declarationExists(decls, prop, value) { return decls.some(function (decl) { - return (decl.prop === prop && decl.value === value); - }); + return decl.prop === prop && decl.value === value + }) } function validateParams(params, mediaQuery) { - return !params || (params && mediaQuery); + return !params || (params && mediaQuery) } + +module.exports.postcss = true diff --git a/package.json b/package.json index deec944..f2dfaca 100755 --- a/package.json +++ b/package.json @@ -1,12 +1,12 @@ { - "name": "postcss-px-to-viewport", + "name": "@cy920820/postcss-px-to-viewport", "description": "A CSS post-processor that converts px to viewport units (vw, vh, vmin, vmax).", "version": "1.1.1", "author": "Dmitry Karpunin ", "license": "MIT", "repository": { "type": "git", - "url": "git@github.com:evrone/postcss-px-to-viewport.git" + "url": "https://github.com/cy920820/postcss-px-to-viewport.git" }, "bugs": "https://github.com/evrone/postcss-px-to-viewport/issues", "homepage": "https://github.com/evrone/postcss-px-to-viewport", @@ -31,10 +31,11 @@ "object-assign": ">=4.0.1" }, "devDependencies": { + "clean-publish": "^4.0.0", "jest": "^25.4.0", - "postcss": ">=5.0.2" + "postcss": "^8.4.12" }, "peerDependencies": { - "postcss": ">=5.0.2" + "postcss": "^8.4.12" } } diff --git a/spec/px-to-viewport.spec.js b/spec/px-to-viewport.spec.js index 0e47c10..eef9d8d 100644 --- a/spec/px-to-viewport.spec.js +++ b/spec/px-to-viewport.spec.js @@ -4,635 +4,744 @@ /* global describe, it, expect */ -var postcss = require('postcss'); -var pxToViewport = require('..'); -var basicCSS = '.rule { font-size: 15px }'; -var { filterPropList } = require('../src/prop-list-matcher'); +var postcss = require('postcss') +var pxToViewport = require('..') +var basicCSS = '.rule { font-size: 15px }' +var { filterPropList } = require('../src/prop-list-matcher') -describe('px-to-viewport', function() { +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; + 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); - }); + 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 }'; + var processed = postcss(pxToViewport()).process(basicCSS).css + var expected = '.rule { font-size: 4.6875vw }' - expect(processed).toBe(expected); - }); + 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 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; + minPixelValue: 0, + } + var processed = postcss(pxToViewport(options)).process(rules).css - expect(processed).toBe(expected); - }); + expect(processed).toBe(expected) + }) it('should remain unitless if 0', function () { - var expected = '.rule { font-size: 0px; font-size: 0; }'; - var processed = postcss(pxToViewport()).process(expected).css; + var expected = '.rule { font-size: 0px; font-size: 0; }' + var processed = postcss(pxToViewport()).process(expected).css - expect(processed).toBe(expected); - }); + expect(processed).toBe(expected) + }) it('should not add properties that already exist', function () { - var expected = '.rule { font-size: 16px; font-size: 5vw; }'; - var processed = postcss(pxToViewport()).process(expected).css; + var expected = '.rule { font-size: 16px; font-size: 5vw; }' + var processed = postcss(pxToViewport()).process(expected).css - expect(processed).toBe(expected); - }); + expect(processed).toBe(expected) + }) - it('should not replace units inside mediaQueries by default', function() { - var expected = '@media (min-width: 500px) { .rule { font-size: 16px } }'; - var processed = postcss(pxToViewport()).process('@media (min-width: 500px) { .rule { font-size: 16px } }').css; + it('should not replace units inside mediaQueries by default', function () { + var expected = '@media (min-width: 500px) { .rule { font-size: 16px } }' + var processed = postcss(pxToViewport()).process( + '@media (min-width: 500px) { .rule { font-size: 16px } }', + ).css - expect(processed).toBe(expected); + expect(processed).toBe(expected) }) -}); +}) -describe('value parsing', function() { +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; + 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); - }); + 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; + 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); - }); + expect(processed).toBe(expected) + }) it('should not replace values with an uppercase P or X', function () { - var rules = '.rule { margin: 12px calc(100% - 14PX); height: calc(100% - 20px); font-size: 12Px; line-height: 16px; }'; - var expected = '.rule { margin: 3.75vw calc(100% - 14PX); height: calc(100% - 6.25vw); font-size: 12Px; line-height: 5vw; }'; - var processed = postcss(pxToViewport()).process(rules).css; + var rules = + '.rule { margin: 12px calc(100% - 14PX); height: calc(100% - 20px); font-size: 12Px; line-height: 16px; }' + var expected = + '.rule { margin: 3.75vw calc(100% - 14PX); height: calc(100% - 6.25vw); font-size: 12Px; line-height: 5vw; }' + var processed = postcss(pxToViewport()).process(rules).css - expect(processed).toBe(expected); - }); -}); + expect(processed).toBe(expected) + }) +}) -describe('unitToConvert', function() { +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; + var expected = '.rule { font-size: 2em }' + var processed = postcss(pxToViewport()).process(expected).css - expect(processed).toBe(expected); - }); + 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 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; + unitToConvert: 'em', + } + var processed = postcss(pxToViewport(options)).process(rules).css - expect(processed).toBe(expected); - }); -}); + 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; +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); - }); + expect(processed).toBe(expected) + }) - it('should replace using viewportWidth from options', function() { - var expected = '.rule { font-size: 3.125vw }'; + 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; + viewportWidth: 480, + } + var processed = postcss(pxToViewport(options)).process(basicCSS).css - expect(processed).toBe(expected); + 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 expected = '.rule { font-size: 4.69vw }' var options = { - unitPrecision: 2 - }; - var processed = postcss(pxToViewport(options)).process(basicCSS).css; + unitPrecision: 2, + } + var processed = postcss(pxToViewport(options)).process(basicCSS).css - expect(processed).toBe(expected); - }); -}); + 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 }'; +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; + viewportUnit: 'vh', + } + var processed = postcss(pxToViewport(options)).process(rules).css - expect(processed).toBe(expected); - }); -}); + 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; }'; +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; + fontViewportUnit: 'vmax', + } + var processed = postcss(pxToViewport(options)).process(rules).css - expect(processed).toBe(expected); - }); -}); + 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 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; + selectorBlackList: ['.rule2'], + } + var processed = postcss(pxToViewport(options)).process(rules).css - expect(processed).toBe(expected); - }); + 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 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; + selectorBlackList: ['body$'], + } + var processed = postcss(pxToViewport(options)).process(rules).css - expect(processed).toBe(expected); - }); + 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 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; + selectorBlackList: [/^body$/], + } + var processed = postcss(pxToViewport(options)).process(rules).css - expect(processed).toBe(expected); - }); -}); + expect(processed).toBe(expected) + }) +}) describe('mediaQuery', function () { - it('should replace px inside media queries if opts.mediaQuery', function() { + it('should replace px inside media queries if opts.mediaQuery', 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: 500px) { .rule { font-size: 5vw } }'; + mediaQuery: true, + } + var processed = postcss(pxToViewport(options)).process( + '@media (min-width: 500px) { .rule { font-size: 16px } }', + ).css + var expected = '@media (min-width: 500px) { .rule { font-size: 5vw } }' - expect(processed).toBe(expected); - }); + expect(processed).toBe(expected) + }) - it('should not replace px inside media queries if not opts.mediaQuery', function() { + it('should not replace px inside media queries if not opts.mediaQuery', function () { var options = { - mediaQuery: false - }; - var processed = postcss(pxToViewport(options)).process('@media (min-width: 500px) { .rule { font-size: 16px } }').css; - var expected = '@media (min-width: 500px) { .rule { font-size: 16px } }'; + mediaQuery: false, + } + var processed = postcss(pxToViewport(options)).process( + '@media (min-width: 500px) { .rule { font-size: 16px } }', + ).css + var expected = '@media (min-width: 500px) { .rule { font-size: 16px } }' - expect(processed).toBe(expected); - }); + expect(processed).toBe(expected) + }) - it('should replace px inside media queries if it has params orientation landscape and landscape option', function() { + it('should replace px inside media queries if it has params orientation landscape and landscape option', function () { var options = { mediaQuery: true, - landscape: true - }; - var processed = postcss(pxToViewport(options)).process('@media (orientation-landscape) and (min-width: 500px) { .rule { font-size: 16px } }').css; - var expected = '@media (orientation-landscape) and (min-width: 500px) { .rule { font-size: 2.8169vw } }'; - - expect(processed).toBe(expected); - }); -}); + landscape: true, + } + var processed = postcss(pxToViewport(options)).process( + '@media (orientation-landscape) and (min-width: 500px) { .rule { font-size: 16px } }', + ).css + var expected = + '@media (orientation-landscape) and (min-width: 500px) { .rule { font-size: 2.8169vw } }' + + expect(processed).toBe(expected) + }) +}) describe('propList', function () { it('should only replace properties in the prop list', function () { - var css = '.rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }'; - var expected = '.rule { font-size: 5vw; margin: 5vw; margin-left: 5px; padding: 5px; padding-right: 5vw }'; + var css = + '.rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }' + var expected = + '.rule { font-size: 5vw; margin: 5vw; margin-left: 5px; padding: 5px; padding-right: 5vw }' var options = { - propList: ['*font*', 'margin*', '!margin-left', '*-right', 'pad'] - }; - var processed = postcss(pxToViewport(options)).process(css).css; + propList: ['*font*', 'margin*', '!margin-left', '*-right', 'pad'], + } + var processed = postcss(pxToViewport(options)).process(css).css - expect(processed).toBe(expected); - }); + expect(processed).toBe(expected) + }) it('should only replace properties in the prop list with wildcard', function () { - var css = '.rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }'; - var expected = '.rule { font-size: 16px; margin: 5vw; margin-left: 5px; padding: 5px; padding-right: 16px }'; + var css = + '.rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }' + var expected = + '.rule { font-size: 16px; margin: 5vw; margin-left: 5px; padding: 5px; padding-right: 16px }' var options = { - propList: ['*', '!margin-left', '!*padding*', '!font*'] - }; - var processed = postcss(pxToViewport(options)).process(css).css; + propList: ['*', '!margin-left', '!*padding*', '!font*'], + } + var processed = postcss(pxToViewport(options)).process(css).css - expect(processed).toBe(expected); - }); + expect(processed).toBe(expected) + }) it('should replace all properties when prop list is not given', function () { - var rules = '.rule { margin: 16px; font-size: 15px }'; - var expected = '.rule { margin: 5vw; font-size: 4.6875vw }'; - var processed = postcss(pxToViewport()).process(rules).css; + var rules = '.rule { margin: 16px; font-size: 15px }' + var expected = '.rule { margin: 5vw; font-size: 4.6875vw }' + var processed = postcss(pxToViewport()).process(rules).css - expect(processed).toBe(expected); - }); -}); + 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; + 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); - }); -}); + expect(processed).toBe(expected) + }) +}) describe('exclude', function () { - var rules = '.rule { border: 1px solid #000; font-size: 16px; margin: 1px 10px; }'; - var covered = '.rule { border: 1px solid #000; font-size: 5vw; margin: 1px 3.125vw; }'; + var rules = + '.rule { border: 1px solid #000; font-size: 16px; margin: 1px 10px; }' + var covered = + '.rule { border: 1px solid #000; font-size: 5vw; margin: 1px 3.125vw; }' it('when using regex at the time, the style should not be overwritten.', function () { var options = { - exclude: /\/node_modules\// - }; + exclude: /\/node_modules\//, + } var processed = postcss(pxToViewport(options)).process(rules, { - from: '/node_modules/main.css' - }).css; + from: '/node_modules/main.css', + }).css - expect(processed).toBe(rules); - }); + expect(processed).toBe(rules) + }) it('when using regex at the time, the style should be overwritten.', function () { var options = { - exclude: /\/node_modules\// - }; + exclude: /\/node_modules\//, + } var processed = postcss(pxToViewport(options)).process(rules, { - from: '/example/main.css' - }).css; + from: '/example/main.css', + }).css - expect(processed).toBe(covered); - }); + expect(processed).toBe(covered) + }) it('when using array at the time, the style should not be overwritten.', function () { var options = { - exclude: [/\/node_modules\//, /\/exclude\//] - }; + exclude: [/\/node_modules\//, /\/exclude\//], + } var processed = postcss(pxToViewport(options)).process(rules, { - from: '/exclude/main.css' - }).css; + from: '/exclude/main.css', + }).css - expect(processed).toBe(rules); - }); + expect(processed).toBe(rules) + }) it('when using array at the time, the style should be overwritten.', function () { var options = { - exclude: [/\/node_modules\//, /\/exclude\//] - }; + exclude: [/\/node_modules\//, /\/exclude\//], + } var processed = postcss(pxToViewport(options)).process(rules, { - from: '/example/main.css' - }).css; + from: '/example/main.css', + }).css - expect(processed).toBe(covered); - }); -}); + expect(processed).toBe(covered) + }) +}) describe('include', function () { - var rules = '.rule { border: 1px solid #000; font-size: 16px; margin: 1px 10px; }'; - var covered = '.rule { border: 1px solid #000; font-size: 5vw; margin: 1px 3.125vw; }'; + var rules = + '.rule { border: 1px solid #000; font-size: 16px; margin: 1px 10px; }' + var covered = + '.rule { border: 1px solid #000; font-size: 5vw; margin: 1px 3.125vw; }' it('when using regex at the time, the style should not be overwritten.', function () { var options = { - include: /\/mobile\// - }; + include: /\/mobile\//, + } var processed = postcss(pxToViewport(options)).process(rules, { - from: '/pc/main.css' - }).css; + from: '/pc/main.css', + }).css - expect(processed).toBe(rules); - }); + expect(processed).toBe(rules) + }) it('when using regex at the time, the style should be overwritten.', function () { var options = { - include: /\/mobile\// - }; + include: /\/mobile\//, + } var processed = postcss(pxToViewport(options)).process(rules, { - from: '/mobile/main.css' - }).css; + from: '/mobile/main.css', + }).css - expect(processed).toBe(covered); - }); + expect(processed).toBe(covered) + }) it('when using array at the time, the style should not be overwritten.', function () { var options = { - include: [/\/flexible\//, /\/mobile\//] - }; + include: [/\/flexible\//, /\/mobile\//], + } var processed = postcss(pxToViewport(options)).process(rules, { - from: '/pc/main.css' - }).css; + from: '/pc/main.css', + }).css - expect(processed).toBe(rules); - }); + expect(processed).toBe(rules) + }) it('when using array at the time, the style should be overwritten.', function () { var options = { - include: [/\/flexible\//, /\/mobile\//] - }; + include: [/\/flexible\//, /\/mobile\//], + } var processed = postcss(pxToViewport(options)).process(rules, { - from: '/flexible/main.css' - }).css; + from: '/flexible/main.css', + }).css - expect(processed).toBe(covered); - }); -}); + expect(processed).toBe(covered) + }) +}) describe('include-and-exclude', function () { - var rules = '.rule { border: 1px solid #000; font-size: 16px; margin: 1px 10px; }'; - var covered = '.rule { border: 1px solid #000; font-size: 5vw; margin: 1px 3.125vw; }'; + var rules = + '.rule { border: 1px solid #000; font-size: 16px; margin: 1px 10px; }' + var covered = + '.rule { border: 1px solid #000; font-size: 5vw; margin: 1px 3.125vw; }' it('when using regex at the time, the style should not be overwritten.', function () { var options = { include: /\/mobile\//, - exclude: /\/not-transform\// - }; + exclude: /\/not-transform\//, + } var processed = postcss(pxToViewport(options)).process(rules, { - from: '/mobile/not-transform/main.css' - }).css; + from: '/mobile/not-transform/main.css', + }).css - expect(processed).toBe(rules); - }); + expect(processed).toBe(rules) + }) it('when using regex at the time, the style should be overwritten.', function () { var options = { include: /\/mobile\//, - exclude: /\/not-transform\// - }; + exclude: /\/not-transform\//, + } var processed = postcss(pxToViewport(options)).process(rules, { - from: '/mobile/style/main.css' - }).css; + from: '/mobile/style/main.css', + }).css - expect(processed).toBe(covered); - }); + expect(processed).toBe(covered) + }) it('when using array at the time, the style should not be overwritten.', function () { var options = { include: [/\/flexible\//, /\/mobile\//], - exclude: [/\/not-transform\//, /pc/] - }; + exclude: [/\/not-transform\//, /pc/], + } var processed = postcss(pxToViewport(options)).process(rules, { - from: '/flexible/not-transform/main.css' - }).css; + from: '/flexible/not-transform/main.css', + }).css - expect(processed).toBe(rules); - }); + expect(processed).toBe(rules) + }) it('when using regex at the time, the style should be overwritten.', function () { var options = { include: [/\/flexible\//, /\/mobile\//], - exclude: [/\/not-transform\//, /pc/] - }; + exclude: [/\/not-transform\//, /pc/], + } var processed = postcss(pxToViewport(options)).process(rules, { - from: '/mobile/style/main.css' - }).css; + from: '/mobile/style/main.css', + }).css - expect(processed).toBe(covered); - }); -}); + expect(processed).toBe(covered) + }) +}) describe('regex', function () { - var rules = '.rule { border: 1px solid #000; font-size: 16px; margin: 1px 10px; }'; - var covered = '.rule { border: 1px solid #000; font-size: 5vw; margin: 1px 3.125vw; }'; + var rules = + '.rule { border: 1px solid #000; font-size: 16px; margin: 1px 10px; }' + var covered = + '.rule { border: 1px solid #000; font-size: 5vw; margin: 1px 3.125vw; }' it('when using regex at the time, the style should not be overwritten.', function () { var options = { - exclude: /pc/ - }; + exclude: /pc/, + } var processed = postcss(pxToViewport(options)).process(rules, { - from: '/pc-project/main.css' - }).css; + from: '/pc-project/main.css', + }).css - expect(processed).toBe(rules); - }); + expect(processed).toBe(rules) + }) it('when using regex at the time, the style should be overwritten.', function () { var options = { - exclude: /\/pc\// - }; + exclude: /\/pc\//, + } var processed = postcss(pxToViewport(options)).process(rules, { - from: '/pc-project/main.css' - }).css; + from: '/pc-project/main.css', + }).css - expect(processed).toBe(covered); - }); + expect(processed).toBe(covered) + }) it('when using regex at the time, the style should not be overwritten.', function () { var options = { - include: /\/pc\// - }; + include: /\/pc\//, + } var processed = postcss(pxToViewport(options)).process(rules, { - from: '/pc-project/main.css' - }).css; + from: '/pc-project/main.css', + }).css - expect(processed).toBe(rules); - }); + expect(processed).toBe(rules) + }) it('when using regex at the time, the style should be overwritten.', function () { var options = { - include: /pc/ - }; + include: /pc/, + } var processed = postcss(pxToViewport(options)).process(rules, { - from: '/pc-project/main.css' - }).css; + from: '/pc-project/main.css', + }).css - expect(processed).toBe(covered); - }); -}); + expect(processed).toBe(covered) + }) +}) describe('replace', function () { it('should leave fallback pixel unit with root em value', function () { var options = { - replace: false - }; - var processed = postcss(pxToViewport(options)).process(basicCSS).css; - var expected = '.rule { font-size: 15px; font-size: 4.6875vw }'; + replace: false, + } + var processed = postcss(pxToViewport(options)).process(basicCSS).css + var expected = '.rule { font-size: 15px; font-size: 4.6875vw }' - expect(processed).toBe(expected); - }); -}); + expect(processed).toBe(expected) + }) +}) describe('filter-prop-list', function () { it('should find "exact" matches from propList', function () { - var propList = ['font-size', 'margin', '!padding', '*border*', '*', '*y', '!*font*']; - var expected = 'font-size,margin'; - expect(filterPropList.exact(propList).join()).toBe(expected); - }); + var propList = [ + 'font-size', + 'margin', + '!padding', + '*border*', + '*', + '*y', + '!*font*', + ] + var expected = 'font-size,margin' + expect(filterPropList.exact(propList).join()).toBe(expected) + }) it('should find "contain" matches from propList and reduce to string', function () { - var propList = ['font-size', '*margin*', '!padding', '*border*', '*', '*y', '!*font*']; - var expected = 'margin,border'; - expect(filterPropList.contain(propList).join()).toBe(expected); - }); + var propList = [ + 'font-size', + '*margin*', + '!padding', + '*border*', + '*', + '*y', + '!*font*', + ] + var expected = 'margin,border' + expect(filterPropList.contain(propList).join()).toBe(expected) + }) it('should find "start" matches from propList and reduce to string', function () { - var propList = ['font-size', '*margin*', '!padding', 'border*', '*', '*y', '!*font*']; - var expected = 'border'; - expect(filterPropList.startWith(propList).join()).toBe(expected); - }); + var propList = [ + 'font-size', + '*margin*', + '!padding', + 'border*', + '*', + '*y', + '!*font*', + ] + var expected = 'border' + expect(filterPropList.startWith(propList).join()).toBe(expected) + }) it('should find "end" matches from propList and reduce to string', function () { - var propList = ['font-size', '*margin*', '!padding', 'border*', '*', '*y', '!*font*']; - var expected = 'y'; - expect(filterPropList.endWith(propList).join()).toBe(expected); - }); + var propList = [ + 'font-size', + '*margin*', + '!padding', + 'border*', + '*', + '*y', + '!*font*', + ] + var expected = 'y' + expect(filterPropList.endWith(propList).join()).toBe(expected) + }) it('should find "not" matches from propList and reduce to string', function () { - var propList = ['font-size', '*margin*', '!padding', 'border*', '*', '*y', '!*font*']; - var expected = 'padding'; - expect(filterPropList.notExact(propList).join()).toBe(expected); - }); + var propList = [ + 'font-size', + '*margin*', + '!padding', + 'border*', + '*', + '*y', + '!*font*', + ] + var expected = 'padding' + expect(filterPropList.notExact(propList).join()).toBe(expected) + }) it('should find "not contain" matches from propList and reduce to string', function () { - var propList = ['font-size', '*margin*', '!padding', '!border*', '*', '*y', '!*font*']; - var expected = 'font'; - expect(filterPropList.notContain(propList).join()).toBe(expected); - }); + var propList = [ + 'font-size', + '*margin*', + '!padding', + '!border*', + '*', + '*y', + '!*font*', + ] + var expected = 'font' + expect(filterPropList.notContain(propList).join()).toBe(expected) + }) it('should find "not start" matches from propList and reduce to string', function () { - var propList = ['font-size', '*margin*', '!padding', '!border*', '*', '*y', '!*font*']; - var expected = 'border'; - expect(filterPropList.notStartWith(propList).join()).toBe(expected); - }); + var propList = [ + 'font-size', + '*margin*', + '!padding', + '!border*', + '*', + '*y', + '!*font*', + ] + var expected = 'border' + expect(filterPropList.notStartWith(propList).join()).toBe(expected) + }) it('should find "not end" matches from propList and reduce to string', function () { - var propList = ['font-size', '*margin*', '!padding', '!border*', '*', '!*y', '!*font*']; - var expected = 'y'; - expect(filterPropList.notEndWith(propList).join()).toBe(expected); - }); -}); + var propList = [ + 'font-size', + '*margin*', + '!padding', + '!border*', + '*', + '!*y', + '!*font*', + ] + var expected = 'y' + expect(filterPropList.notEndWith(propList).join()).toBe(expected) + }) +}) -describe('landscape', function() { - it('should add landscape atRule', function() { - var css = '.rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }'; - var expected = '.rule { font-size: 5vw; margin: 5vw; margin-left: 1.5625vw; padding: 1.5625vw; padding-right: 5vw }@media (orientation: landscape) {.rule { font-size: 2.8169vw; margin: 2.8169vw; margin-left: 0.88028vw; padding: 0.88028vw; padding-right: 2.8169vw } }'; +describe('landscape', function () { + it('should add landscape atRule', function () { + var css = + '.rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }' + var expected = + '.rule { font-size: 5vw; margin: 5vw; margin-left: 1.5625vw; padding: 1.5625vw; padding-right: 5vw }@media (orientation: landscape) {.rule { font-size: 2.8169vw; margin: 2.8169vw; margin-left: 0.88028vw; padding: 0.88028vw; padding-right: 2.8169vw } }' var options = { - landscape: true - }; - var processed = postcss(pxToViewport(options)).process(css).css; + landscape: true, + } + var processed = postcss(pxToViewport(options)).process(css).css - expect(processed).toBe(expected); - }); + expect(processed).toBe(expected) + }) - it('should add landscape atRule with specified landscapeUnits', function() { - var css = '.rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }'; - var expected = '.rule { font-size: 5vw; margin: 5vw; margin-left: 1.5625vw; padding: 1.5625vw; padding-right: 5vw }@media (orientation: landscape) {.rule { font-size: 2.8169vh; margin: 2.8169vh; margin-left: 0.88028vh; padding: 0.88028vh; padding-right: 2.8169vh } }'; + it('should add landscape atRule with specified landscapeUnits', function () { + var css = + '.rule { font-size: 16px; margin: 16px; margin-left: 5px; padding: 5px; padding-right: 16px }' + var expected = + '.rule { font-size: 5vw; margin: 5vw; margin-left: 1.5625vw; padding: 1.5625vw; padding-right: 5vw }@media (orientation: landscape) {.rule { font-size: 2.8169vh; margin: 2.8169vh; margin-left: 0.88028vh; padding: 0.88028vh; padding-right: 2.8169vh } }' var options = { landscape: true, - landscapeUnit: 'vh' - }; - var processed = postcss(pxToViewport(options)).process(css).css; + landscapeUnit: 'vh', + } + var processed = postcss(pxToViewport(options)).process(css).css - expect(processed).toBe(expected); - }); + expect(processed).toBe(expected) + }) - it('should not add landscape atRule in mediaQueries', function() { - var css = '@media (min-width: 500px) { .rule { font-size: 16px } }'; - var expected = '@media (min-width: 500px) { .rule { font-size: 5vw } }'; + it('should not add landscape atRule in mediaQueries', function () { + var css = '@media (min-width: 500px) { .rule { font-size: 16px } }' + var expected = '@media (min-width: 500px) { .rule { font-size: 5vw } }' var options = { landscape: true, - mediaQuery: true - }; - var processed = postcss(pxToViewport(options)).process(css).css; + mediaQuery: true, + } + var processed = postcss(pxToViewport(options)).process(css).css - expect(processed).toBe(expected); - }); + expect(processed).toBe(expected) + }) - it('should not replace values inside landscape atRule', function() { + it('should not replace values inside landscape atRule', function () { var options = { replace: false, - landscape: true - }; - var processed = postcss(pxToViewport(options)).process(basicCSS).css; - var expected = '.rule { font-size: 15px; font-size: 4.6875vw }@media (orientation: landscape) {.rule { font-size: 2.64085vw } }'; + landscape: true, + } + var processed = postcss(pxToViewport(options)).process(basicCSS).css + var expected = + '.rule { font-size: 15px; font-size: 4.6875vw }@media (orientation: landscape) {.rule { font-size: 2.64085vw } }' - expect(processed).toBe(expected); - }); + expect(processed).toBe(expected) + }) - it('should add landscape atRule with specified landscapeWidth', function() { + it('should add landscape atRule with specified landscapeWidth', function () { var options = { landscape: true, - landscapeWidth: 768 - }; - var processed = postcss(pxToViewport(options)).process(basicCSS).css; - var expected = '.rule { font-size: 4.6875vw }@media (orientation: landscape) {.rule { font-size: 1.95313vw } }'; + landscapeWidth: 768, + } + var processed = postcss(pxToViewport(options)).process(basicCSS).css + var expected = + '.rule { font-size: 4.6875vw }@media (orientation: landscape) {.rule { font-size: 1.95313vw } }' - expect(processed).toBe(expected); - }); + expect(processed).toBe(expected) + }) - it('should not add landscape atRule if it has no nodes', function() { - var css = '.rule { font-size: 15vw }'; + it('should not add landscape atRule if it has no nodes', function () { + var css = '.rule { font-size: 15vw }' var options = { - landscape: true - }; - var processed = postcss(pxToViewport(options)).process(css).css; - var expected = '.rule { font-size: 15vw }'; + landscape: true, + } + var processed = postcss(pxToViewport(options)).process(css).css + var expected = '.rule { font-size: 15vw }' - expect(processed).toBe(expected); - }); -}); + expect(processed).toBe(expected) + }) +}) -describe('/* px-to-viewport-ignore */ & /* px-to-viewport-ignore-next */', function() { - it('should ignore right-commented', function() { - var css = '.rule { font-size: 15px; /* simple comment */ width: 100px; /* px-to-viewport-ignore */ height: 50px; }'; - var expected = '.rule { font-size: 4.6875vw; /* simple comment */ width: 100px; height: 15.625vw; }'; +describe('/* px-to-viewport-ignore */ & /* px-to-viewport-ignore-next */', function () { + it('should ignore right-commented', function () { + var css = + '.rule { font-size: 15px; /* simple comment */ width: 100px; /* px-to-viewport-ignore */ height: 50px; }' + var expected = + '.rule { font-size: 4.6875vw; /* simple comment */ width: 100px; height: 15.625vw; }' - var processed = postcss(pxToViewport()).process(css).css; + var processed = postcss(pxToViewport()).process(css).css - expect(processed).toBe(expected); - }); + expect(processed).toBe(expected) + }) - it('should ignore right-commented in multiline-css', function() { - var css = '.rule {\n font-size: 15px;\n width: 100px; /*px-to-viewport-ignore*/\n height: 50px;\n}'; - var expected = '.rule {\n font-size: 4.6875vw;\n width: 100px;\n height: 15.625vw;\n}'; + it('should ignore right-commented in multiline-css', function () { + var css = + '.rule {\n font-size: 15px;\n width: 100px; /*px-to-viewport-ignore*/\n height: 50px;\n}' + var expected = + '.rule {\n font-size: 4.6875vw;\n width: 100px;\n height: 15.625vw;\n}' - var processed = postcss(pxToViewport()).process(css).css; + var processed = postcss(pxToViewport()).process(css).css - expect(processed).toBe(expected); - }); + expect(processed).toBe(expected) + }) - it('should ignore before-commented in multiline-css', function() { - var css = '.rule {\n font-size: 15px;\n /*px-to-viewport-ignore-next*/\n width: 100px;\n /*px-to-viewport-ignore*/\n height: 50px;\n}'; - var expected = '.rule {\n font-size: 4.6875vw;\n width: 100px;\n /*px-to-viewport-ignore*/\n height: 15.625vw;\n}'; + it('should ignore before-commented in multiline-css', function () { + var css = + '.rule {\n font-size: 15px;\n /*px-to-viewport-ignore-next*/\n width: 100px;\n /*px-to-viewport-ignore*/\n height: 50px;\n}' + var expected = + '.rule {\n font-size: 4.6875vw;\n width: 100px;\n /*px-to-viewport-ignore*/\n height: 15.625vw;\n}' - var processed = postcss(pxToViewport()).process(css).css; + var processed = postcss(pxToViewport()).process(css).css - expect(processed).toBe(expected); - }); -}); + expect(processed).toBe(expected) + }) +})