diff --git a/index.js b/index.js index 6419322..15f7ef4 100755 --- a/index.js +++ b/index.js @@ -25,7 +25,7 @@ var defaults = { var ignoreNextComment = 'px-to-viewport-ignore-next'; var ignorePrevComment = 'px-to-viewport-ignore'; -module.exports = postcss.plugin('postcss-px-to-viewport', function (options) { +module.exports = function (options) { var opts = objectAssign({}, defaults, options); checkRegExpOrArray(opts, 'exclude'); @@ -34,115 +34,119 @@ module.exports = postcss.plugin('postcss-px-to-viewport', function (options) { 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; + return { + postcssPlugin: 'postcss-px-to-viewport', + Once(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; + } } + 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 (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; + + rule.walkDecls(function(decl, i) { 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; - - 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(); + prev.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)); - - if (declarationExists(decl.parent, decl.prop, value)) return; - - if (opts.replace) { - decl.value = value; - } else { - decl.parent.insertAfter(i, decl.clone({ value: value })); - } - }); - }); - - if (landscapeRules.length > 0) { - var landscapeRoot = new postcss.atRule({ params: '(orientation: landscape)', name: 'media' }); - - landscapeRules.forEach(function(rule) { - landscapeRoot.append(rule); + 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)); + + if (declarationExists(decl.parent, decl.prop, value)) return; + + if (opts.replace) { + decl.value = value; + } else { + decl.parent.insertAfter(i, decl.clone({ value: value })); + } + }); }); - css.append(landscapeRoot); + + if (landscapeRules.length > 0) { + var landscapeRoot = new postcss.atRule({ params: '(orientation: landscape)', name: 'media' }); + + landscapeRules.forEach(function(rule) { + landscapeRoot.append(rule); + }); + css.append(landscapeRoot); + } } - }; -}); + } +} + +module.exports.postcss = true function getUnit(prop, opts) { return prop.indexOf('font') === -1 ? opts.viewportUnit : opts.fontViewportUnit; diff --git a/package.json b/package.json index deec944..8578634 100755 --- a/package.json +++ b/package.json @@ -32,9 +32,9 @@ }, "devDependencies": { "jest": "^25.4.0", - "postcss": ">=5.0.2" + "postcss": "^8.0.0" }, "peerDependencies": { - "postcss": ">=5.0.2" + "postcss": "^8.0.0" } }