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:
authorXhmikosR <xhmikosr@gmail.com>2019-02-13 13:48:15 +0300
committerMartijn Cuppens <martijn.cuppens@gmail.com>2019-02-13 13:48:15 +0300
commite66e165b6e4b104266b6d95b926dff6d4999e90d (patch)
tree2d6f88a5ad04e3b9f804d831117b2831d3be48df /postcss.js
parent6bc081ecf0ba95ca6ac1a976741ef2cb7a521fa4 (diff)
ES6-ify and lint all JS files. (#79)
* Enforce LF * ES6-ify and lint all JS files.
Diffstat (limited to 'postcss.js')
-rw-r--r--postcss.js110
1 files changed, 57 insertions, 53 deletions
diff --git a/postcss.js b/postcss.js
index 7263b93..e394a66 100644
--- a/postcss.js
+++ b/postcss.js
@@ -8,7 +8,7 @@
const postcss = require('postcss');
-module.exports = postcss.plugin('postcss-rfs', function (opts) {
+module.exports = postcss.plugin('postcss-rfs', opts => {
const BREAKPOINT_ERROR = 'breakpoint option is invalid, it must be set in `px`, `rem` or `em`.';
const BREAKPOINT_UNIT_ERROR = 'breakpointUnit option is invalid, it must be `px`, `rem` or `em`.';
const BASE_FONT_SIZE_ERROR = 'baseFontSize option is invalid, it must be set in `px` or `rem`.';
@@ -28,16 +28,15 @@ module.exports = postcss.plugin('postcss-rfs', function (opts) {
safariIframeResizeBugFix: false,
enableResponsiveFontSizes: true
};
+
opts = Object.assign(defaultOptions, opts);
if (typeof opts.baseFontSize !== 'number') {
if (opts.baseFontSize.endsWith('px')) {
opts.baseFontSize = parseFloat(opts.baseFontSize);
- }
- else if (opts.baseFontSize.endsWith('rem')) {
+ } else if (opts.baseFontSize.endsWith('rem')) {
opts.baseFontSize = parseFloat(opts.baseFontSize) / opts.remValue;
- }
- else {
+ } else {
console.error(BASE_FONT_SIZE_ERROR);
}
}
@@ -45,26 +44,22 @@ module.exports = postcss.plugin('postcss-rfs', function (opts) {
if (typeof opts.breakpoint !== 'number') {
if (opts.breakpoint.endsWith('px')) {
opts.breakpoint = parseFloat(opts.breakpoint);
- }
- else if (opts.breakpoint.endsWith('em')) {
+ } else if (opts.breakpoint.endsWith('em')) {
opts.breakpoint = parseFloat(opts.breakpoint) * opts.remValue;
- }
- else {
+ } else {
console.error(BREAKPOINT_ERROR);
}
}
- return function (css) {
-
- css.walkRules(function (rule) {
-
+ return css => {
+ css.walkRules(rule => {
if (rule.selector.includes(DISABLE_RESPONSIVE_FONT_SIZE_SELECTOR)) {
return;
}
- rule.walkDecls(function (decl) {
+ rule.walkDecls(decl => {
// Skip if property is not in propList
- if (opts.propList.indexOf(decl.prop) === -1) {
+ if (!opts.propList.includes(decl.prop)) {
return;
}
@@ -80,18 +75,16 @@ module.exports = postcss.plugin('postcss-rfs', function (opts) {
let value = parseFloat(decl.value);
// Multiply by remValue if value is in rem
- if (decl.value.indexOf('rem') > -1) {
+ if (decl.value.includes('rem')) {
value *= opts.remValue;
}
// Render value in desired unit
if (opts.fontSizeUnit === 'px') {
- decl.value = toFixed(value, opts.unitPrecision) + 'px';
- }
- else if (opts.fontSizeUnit === 'rem') {
- decl.value = toFixed(value / opts.remValue, opts.unitPrecision) + 'rem';
- }
- else {
+ decl.value = `${toFixed(value, opts.unitPrecision)}px`;
+ } else if (opts.fontSizeUnit === 'rem') {
+ decl.value = `${toFixed(value / opts.remValue, opts.unitPrecision)}rem`;
+ } else {
console.error('fontSizeUnit option is not valid, it must be `px` or `rem`.');
}
@@ -101,7 +94,7 @@ module.exports = postcss.plugin('postcss-rfs', function (opts) {
}
// Calculate font-size and font-size difference
- let baseFontSize = opts.baseFontSize + (value - opts.baseFontSize) / opts.factor;
+ let baseFontSize = opts.baseFontSize + ((value - opts.baseFontSize) / opts.factor);
const fontSizeDiff = value - baseFontSize;
// Divide by remValue if needed
@@ -111,7 +104,7 @@ module.exports = postcss.plugin('postcss-rfs', function (opts) {
const viewportUnit = opts.twoDimensional ? 'vmin' : 'vw';
- value = 'calc(' + toFixed(baseFontSize, opts.unitPrecision) + opts.fontSizeUnit + ' + ' + toFixed((fontSizeDiff * 100 / opts.breakpoint), opts.unitPrecision) + viewportUnit + ')';
+ value = `calc(${toFixed(baseFontSize, opts.unitPrecision)}${opts.fontSizeUnit} + ${toFixed(fontSizeDiff * 100 / opts.breakpoint, opts.unitPrecision)}${viewportUnit})`;
const mediaQuery = postcss.atRule(renderMediaQuery(opts));
let rule_selector = rule.selector;
@@ -121,23 +114,27 @@ module.exports = postcss.plugin('postcss-rfs', function (opts) {
const selectors = rule.selector.split(',');
let ruleSelector = '';
- for (let selector of selectors) {
- ruleSelector += ENABLE_RESPONSIVE_FONT_SIZE_SELECTOR + ' ' + selector + ',\n';
- ruleSelector += selector + ENABLE_RESPONSIVE_FONT_SIZE_SELECTOR + ',\n';
+ for (const selector of selectors) {
+ ruleSelector += `${ENABLE_RESPONSIVE_FONT_SIZE_SELECTOR} ${selector},\n`;
+ ruleSelector += `${selector + ENABLE_RESPONSIVE_FONT_SIZE_SELECTOR},\n`;
}
+
rule_selector = ruleSelector.slice(0, -2);
}
-
const mediaQueryRule = postcss.rule({
selector: rule_selector,
source: rule.source
});
- mediaQueryRule.append(decl.clone({value: value}));
+
+ mediaQueryRule.append(decl.clone({value}));
// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
if (opts.safariIframeResizeBugFix) {
- mediaQueryRule.append(postcss.decl({ prop: 'min-width', value: '0vw' }));
+ mediaQueryRule.append(postcss.decl({
+ prop: 'min-width',
+ value: '0vw'
+ }));
}
mediaQuery.append(mediaQueryRule);
@@ -148,52 +145,58 @@ module.exports = postcss.plugin('postcss-rfs', function (opts) {
const selectors = rule.selector.split(',');
let ruleSelector = '';
- for (let selector of selectors) {
- ruleSelector += selector + ',\n';
- ruleSelector += DISABLE_RESPONSIVE_FONT_SIZE_SELECTOR + ' ' + selector + ',\n';
- ruleSelector += selector + DISABLE_RESPONSIVE_FONT_SIZE_SELECTOR + ',\n';
+ for (const selector of selectors) {
+ ruleSelector += `${selector},\n`;
+ ruleSelector += `${DISABLE_RESPONSIVE_FONT_SIZE_SELECTOR} ${selector},\n`;
+ ruleSelector += `${selector + DISABLE_RESPONSIVE_FONT_SIZE_SELECTOR},\n`;
}
- ruleSelector = ruleSelector.slice(0, - 2);
- const dc_rule = postcss.rule({
+ ruleSelector = ruleSelector.slice(0, -2);
+
+ const dcRule = postcss.rule({
selector: ruleSelector,
source: rule.source
});
- dc_rule.append(decl.clone());
- rule.parent.insertAfter(rule, dc_rule);
- decl.prev() || decl.next() ? decl.remove() : decl.parent.remove();
+ dcRule.append(decl.clone());
+ rule.parent.insertAfter(rule, dcRule);
+
+ if (decl.prev() || decl.next()) {
+ decl.remove();
+ } else {
+ decl.parent.remove();
+ }
}
});
});
-
};
- function renderMediaQuery (opts) {
+ function renderMediaQuery(opts) {
const mediaQuery = {
name: 'media'
};
switch (opts.breakpointUnit) {
case 'em':
- case 'rem':
+ case 'rem': {
const breakpoint = opts.breakpoint / opts.remValue;
if (opts.twoDimensional) {
- mediaQuery.params = '(max-width: ' + breakpoint + opts.breakpointUnit + '), (max-height: ' + breakpoint + opts.breakpointUnit + ')';
- }
- else {
- mediaQuery.params = '(max-width: ' + breakpoint + opts.breakpointUnit + ')';
+ mediaQuery.params = `(max-width: ${breakpoint}${opts.breakpointUnit}), (max-height: ${breakpoint}${opts.breakpointUnit})`;
+ } else {
+ mediaQuery.params = `(max-width: ${breakpoint}${opts.breakpointUnit})`;
}
+
break;
+ }
case 'px':
if (opts.twoDimensional) {
- mediaQuery.params = '(max-width: ' + opts.breakpoint + 'px), (max-height: ' + opts.breakpoint + 'px)';
- }
- else {
- mediaQuery.params = '(max-width: ' + opts.breakpoint + 'px)';
+ mediaQuery.params = `(max-width: ${opts.breakpoint}px), (max-height: ${opts.breakpoint}px)`;
+ } else {
+ mediaQuery.params = `(max-width: ${opts.breakpoint}px)`;
}
+
break;
default:
@@ -204,9 +207,10 @@ module.exports = postcss.plugin('postcss-rfs', function (opts) {
return mediaQuery;
}
- function toFixed (number, precision) {
- const multiplier = Math.pow(10, precision + 1),
- wholeNumber = Math.floor(number * multiplier);
+ function toFixed(number, precision) {
+ const multiplier = Math.pow(10, precision + 1);
+ const wholeNumber = Math.floor(number * multiplier);
+
return Math.round(wholeNumber / 10) * 10 / multiplier;
}
});