Allow enabling/disabling modules and specifying variants from config file

__tests__/generateModules.test.js

@@ -0,0 +1,133 @@
+import generateModules from '../src/util/generateModules'
+import defineClasses from '../src/util/defineClasses'
+
+function textAlign() {
+  return defineClasses({
+    'text-left': { 'text-align': 'left' },
+    'text-right': { 'text-align': 'right' },
+    'text-center': { 'text-align': 'center' },
+  })
+}
+
+function display() {
+  return defineClasses({
+    block: { display: 'block' },
+    inline: { display: 'inline' },
+    'inline-block': { display: 'inline-block' },
+  })
+}
+
+function borderStyle() {
+  return defineClasses({
+    'border-solid': { 'border-style': 'solid' },
+    'border-dashed': { 'border-style': 'dashed' },
+    'border-dotted': { 'border-style': 'dotted' },
+  })
+}
+
+test('an empty variants list generates a @variants at-rule with no parameters', () => {
+  const result = generateModules([{ name: 'textAlign', generator: textAlign }], {
+    textAlign: [],
+  })
+
+  const expected = `
+    @variants {
+      .text-left { text-align: left }
+      .text-right { text-align: right }
+      .text-center { text-align: center }
+    }
+  `
+  expect(result.toString()).toMatchCss(expected)
+})
+
+test('a `false` variants list generates no output', () => {
+  const result = generateModules([{ name: 'textAlign', generator: textAlign }], {
+    textAlign: false,
+  })
+
+  expect(result.toString()).toMatchCss('')
+})
+
+test('specified variants are included in the @variants at-rule', () => {
+  const result = generateModules([{ name: 'textAlign', generator: textAlign }], {
+    textAlign: ['responsive', 'hover'],
+  })
+
+  const expected = `
+    @variants responsive, hover {
+      .text-left { text-align: left }
+      .text-right { text-align: right }
+      .text-center { text-align: center }
+    }
+  `
+  expect(result.toString()).toMatchCss(expected)
+})
+
+test('options must provide variants for every module', () => {
+  expect(() => {
+    generateModules(
+      [{ name: 'textAlign', generator: textAlign }, { name: 'display', generator: display }],
+      {
+        textAlign: [],
+      }
+    )
+  }).toThrow()
+})
+
+test('variants can be different for each module', () => {
+  const result = generateModules(
+    [
+      { name: 'textAlign', generator: textAlign },
+      { name: 'display', generator: display },
+      { name: 'borderStyle', generator: borderStyle },
+    ],
+    {
+      textAlign: [],
+      display: false,
+      borderStyle: ['responsive', 'hover', 'focus'],
+    }
+  )
+
+  const expected = `
+    @variants {
+      .text-left { text-align: left }
+      .text-right { text-align: right }
+      .text-center { text-align: center }
+    }
+
+    @variants responsive, hover, focus {
+      .border-solid { border-style: solid }
+      .border-dashed { border-style: dashed }
+      .border-dotted { border-style: dotted }
+    }
+  `
+  expect(result.toString()).toMatchCss(expected)
+})
+
+test('generators can reference the generatorOptions object', () => {
+  const result = generateModules(
+    [
+      {
+        name: 'parameterized',
+        generator: generatorParams => {
+          return defineClasses({
+            foo: { color: generatorParams.color },
+          })
+        },
+      },
+    ],
+    {
+      parameterized: [],
+    },
+    {
+      color: 'blue',
+    }
+  )
+
+  const expected = `
+    @variants {
+      .foo { color: blue }
+    }
+  `
+  expect(result.toString()).toMatchCss(expected)
+})

defaultConfig.stub.js

@@ -770,6 +770,49 @@ module.exports = {
   options: {
     prefix: '',
     important: false,
+    modules: {
+      appearance: ['responsive'],
+      backgroundColors: ['responsive', 'hover'],
+      backgroundPosition: ['responsive'],
+      backgroundSize: ['responsive'],
+      borderColors: ['responsive', 'hover'],
+      borderRadius: ['responsive'],
+      borderStyle: ['responsive'],
+      borderWidths: ['responsive'],
+      cursor: ['responsive'],
+      display: ['responsive'],
+      flexbox: ['responsive'],
+      float: ['responsive'],
+      fonts: ['responsive'],
+      fontWeights: ['responsive', 'hover'],
+      height: ['responsive'],
+      leading: ['responsive'],
+      lists: ['responsive'],
+      margin: ['responsive'],
+      maxHeight: ['responsive'],
+      maxWidth: ['responsive'],
+      minHeight: ['responsive'],
+      minWidth: ['responsive'],
+      negativeMargin: ['responsive'],
+      opacity: ['responsive'],
+      overflow: ['responsive'],
+      padding: ['responsive'],
+      pointerEvents: ['responsive'],
+      position: ['responsive'],
+      resize: ['responsive'],
+      shadows: ['responsive'],
+      textAlign: ['responsive'],
+      textColors: ['responsive', 'hover'],
+      textSizes: ['responsive'],
+      textStyle: ['responsive', 'hover'],
+      tracking: ['responsive'],
+      userSelect: ['responsive'],
+      verticalAlign: ['responsive'],
+      visibility: ['responsive'],
+      whitespace: ['responsive'],
+      width: ['responsive'],
+      zIndex: ['responsive'],
+    }
   },
 
 }

src/generators/backgroundColors.js

@@ -1,13 +1,10 @@
 import _ from 'lodash'
 import defineClass from '../util/defineClass'
