Merge pull request tailwindlabs#233 from tailwindcss/modularize

Allow enabling/disabling modules and specifying variants from config file

Author: adamwathan

__tests__/fixtures/tailwind-output.css

@@ -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)
+})

__tests__/generateModules.test.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'],
+    }
   },
 
 }

defaultConfig.stub.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/forms.js renamed to src/generators/appearance.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,
     })
-  )
+  })
 }