Merge pull request #637 from tailwindcss/config-restructuring

Restructure config file for 1.0

Author: adamwathan

__tests__/applyAtRule.test.js

@@ -1,10 +1,10 @@
 import postcss from 'postcss'
 import substituteClassApplyAtRules from '../src/lib/substituteClassApplyAtRules'
 import processPlugins from '../src/util/processPlugins'
-import defaultPlugins from '../src/defaultPlugins'
+import corePlugins from '../src/corePlugins'
 import defaultConfig from '../defaultConfig.stub.js'
 
-const { utilities: defaultUtilities } = processPlugins(defaultPlugins(defaultConfig), defaultConfig)
+const { utilities: defaultUtilities } = processPlugins(corePlugins(defaultConfig), defaultConfig)
 
 function run(input, config = defaultConfig, utilities = defaultUtilities) {
   return postcss([substituteClassApplyAtRules(config, utilities)]).process(input, {
@@ -202,18 +202,13 @@ test('you can apply utility classes without using the given prefix', () => {
 
   const config = {
     ...defaultConfig,
-    options: {
-      ...defaultConfig.options,
-      prefix: 'tw-',
-    },
+    prefix: 'tw-',
   }
 
-  return run(input, config, processPlugins(defaultPlugins(defaultConfig), config).utilities).then(
-    result => {
-      expect(result.css).toEqual(expected)
-      expect(result.warnings().length).toBe(0)
-    }
-  )
+  return run(input, config, processPlugins(corePlugins(config), config).utilities).then(result => {
+    expect(result.css).toEqual(expected)
+    expect(result.warnings().length).toBe(0)
+  })
 })
 
 test('you can apply utility classes without using the given prefix when using a function for the prefix', () => {
@@ -227,18 +222,13 @@ test('you can apply utility classes without using the given prefix when using a
 
   const config = {
     ...defaultConfig,
-    options: {
-      ...defaultConfig.options,
-      prefix: () => {
-        return 'tw-'
-      },
+    prefix: () => {
+      return 'tw-'
     },
   }
 
-  return run(input, config, processPlugins(defaultPlugins(defaultConfig), config).utilities).then(
-    result => {
-      expect(result.css).toEqual(expected)
-      expect(result.warnings().length).toBe(0)
-    }
-  )
+  return run(input, config, processPlugins(corePlugins(config), config).utilities).then(result => {
+    expect(result.css).toEqual(expected)
+    expect(result.warnings().length).toBe(0)
+  })
 })

__tests__/cli.test.js

@@ -18,14 +18,12 @@ describe('cli', () => {
     it('creates a Tailwind config file', () => {
       return cli(['init']).then(() => {
         expect(utils.writeFile.mock.calls[0][0]).toEqual(constants.defaultConfigFile)
-        expect(utils.writeFile.mock.calls[0][1]).toContain('defaultConfig')
       })
     })
 
     it('creates a Tailwind config file in a custom location', () => {
       return cli(['init', 'custom.js']).then(() => {
         expect(utils.writeFile.mock.calls[0][0]).toEqual('custom.js')
-        expect(utils.writeFile.mock.calls[0][1]).toContain('defaultConfig')
       })
     })
 

__tests__/configFunction.test.js

@@ -7,16 +7,18 @@ function run(input, opts = {}) {
 
 test('it looks up values in the config using dot notation', () => {
   const input = `
-    .banana { color: config('colors.yellow'); }
+    .banana { color: config('theme.colors.yellow'); }
   `
 
   const output = `
     .banana { color: #f7cc50; }
   `
 
   return run(input, {
-    colors: {
-      yellow: '#f7cc50',
+    theme: {
+      colors: {
+        yellow: '#f7cc50',
+      },
     },
   }).then(result => {
     expect(result.css).toEqual(output)
@@ -26,16 +28,18 @@ test('it looks up values in the config using dot notation', () => {
 
 test('quotes are optional around the lookup path', () => {
   const input = `
-    .banana { color: config(colors.yellow); }
+    .banana { color: config(theme.colors.yellow); }
   `
 
   const output = `
     .banana { color: #f7cc50; }
   `
 
   return run(input, {
-    colors: {
-      yellow: '#f7cc50',
+    theme: {
+      colors: {
+        yellow: '#f7cc50',
+      },
     },
   }).then(result => {
     expect(result.css).toEqual(output)
@@ -45,16 +49,18 @@ test('quotes are optional around the lookup path', () => {
 
 test('a default value can be provided', () => {
   const input = `
-    .cookieMonster { color: config('colors.blue', #0000ff); }
+    .cookieMonster { color: config('theme.colors.blue', #0000ff); }
   `
 
   const output = `
     .cookieMonster { color: #0000ff; }
   `
 
   return run(input, {
-    colors: {
-      yellow: '#f7cc50',
+    theme: {
+      colors: {
+        yellow: '#f7cc50',
+      },
     },
   }).then(result => {
     expect(result.css).toEqual(output)
@@ -64,16 +70,18 @@ test('a default value can be provided', () => {
 
 test('quotes are preserved around default values', () => {
   const input = `
-    .heading { font-family: config('fonts.sans', "Helvetica Neue"); }
+    .heading { font-family: config('theme.fonts.sans', "Helvetica Neue"); }
   `
 
   const output = `
     .heading { font-family: "Helvetica Neue"; }
   `
 
   return run(input, {
-    fonts: {
-      serif: 'Constantia',
+    theme: {
+      fonts: {
+        serif: 'Constantia',
+      },
     },
   }).then(result => {
     expect(result.css).toEqual(output)

__tests__/containerPlugin.test.js

@@ -9,17 +9,15 @@ function css(nodes) {
 
 function config(overrides) {
   return _.defaultsDeep(overrides, {
-    screens: {
-      sm: '576px',
-      md: '768px',
-      lg: '992px',
-      xl: '1200px',
-    },
-    options: {
-      prefix: '',
-      important: false,
-      separator: ':',
+    theme: {
+      screens: {
+        sm: '576px',
+        md: '768px',
+        lg: '992px',
+        xl: '1200px',
+      },
     },
+    prefix: '',
   })
 }
 

__tests__/customConfig.test.js

@@ -33,8 +33,10 @@ test('it uses the values from the custom config file', () => {
 test('custom config can be passed as an object', () => {
   return postcss([
     tailwind({
-      screens: {
-        mobile: '400px',
+      theme: {
+        screens: {
+          mobile: '400px',
+        },
       },
     }),
   ])

__tests__/fixtures/custom-config.js

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

__tests__/fixtures/tailwind-input.css

@@ -7,6 +7,6 @@
 @responsive {
   .example {
     @apply .font-bold;
-    color: config('colors.red');
+    color: config('theme.colors.red');
   }
 }

__tests__/fixtures/tailwind-output-important.css

@@ -463,11 +463,6 @@ textarea {
   resize: vertical;
 }
 
-img {
-  max-width: 100%;
-  height: auto;
-}
-
 input::placeholder,
 textarea::placeholder {
   color: inherit;