Merge pull request tailwindlabs#620 from tailwindcss/modules-as-plugins

Convert built-in utility modules to private plugins

Author: adamwathan

__tests__/applyAtRule.test.js

@@ -1,12 +1,15 @@
 import postcss from 'postcss'
-import plugin from '../src/lib/substituteClassApplyAtRules'
-import generateUtilities from '../src/util/generateUtilities'
+import substituteClassApplyAtRules from '../src/lib/substituteClassApplyAtRules'
+import processPlugins from '../src/util/processPlugins'
+import defaultPlugins from '../src/defaultPlugins'
 import defaultConfig from '../defaultConfig.stub.js'
 
-const defaultUtilities = generateUtilities(defaultConfig, [])
+const { utilities: defaultUtilities } = processPlugins(defaultPlugins(defaultConfig), defaultConfig)
 
 function run(input, config = defaultConfig, utilities = defaultUtilities) {
-  return postcss([plugin(config, utilities)]).process(input, { from: undefined })
+  return postcss([substituteClassApplyAtRules(config, utilities)]).process(input, {
+    from: undefined,
+  })
 }
 
 test("it copies a class's declarations into itself", () => {
@@ -206,10 +209,12 @@ test('you can apply utility classes without using the given prefix', () => {
     experiments: { shadowLookup: true },
   }
 
-  return run(input, config, generateUtilities(config, [])).then(result => {
-    expect(result.css).toEqual(expected)
-    expect(result.warnings().length).toBe(0)
-  })
+  return run(input, config, processPlugins(defaultPlugins(defaultConfig), 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', () => {
@@ -232,8 +237,10 @@ test('you can apply utility classes without using the given prefix when using a
     experiments: { shadowLookup: true },
   }
 
-  return run(input, config, generateUtilities(config, [])).then(result => {
-    expect(result.css).toEqual(expected)
-    expect(result.warnings().length).toBe(0)
-  })
+  return run(input, config, processPlugins(defaultPlugins(defaultConfig), config).utilities).then(
+    result => {
+      expect(result.css).toEqual(expected)
+      expect(result.warnings().length).toBe(0)
+    }
+  )
 })

__tests__/containerPlugin.test.js

@@ -7,28 +7,24 @@ function css(nodes) {
   return postcss.root({ nodes }).toString()
 }
 
-function processPluginsWithValidConfig(config) {
-  return processPlugins(
-    _.defaultsDeep(config, {
-      screens: {
-        sm: '576px',
-        md: '768px',
-        lg: '992px',
-        xl: '1200px',
-      },
-      options: {
-        prefix: '',
-        important: false,
-        separator: ':',
-      },
-    })
-  )
+function config(overrides) {
+  return _.defaultsDeep(overrides, {
+    screens: {
+      sm: '576px',
+      md: '768px',
+      lg: '992px',
+      xl: '1200px',
+    },
+    options: {
+      prefix: '',
+      important: false,
+      separator: ':',
+    },
+  })
 }
 
-test('options are not required', () => {
-  const { components } = processPluginsWithValidConfig({
-    plugins: [container()],
-  })
+test.only('options are not required', () => {
+  const { components } = processPlugins([container()], config())
 
   expect(css(components)).toMatchCss(`
     .container { width: 100% }
@@ -47,17 +43,18 @@ test('options are not required', () => {
   `)
 })
 
-test('screens can be specified explicitly', () => {
-  const { components } = processPluginsWithValidConfig({
-    plugins: [
+test.only('screens can be specified explicitly', () => {
+  const { components } = processPlugins(
+    [
       container({
         screens: {
           sm: '400px',
           lg: '500px',
         },
       }),
     ],
-  })
+    config()
+  )
 
   expect(css(components)).toMatchCss(`
     .container { width: 100% }
@@ -70,14 +67,15 @@ test('screens can be specified explicitly', () => {
   `)
 })
 
-test('screens can be an array', () => {
-  const { components } = processPluginsWithValidConfig({
-    plugins: [
+test.only('screens can be an array', () => {
+  const { components } = processPlugins(
+    [
       container({
         screens: ['400px', '500px'],
       }),
     ],
-  })
+    config()
+  )
 
   expect(css(components)).toMatchCss(`
     .container { width: 100% }
@@ -90,14 +88,15 @@ test('screens can be an array', () => {
   `)
 })
 
-test('the container can be centered by default', () => {
-  const { components } = processPluginsWithValidConfig({
-    plugins: [
+test.only('the container can be centered by default', () => {
+  const { components } = processPlugins(
+    [
       container({
         center: true,
       }),
     ],
-  })
+    config()
+  )
 
   expect(css(components)).toMatchCss(`
     .container {
@@ -120,14 +119,15 @@ test('the container can be centered by default', () => {
   `)
 })
 
-test('horizontal padding can be included by default', () => {
-  const { components } = processPluginsWithValidConfig({
-    plugins: [
+test.only('horizontal padding can be included by default', () => {
+  const { components } = processPlugins(
+    [
       container({
         padding: '2rem',
       }),
     ],
-  })
+    config()
+  )
 
   expect(css(components)).toMatchCss(`
     .container {
@@ -150,9 +150,9 @@ test('horizontal padding can be included by default', () => {
   `)
 })
 
-test('setting all options at once', () => {
-  const { components } = processPluginsWithValidConfig({
-    plugins: [
+test.only('setting all options at once', () => {
+  const { components } = processPlugins(
+    [
       container({
         screens: {
           sm: '400px',
@@ -162,7 +162,8 @@ test('setting all options at once', () => {
         padding: '2rem',
       }),
     ],
-  })
+    config()
+  )
 
   expect(css(components)).toMatchCss(`
     .container {