-import hoverable from '../util/hoverable'
 
 export default function({ backgroundColors }) {
-  return hoverable(
-    _.map(backgroundColors, (color, className) => {
-      return defineClass(`bg-${className}`, {
-        'background-color': color,
-      })
+  return _.map(backgroundColors, (color, className) => {
+    return defineClass(`bg-${className}`, {
+      'background-color': color,
     })
-  )
+  })
 }

src/generators/borderColors.js

@@ -1,13 +1,10 @@
 import _ from 'lodash'
 import defineClass from '../util/defineClass'
-import hoverable from '../util/hoverable'
 
 export default function({ borderColors }) {
-  return hoverable(
-    _.map(_.omit(borderColors, 'default'), (color, className) => {
-      return defineClass(`border-${className}`, {
-        'border-color': color,
-      })
+  return _.map(_.omit(borderColors, 'default'), (color, className) => {
+    return defineClass(`border-${className}`, {
+      'border-color': color,
     })
-  )
+  })
 }

src/generators/fontWeights.js

@@ -0,0 +1,10 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+export default function({ fontWeights }) {
+  return _.map(fontWeights, (weight, modifier) => {
+    return defineClass(`font-${modifier}`, {
+      'font-weight': `${weight}`,
+    })
+  })
+}

src/generators/height.js

@@ -0,0 +1,14 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+function defineHeights(heights) {
+  return _.map(heights, (size, modifer) => {
+    return defineClass(`h-${modifer}`, {
+      height: `${size}`,
+    })
+  })
+}
+
+export default function(config) {
+  return _.flatten([defineHeights(config.height)])
+}

src/generators/margin.js

@@ -0,0 +1,31 @@
+import _ from 'lodash'
+import defineClasses from '../util/defineClasses'
+
+function defineMargin(margin) {
+  const generators = [
+    (size, modifier) =>
+      defineClasses({
+        [`m-${modifier}`]: { margin: `${size}` },
+      }),
+    (size, modifier) =>
+      defineClasses({
+        [`my-${modifier}`]: { 'margin-top': `${size}`, 'margin-bottom': `${size}` },
+        [`mx-${modifier}`]: { 'margin-left': `${size}`, 'margin-right': `${size}` },
+      }),
+    (size, modifier) =>
+      defineClasses({
+        [`mt-${modifier}`]: { 'margin-top': `${size}` },
+        [`mr-${modifier}`]: { 'margin-right': `${size}` },
+        [`mb-${modifier}`]: { 'margin-bottom': `${size}` },
+        [`ml-${modifier}`]: { 'margin-left': `${size}` },
+      }),
+  ]
+
+  return _.flatMap(generators, generator => {
+    return _.flatMap(margin, generator)
+  })
+}
+
+export default function({ margin }) {
+  return _.flatten([defineMargin(margin)])
+}

src/generators/maxHeight.js

@@ -0,0 +1,14 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+function defineMaxHeights(heights) {
+  return _.map(heights, (size, modifer) => {
+    return defineClass(`max-h-${modifer}`, {
+      'max-height': `${size}`,
+    })
+  })
+}
+
+export default function(config) {
+  return _.flatten([defineMaxHeights(config.maxHeight)])
+}

src/generators/maxWidth.js

@@ -0,0 +1,14 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+function defineMaxWidths(widths) {
+  return _.map(widths, (size, modifer) => {
+    return defineClass(`max-w-${modifer}`, {
+      'max-width': `${size}`,
+    })
+  })
+}
+
+export default function(config) {
+  return _.flatten([defineMaxWidths(config.maxWidth)])
+}

src/generators/minHeight.js

@@ -0,0 +1,14 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+function defineMinHeights(heights) {
+  return _.map(heights, (size, modifer) => {
+    return defineClass(`min-h-${modifer}`, {
+      'min-height': `${size}`,
+    })
+  })
+}
+
+export default function(config) {
+  return _.flatten([defineMinHeights(config.minHeight)])
+}

src/generators/minWidth.js

@@ -0,0 +1,14 @@
+import _ from 'lodash'
+import defineClass from '../util/defineClass'
+
+function defineMinWidths(widths) {
+  return _.map(widths, (size, modifer) => {
+    return defineClass(`min-w-${modifer}`, {
+      'min-width': `${size}`,
+    })
+  })
+}
+
+export default function(config) {
+  return _.flatten([defineMinWidths(config.minWidth)])
+}

src/generators/negativeMargin.js

@@ -0,0 +1,33 @@
+import _ from 'lodash'
+import defineClasses from '../util/defineClasses'
+
+function defineNegativeMargin(negativeMargin) {
+  const generators = [
+    (size, modifier) =>
+      defineClasses({
+        [`-m-${modifier}`]: { margin: `${size}` },
+      }),
+    (size, modifier) =>
+      defineClasses({
+        [`-my-${modifier}`]: { 'margin-top': `${size}`, 'margin-bottom': `${size}` },
+        [`-mx-${modifier}`]: { 'margin-left': `${size}`, 'margin-right': `${size}` },
+      }),
+    (size, modifier) =>
+      defineClasses({
+        [`-mt-${modifier}`]: { 'margin-top': `${size}` },
+        [`-mr-${modifier}`]: { 'margin-right': `${size}` },
+        [`-mb-${modifier}`]: { 'margin-bottom': `${size}` },
+        [`-ml-${modifier}`]: { 'margin-left': `${size}` },
+      }),
+  ]
+
+  return _.flatMap(generators, generator => {
+    return _.flatMap(negativeMargin, (size, modifier) => {
+      return generator(`${size}` === '0' ? `${size}` : `-${size}`, modifier)
+    })
+  })
+}
+
+export default function({ negativeMargin }) {
+  return _.flatten([defineNegativeMargin(negativeMargin)])
+}