Merge pull request #1162 from tailwindcss/allow-plugins-to-modify-config

Allow plugins to add their own config file to be resolved with the user's custom config

Author: adamwathan

.eslintrc

@@ -9,6 +9,7 @@
   "extends": ["eslint-config-postcss", "prettier"],
   "plugins": ["prettier"],
   "rules": {
+    "no-unused-vars": [2, {"args": "all", "argsIgnorePattern": "^_"}],
     "prettier/prettier": [
       "error",
       {

__tests__/processPlugins.test.js

@@ -47,7 +47,7 @@ test('plugins can create utilities with object syntax', () => {
         object-fit: cover
       }
     }
-    `)
+  `)
 })
 
 test('plugins can create utilities with arrays of objects', () => {
@@ -1206,3 +1206,84 @@ test('prefix will prefix all classes in a selector', () => {
     }
     `)
 })
+
+test('plugins can be provided as an object with a handler function', () => {
+  const { components, utilities } = processPlugins(
+    [
+      {
+        handler({ addUtilities }) {
+          addUtilities({
+            '.object-fill': {
+              'object-fit': 'fill',
+            },
+            '.object-contain': {
+              'object-fit': 'contain',
+            },
+            '.object-cover': {
+              'object-fit': 'cover',
+            },
+          })
+        },
+      },
+    ],
+    makeConfig()
+  )
+
+  expect(components.length).toBe(0)
+  expect(css(utilities)).toMatchCss(`
+    @variants {
+      .object-fill {
+        object-fit: fill
+      }
+      .object-contain {
+        object-fit: contain
+      }
+      .object-cover {
+        object-fit: cover
+      }
+    }
+  `)
+})
+
+test('plugins can provide a config but no handler', () => {
+  const { components, utilities } = processPlugins(
+    [
+      {
+        config: {
+          prefix: 'tw-',
+        },
+      },
+      {
+        handler({ addUtilities }) {
+          addUtilities({
+            '.object-fill': {
+              'object-fit': 'fill',
+            },
+            '.object-contain': {
+              'object-fit': 'contain',
+            },
+            '.object-cover': {
+              'object-fit': 'cover',
+            },
+          })
+        },
+      },
+    ],
+    makeConfig()
+  )
+
+  expect(components.length).toBe(0)
+  expect(css(utilities)).toMatchCss(`
+    @variants {
+      .object-fill {
+        object-fit: fill
+      }
+      .object-contain {
+        object-fit: contain
+      }
+      .object-cover {
+        object-fit: cover
+      }
+    }
+  `)
+})