From 525146fb3223c610e89ba8d7dce6e398fbbe51dd Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Sat, 26 Aug 2017 11:26:38 -0400 Subject: [PATCH] Format everything uses 2 spaces instead of 4 --- src/generators/backgroundColors.js | 2 +- src/generators/shadows.js | 2 +- src/lib/addCustomMediaQueries.js | 8 +-- src/lib/generateUtilities.js | 68 +++++++++++++------------- src/lib/substituteClassApplyAtRules.js | 46 ++++++++--------- src/util/cloneNodes.js | 2 +- src/util/defineClass.js | 8 ++- src/util/defineClasses.js | 6 +-- src/util/findMixin.js | 20 ++++---- tests/defineClass.test.js | 20 ++++---- tests/defineClasses.test.js | 24 ++++----- 11 files changed, 99 insertions(+), 107 deletions(-) diff --git a/src/generators/backgroundColors.js b/src/generators/backgroundColors.js index 4909f41f7..0c1823b1d 100644 --- a/src/generators/backgroundColors.js +++ b/src/generators/backgroundColors.js @@ -21,7 +21,7 @@ module.exports = function ({ colors, backgroundColors }) { return _(backgroundColors).toPairs().map(([className, colorName]) => { return defineClass(`bg-${className}`, { - backgroundColor: findColor(colors, colorName), + backgroundColor: findColor(colors, colorName), }) }).value() } diff --git a/src/generators/shadows.js b/src/generators/shadows.js index 322fef026..4485c707c 100644 --- a/src/generators/shadows.js +++ b/src/generators/shadows.js @@ -4,7 +4,7 @@ const defineClass = require('../util/defineClass') module.exports = function ({ shadows }) { return _(shadows).toPairs().map(([className, shadow]) => { return defineClass(`shadow-${className}`, { - boxShadow: shadow, + boxShadow: shadow, }) }).value() } diff --git a/src/lib/addCustomMediaQueries.js b/src/lib/addCustomMediaQueries.js index 50a40380b..050b98473 100644 --- a/src/lib/addCustomMediaQueries.js +++ b/src/lib/addCustomMediaQueries.js @@ -7,14 +7,10 @@ function buildMediaQuery(breakpoint) { } return _(breakpoint).toPairs().map(([feature, value]) => { - feature = _.get( - { + feature = _.get({ min: 'min-width', max: 'max-width', - }, - feature, - feature - ) + }, feature, feature) return `(${feature}: ${value})` }).join(' and ') diff --git a/src/lib/generateUtilities.js b/src/lib/generateUtilities.js index 1bb1cfcc3..7f1294112 100644 --- a/src/lib/generateUtilities.js +++ b/src/lib/generateUtilities.js @@ -6,42 +6,40 @@ const flex = require('../generators/flex') const cloneNodes = require('../util/cloneNodes') module.exports = function (options) { - return function (css) { - const rules = [] + return function (css) { + const rules = [] - css.walkAtRules(atRule => { - if (atRule.name === 'responsive') { - const nodes = atRule.nodes - rules.push(...cloneNodes(nodes)) - css.insertBefore(atRule, nodes) - atRule.remove() - } - if (atRule.name === 'tailwind' && atRule.params === 'utilities') { - const utilities = _.flatten([ - backgroundColors(options), - shadows(options), - flex(), - ]) - rules.push(...cloneNodes(utilities)) - css.insertBefore(atRule, utilities) - atRule.remove() - } - }) + css.walkAtRules(atRule => { + if (atRule.name === 'responsive') { + const nodes = atRule.nodes + rules.push(...cloneNodes(nodes)) + css.insertBefore(atRule, nodes) + atRule.remove() + } + if (atRule.name === 'tailwind' && atRule.params === 'utilities') { + const utilities = _.flatten([ + backgroundColors(options), + shadows(options), + flex(), + ]) + rules.push(...cloneNodes(utilities)) + css.insertBefore(atRule, utilities) + atRule.remove() + } + }) - Object.keys(options.breakpoints).forEach(breakpoint => { - const mediaQuery = postcss.atRule({ - name: 'media', - params: `(--breakpoint-${breakpoint})`, - }) + Object.keys(options.breakpoints).forEach(breakpoint => { + const mediaQuery = postcss.atRule({ + name: 'media', + params: `(--breakpoint-${breakpoint})`, + }) - mediaQuery.append( - rules.map(rule => { - const cloned = rule.clone() - cloned.selector = `.${breakpoint}\\:${rule.selector.slice(1)}` - return cloned - }) - ) - css.append(mediaQuery) - }) - } + mediaQuery.append(rules.map(rule => { + const cloned = rule.clone() + cloned.selector = `.${breakpoint}\\:${rule.selector.slice(1)}` + return cloned + })) + css.append(mediaQuery) + }) + } } diff --git a/src/lib/substituteClassApplyAtRules.js b/src/lib/substituteClassApplyAtRules.js index 08a498c34..03a9757c8 100644 --- a/src/lib/substituteClassApplyAtRules.js +++ b/src/lib/substituteClassApplyAtRules.js @@ -3,29 +3,29 @@ const _ = require('lodash') const findMixin = require('../util/findMixin') module.exports = function (options) { - return function (css) { - css.walkRules(rule => { - rule.walkAtRules('apply', atRule => { - const mixins = postcss.list.space(atRule.params) + return function (css) { + css.walkRules(rule => { + rule.walkAtRules('apply', atRule => { + const mixins = postcss.list.space(atRule.params) - const [customProperties, classes] = _.partition(mixins, mixin => { - return _.startsWith(mixin, '--') - }) - - const decls = _.flatMap(classes, mixin => { - return findMixin(css, mixin, () => { - throw atRule.error(`No ${mixin} class found.`) - }) - }) - - rule.insertBefore(atRule, decls) - - atRule.params = customProperties.join(' ') - - if (_.isEmpty(customProperties)) { - atRule.remove() - } - }) + const [customProperties, classes] = _.partition(mixins, mixin => { + return _.startsWith(mixin, '--') }) - } + + const decls = _.flatMap(classes, mixin => { + return findMixin(css, mixin, () => { + throw atRule.error(`No ${mixin} class found.`) + }) + }) + + rule.insertBefore(atRule, decls) + + atRule.params = customProperties.join(' ') + + if (_.isEmpty(customProperties)) { + atRule.remove() + } + }) + }) + } } diff --git a/src/util/cloneNodes.js b/src/util/cloneNodes.js index e2716e82c..f6eabc245 100644 --- a/src/util/cloneNodes.js +++ b/src/util/cloneNodes.js @@ -1,5 +1,5 @@ const _ = require('lodash') module.exports = function cloneNodes(nodes) { - return _.map(nodes, node => node.clone()) + return _.map(nodes, node => node.clone()) } diff --git a/src/util/defineClass.js b/src/util/defineClass.js index 4b491e673..9c3ff503c 100644 --- a/src/util/defineClass.js +++ b/src/util/defineClass.js @@ -9,9 +9,7 @@ module.exports = function defineClass(className, properties) { }) }) - return postcss - .rule({ - selector: `.${_.kebabCase(className)}`, - }) - .append(decls) + return postcss.rule({ + selector: `.${_.kebabCase(className)}`, + }).append(decls) } diff --git a/src/util/defineClasses.js b/src/util/defineClasses.js index 2999e954d..8113c1582 100644 --- a/src/util/defineClasses.js +++ b/src/util/defineClasses.js @@ -3,7 +3,7 @@ const _ = require('lodash') const defineClass = require('./defineClass') module.exports = function defineClasses(classes) { - return _.map(classes, function(properties, className) { - return defineClass(className, properties) - }) + return _.map(classes, function(properties, className) { + return defineClass(className, properties) + }) } diff --git a/src/util/findMixin.js b/src/util/findMixin.js index 42557c1a9..17e446626 100644 --- a/src/util/findMixin.js +++ b/src/util/findMixin.js @@ -1,17 +1,17 @@ const _ = require('lodash') module.exports = function findMixin(css, mixin, onError) { - const matches = [] + const matches = [] - css.walkRules(rule => { - if (rule.selector === mixin) { - matches.push(rule) - } - }) - - if (_.isEmpty(matches) && _.isFunction(onError)) { - onError() + css.walkRules(rule => { + if (rule.selector === mixin) { + matches.push(rule) } + }) - return _.flatten(matches.map(match => match.clone().nodes)) + if (_.isEmpty(matches) && _.isFunction(onError)) { + onError() + } + + return _.flatten(matches.map(match => match.clone().nodes)) } diff --git a/tests/defineClass.test.js b/tests/defineClass.test.js index 21cd02488..9139d4dc9 100644 --- a/tests/defineClass.test.js +++ b/tests/defineClass.test.js @@ -4,35 +4,35 @@ var _ = require('lodash') var defineClass = require('../src/util/defineClass') var flexHelper = `.flex { - display: flex + display: flex }` var inlineBlock = `.inline-block { - display: inline-block + display: inline-block }` var inlineFlexHelper = `.inline-flex { - display: inline-flex + display: inline-flex }` var backgroundColor = `.bg-1 { - background-color: #bada55 + background-color: #bada55 }` /** * Tests */ it('creates a proper single-word class with rules', () => { - let output = defineClass('flex', {display: 'flex'}) - expect(output.toString()).toEqual(flexHelper) + let output = defineClass('flex', { display: 'flex' }) + expect(output.toString()).toEqual(flexHelper) }) it('generates a rule with a kebab-case selector', () => { - let output = defineClass('inlineBlock', {display: 'inline-block'}) - expect(output.toString()).toEqual(inlineBlock) + let output = defineClass('inlineBlock', { display: 'inline-block' }) + expect(output.toString()).toEqual(inlineBlock) }) it('generates a rule with a kebab-case property name', () => { - let output = defineClass('bg-1', {backgroundColor: '#bada55'}) - expect(output.toString()).toEqual(backgroundColor) + let output = defineClass('bg-1', { backgroundColor: '#bada55' }) + expect(output.toString()).toEqual(backgroundColor) }) diff --git a/tests/defineClasses.test.js b/tests/defineClasses.test.js index 344f6221c..9481a8bfd 100644 --- a/tests/defineClasses.test.js +++ b/tests/defineClasses.test.js @@ -4,28 +4,28 @@ var _ = require('lodash') var defineClasses = require('../src/util/defineClasses') var config = { - flex: { - display: 'flex', - }, - inlineFlex: { - display: 'inline-flex', - }, + flex: { + display: 'flex', + }, + inlineFlex: { + display: 'inline-flex', + }, } var flexHelper = `.flex { - display: flex + display: flex }` var inlineFlexHelper = `.inline-flex { - display: inline-flex + display: inline-flex }` /** * Tests */ it('it generates a set of helper classes from a config', () => { - output = defineClasses(config) - expect(output).toBeInstanceOf(Array) - expect(output[0].toString()).toEqual(flexHelper) - expect(output[1].toString()).toEqual(inlineFlexHelper) + output = defineClasses(config) + expect(output).toBeInstanceOf(Array) + expect(output[0].toString()).toEqual(flexHelper) + expect(output[1].toString()).toEqual(inlineFlexHelper) })