From 7e8ac77fdba8e7d13de133843d32d139da686ab9 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Wed, 1 Dec 2021 14:10:19 +0200 Subject: Lint tweaks (#422) * switch to always using a space in object curly braces * consistently use strict mode * move a constant outside of the constructor * use Object spread instead of Object.assign * use a ternary in more places * remove redundant parentheses * enable `prefer-template` rule so that we are consistent * return early in a few cases --- examples/scss/gulpfile.js | 2 +- lib/rfs.js | 54 ++++++++++---------- package.json | 5 ++ postcss.js | 123 ++++++++++++++++++++++++---------------------- test/lib/result.js | 2 +- 5 files changed, 98 insertions(+), 88 deletions(-) diff --git a/examples/scss/gulpfile.js b/examples/scss/gulpfile.js index 4232d3f..b9d0ecb 100644 --- a/examples/scss/gulpfile.js +++ b/examples/scss/gulpfile.js @@ -5,7 +5,7 @@ const sass = require('gulp-sass')(require('sass')); gulp.task('default', () => { return gulp.src('./src/**/*.scss') - .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError)) + .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError)) .pipe(gulp.dest('./dest')); }); diff --git a/lib/rfs.js b/lib/rfs.js index 850c93f..4f0ec03 100644 --- a/lib/rfs.js +++ b/lib/rfs.js @@ -1,3 +1,5 @@ +'use strict'; + const postcss = require('postcss'); const valueParser = require('postcss-value-parser'); @@ -5,23 +7,23 @@ const BREAKPOINT_ERROR = 'breakpoint option is invalid, it should be set in `px` const BREAKPOINT_UNIT_ERROR = 'breakpointUnit option is invalid, it should be `px`, `rem` or `em`.'; const BASE_RFS_ERROR = 'baseValue option is invalid, it should be set in `px` or `rem`.'; +const defaultOptions = { + baseValue: 20, + unit: 'rem', + breakpoint: 1200, + breakpointUnit: 'px', + factor: 10, + twoDimensional: false, + unitPrecision: 5, + remValue: 16, + functionName: 'rfs', + enableRfs: true, + mode: 'min-media-query' +}; + module.exports = class { constructor(opts) { - const defaultOptions = { - baseValue: 20, - unit: 'rem', - breakpoint: 1200, - breakpointUnit: 'px', - factor: 10, - twoDimensional: false, - unitPrecision: 5, - remValue: 16, - functionName: 'rfs', - enableRfs: true, - mode: 'min-media-query' - }; - - this.opts = Object.assign(defaultOptions, opts); + this.opts = { ...defaultOptions, ...opts }; if (typeof this.opts.baseValue !== 'number') { if (this.opts.baseValue.endsWith('px')) { @@ -62,11 +64,9 @@ module.exports = class { } // Render value in desired unit - if (this.opts.unit === 'rem') { - return `${this.toFixed(value / this.opts.remValue, this.opts.unitPrecision)}rem`; - } - - return `${this.toFixed(value, this.opts.unitPrecision)}px`; + return this.opts.unit === 'rem' ? + `${this.toFixed(value / this.opts.remValue, this.opts.unitPrecision)}rem` : + `${this.toFixed(value, this.opts.unitPrecision)}px`; } process(declarationValue, fluid) { @@ -112,11 +112,10 @@ module.exports = class { } const viewportUnit = this.opts.twoDimensional ? 'vmin' : 'vw'; - if (value > 0) { - return `calc(${this.toFixed(baseValue, this.opts.unitPrecision)}${this.opts.unit} + ${this.toFixed(diff * 100 / this.opts.breakpoint, this.opts.unitPrecision)}${viewportUnit})`; - } - return `calc(-${this.toFixed(baseValue, this.opts.unitPrecision)}${this.opts.unit} - ${this.toFixed(diff * 100 / this.opts.breakpoint, this.opts.unitPrecision)}${viewportUnit})`; + return value > 0 ? + `calc(${this.toFixed(baseValue, this.opts.unitPrecision)}${this.opts.unit} + ${this.toFixed(diff * 100 / this.opts.breakpoint, this.opts.unitPrecision)}${viewportUnit})` : + `calc(-${this.toFixed(baseValue, this.opts.unitPrecision)}${this.opts.unit} - ${this.toFixed(diff * 100 / this.opts.breakpoint, this.opts.unitPrecision)}${viewportUnit})`; }); } @@ -146,9 +145,9 @@ module.exports = class { name: 'media' }; - const dimPrefix = (this.opts.mode === 'min-media-query') ? 'min' : 'max'; - const dimConnector = (this.opts.mode === 'min-media-query') ? ' and' : ','; - const breakpoint = (this.opts.breakpointUnit === 'px') ? this.opts.breakpoint : this.opts.breakpoint / this.opts.remValue; + const dimPrefix = this.opts.mode === 'min-media-query' ? 'min' : 'max'; + const dimConnector = this.opts.mode === 'min-media-query' ? ' and' : ','; + const breakpoint = this.opts.breakpointUnit === 'px' ? this.opts.breakpoint : this.opts.breakpoint / this.opts.remValue; mediaQuery.params = this.opts.twoDimensional ? `(${dimPrefix}-width: ${breakpoint}${this.opts.breakpointUnit})${dimConnector} (${dimPrefix}-height: ${breakpoint}${this.opts.breakpointUnit})` : @@ -161,4 +160,3 @@ module.exports = class { return this.opts; } }; - diff --git a/package.json b/package.json index 600c1bd..4b84ea8 100644 --- a/package.json +++ b/package.json @@ -95,10 +95,15 @@ "never" ], "node/prefer-promises/fs": "off", + "object-curly-spacing": [ + "error", + "always" + ], "operator-linebreak": [ "error", "after" ], + "prefer-template": "error", "promise/prefer-await-to-then": "off", "unicorn/prefer-module": "off", "unicorn/prevent-abbreviations": "off" diff --git a/postcss.js b/postcss.js index 9f44ea8..9e45a5e 100644 --- a/postcss.js +++ b/postcss.js @@ -25,7 +25,7 @@ module.exports = postcss.plugin('postcss-rfs', opts => { css.walkRules(rule => { const mediaQueryRules = []; const extraBlocks = []; - const {parent} = rule; + const { parent } = rule; let removeRule = false; let dcRule; let ecRule; @@ -54,7 +54,7 @@ module.exports = postcss.plugin('postcss-rfs', opts => { let ruleSelector = ''; for (const selector of selectors) { - ruleSelector += (opts.mode === 'max-media-query') ? `${selector},\n` : ''; + ruleSelector += opts.mode === 'max-media-query' ? `${selector},\n` : ''; ruleSelector += `${DISABLE_RFS_SELECTOR} ${selector},\n`; ruleSelector += `${selector + DISABLE_RFS_SELECTOR},\n`; } @@ -69,76 +69,83 @@ module.exports = postcss.plugin('postcss-rfs', opts => { rule.walkDecls(decl => { // Check if the selector doesn't contain the disabled selector - // Check if value contains rfs() function - if (!rule.selector.includes(DISABLE_RFS_SELECTOR) && new RegExp(opts.functionName + '(.*)', 'g').test(decl.value)) { - const value = rfs.value(decl.value); - const fluidValue = rfs.fluidValue(decl.value); - decl.value = value; - - if (value !== fluidValue) { - const defaultValue = (opts.mode === 'min-media-query') ? ((opts.class === 'enable') ? value : fluidValue) : value; - const mediaQueryValue = (opts.mode === 'min-media-query') ? value : fluidValue; - decl.value = defaultValue; - - fluidRule.append(decl.clone({value: mediaQueryValue})); - mediaQueryRules.push(fluidRule); - - // Disable classes - if (opts.class === 'disable') { - const declOpts = (opts.mode === 'max-media-query') ? {} : {value}; - dcRule.append(decl.clone(declOpts)); - extraBlocks.push(dcRule); - } else if (opts.class === 'enable' && opts.mode === 'min-media-query') { - if (ecRule === undefined) { - ecRule = postcss.rule({ - selector: ruleSelector, - source: parent.source - }); - } - - ecRule.append(decl.clone({value: fluidValue})); - extraBlocks.push(ecRule); + // and if the value contains the rfs() function + const check = !rule.selector.includes(DISABLE_RFS_SELECTOR) && + new RegExp(`${opts.functionName}(.*)`, 'g').test(decl.value); + + if (!check) { + return; + } + + const value = rfs.value(decl.value); + const fluidValue = rfs.fluidValue(decl.value); + decl.value = value; + + if (value !== fluidValue) { + const defaultValue = opts.mode === 'min-media-query' ? ((opts.class === 'enable') ? value : fluidValue) : value; + const mediaQueryValue = opts.mode === 'min-media-query' ? value : fluidValue; + decl.value = defaultValue; + + fluidRule.append(decl.clone({ value: mediaQueryValue })); + mediaQueryRules.push(fluidRule); + + // Disable classes + if (opts.class === 'disable') { + const declOpts = opts.mode === 'max-media-query' ? {} : { value }; + dcRule.append(decl.clone(declOpts)); + extraBlocks.push(dcRule); + } else if (opts.class === 'enable' && opts.mode === 'min-media-query') { + if (ecRule === undefined) { + ecRule = postcss.rule({ + selector: ruleSelector, + source: parent.source + }); } - // Remove declaration if needed - if (opts.class === 'disable' && opts.mode === 'max-media-query') { - if (decl.prev() || decl.next()) { - decl.remove(); - } else { - removeRule = true; - } + ecRule.append(decl.clone({ value: fluidValue })); + extraBlocks.push(ecRule); + } + + // Remove declaration if needed + if (opts.class === 'disable' && opts.mode === 'max-media-query') { + if (decl.prev() || decl.next()) { + decl.remove(); + } else { + removeRule = true; } } } }); - if (mediaQueryRules.length > 0) { - // Safari iframe resize bug: https://github.com/twbs/rfs/issues/14 - if (opts.safariIframeResizeBugFix) { - rule.append({ - prop: 'min-width', - value: '0vw' - }); - } + if (mediaQueryRules.length === 0) { + return; + } - const fluidMediaQuery = mediaQuery.clone(); + // Safari iframe resize bug: https://github.com/twbs/rfs/issues/14 + if (opts.safariIframeResizeBugFix) { + rule.append({ + prop: 'min-width', + value: '0vw' + }); + } - for (const mediaQueryRule of mediaQueryRules) { - fluidMediaQuery.append(mediaQueryRule); - } + const fluidMediaQuery = mediaQuery.clone(); - parent.insertAfter(rule, fluidMediaQuery); + for (const mediaQueryRule of mediaQueryRules) { + fluidMediaQuery.append(mediaQueryRule); + } - if (extraBlocks.length > 0) { - for (const disableBlock of extraBlocks) { - parent.insertAfter(rule, disableBlock); - } - } + parent.insertAfter(rule, fluidMediaQuery); - if (removeRule) { - rule.remove(); + if (extraBlocks.length > 0) { + for (const disableBlock of extraBlocks) { + parent.insertAfter(rule, disableBlock); } } + + if (removeRule) { + rule.remove(); + } }); }; }); diff --git a/test/lib/result.js b/test/lib/result.js index cd41b45..0dea480 100644 --- a/test/lib/result.js +++ b/test/lib/result.js @@ -17,7 +17,7 @@ const postcssTests = require('../postcss/tests.js'); // Functions function format(css) { - return prettier.format(css, {parser: 'css'}).replace(/(\n)(\n)/g, '$1'); + return prettier.format(css, { parser: 'css' }).replace(/(\n)(\n)/g, '$1'); } function getFileContent(folder, id, ext) { -- cgit v1.2.3