diff options
Diffstat (limited to 'lib/rfs.js')
-rw-r--r-- | lib/rfs.js | 54 |
1 files changed, 26 insertions, 28 deletions
@@ -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; } }; - |