Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/twbs/rfs.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to 'lib/rfs.js')
-rw-r--r--lib/rfs.js54
1 files changed, 26 insertions, 28 deletions
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;
}
};
-