Merge pull request #240 from tailwindcss/move-modules-key

[0.3] Move `modules` key out of `options` and up to top level

__tests__/customConfig.test.js

@@ -0,0 +1,30 @@
+import path from 'path'
+import postcss from 'postcss'
+import tailwind from '../src/index'
+
+test('it uses the values from the custom config file', () => {
+  return postcss([tailwind(path.resolve(`${__dirname}/fixtures/customConfig.js`))])
+    .process(
+      `
+      @responsive {
+        .foo {
+          color: blue;
+        }
+      }
+    `
+    )
+    .then(result => {
+      const expected = `
+        .foo {
+          color: blue;
+        }
+        @media (min-width: 400px) {
+          .mobile\\:foo {
+            color: blue;
+          }
+        }
+      `
+
+      expect(result.css).toMatchCss(expected)
+    })
+})

__tests__/fixtures/customConfig.js

@@ -0,0 +1,5 @@
+module.exports = {
+  screens: {
+    mobile: '400px',
+  },
+}

__tests__/mergeConfigWithDefaults.test.js

@@ -0,0 +1,79 @@
+import mergeConfigWithDefaults from '../src/util/mergeConfigWithDefaults'
+
+test('missing top level keys are pulled from the default config', () => {
+  const userConfig = {
+    colors: { red: '#ff0000' },
+    modules: {},
+    options: {},
+  }
+
+  const defaultConfig = {
+    colors: { green: '#00ff00' },
+    screens: {
+      sm: '576px',
+    },
+    modules: {},
+    options: {},
+  }
+
+  const result = mergeConfigWithDefaults(userConfig, defaultConfig)
+
+  expect(result).toEqual({
+    colors: { red: '#ff0000' },
+    screens: {
+      sm: '576px',
+    },
+    modules: {},
+    options: {},
+  })
+})
+
+test('user modules are merged with default modules', () => {
+  const userConfig = {
+    modules: { flexbox: false },
+    options: {},
+  }
+
+  const defaultConfig = {
+    modules: {
+      flexbox: ['responsive'],
+      textAlign: ['responsive'],
+    },
+    options: {},
+  }
+
+  const result = mergeConfigWithDefaults(userConfig, defaultConfig)
+
+  expect(result).toEqual({
+    modules: {
+      flexbox: false,
+      textAlign: ['responsive'],
+    },
+    options: {},
+  })
+})
+
+test('user options are merged with default options', () => {
+  const userConfig = {
+    modules: {},
+    options: { prefix: 'tw-' },
+  }
+
+  const defaultConfig = {
+    modules: {},
+    options: {
+      prefix: '-',
+      important: false,
+    },
+  }
+
+  const result = mergeConfigWithDefaults(userConfig, defaultConfig)
+
+  expect(result).toEqual({
+    modules: {},
+    options: {
+      prefix: 'tw-',
+      important: false,
+    },
+  })
+})

defaultConfig.stub.js

@@ -757,6 +757,65 @@ module.exports = {
   },
 
 
+  /*
+  |-----------------------------------------------------------------------------
+  | Modules                  https://tailwindcss.com/docs/configuration#modules
+  |-----------------------------------------------------------------------------
+  |
+  | Here is where you control which modules are generated and what variants are
+  | generated for each of those modules.
+  |
+  | Currently supported variants: 'responsive', 'hover', 'focus'
+  |
+  | To disable a module completely, use `false` instead of an array.
+  |
+  */
+
+  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'],
+  },
+
+
   /*
   |-----------------------------------------------------------------------------
   | Options                  https://tailwindcss.com/docs/configuration#options
@@ -770,49 +829,6 @@ 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'],
-    }
   },
 
 }

package.json

@@ -69,7 +69,8 @@
     ]
   },
   "jest": {
-    "setupTestFrameworkScriptFile": "<rootDir>/jest/customMatchers.js"
+    "setupTestFrameworkScriptFile": "<rootDir>/jest/customMatchers.js",
+    "testPathIgnorePatterns": ["<rootDir>/__tests__/fixtures/"]
   },
   "engines": {
     "node": ">=6.9.0"

src/index.js

@@ -15,13 +15,7 @@ import substituteResponsiveAtRules from './lib/substituteResponsiveAtRules'
 import substituteScreenAtRules from './lib/substituteScreenAtRules'
 import substituteClassApplyAtRules from './lib/substituteClassApplyAtRules'
 
-function mergeConfigWithDefaults(config) {
-  const defaultConfig = require('../defaultConfig')()
-  _.defaults(config, defaultConfig)
-  config.options = _.defaults(config.options, defaultConfig.options)
-  config.options.modules = _.defaults(config.options.modules, defaultConfig.options.modules)
-  return config
-}
+import mergeConfigWithDefaults from './util/mergeConfigWithDefaults'
 
 const plugin = postcss.plugin('tailwind', config => {
   const plugins = []
@@ -36,7 +30,7 @@ const plugin = postcss.plugin('tailwind', config => {
     }
 
     delete require.cache[require.resolve(path.resolve(config))]
-    return mergeConfigWithDefaults(require(path.resolve(config)))
+    return mergeConfigWithDefaults(require(path.resolve(config)), require('../defaultConfig')())
   }
 
   return postcss(

src/lib/substituteTailwindUtilitiesAtRules.js

@@ -14,11 +14,7 @@ export default function(config) {
         return
       }
 
-      const utilities = generateModules(
-        utilityModules,
-        unwrappedConfig.options.modules,
-        unwrappedConfig
-      )
+      const utilities = generateModules(utilityModules, unwrappedConfig.modules, unwrappedConfig)
 
       if (_.get(unwrappedConfig, 'options.important', false)) {
         utilities.walkDecls(decl => (decl.important = true))

src/util/mergeConfigWithDefaults.js

@@ -0,0 +1,8 @@
+import _ from 'lodash'
+
+export default function(userConfig, defaultConfig) {
+  _.defaults(userConfig, defaultConfig)
+  userConfig.modules = _.defaults(userConfig.modules, defaultConfig.modules)
+  userConfig.options = _.defaults(userConfig.options, defaultConfig.options)
+  return userConfig
+}