Support plugin-specific target mode

Author: adamwathan

__tests__/plugins/divideWidth.test.js

@@ -3,6 +3,7 @@ import plugin from '../../src/plugins/divideWidth'
 
 test('generating divide width utilities', () => {
   const config = {
+    target: 'relaxed',
     theme: {
       divideWidth: {
         default: '1px',

__tests__/plugins/space.test.js

@@ -3,6 +3,7 @@ import plugin from '../../src/plugins/space'
 
 test('generating space utilities', () => {
   const config = {
+    target: 'relaxed',
     theme: {
       space: {
         '0': '0',

__tests__/sanity.test.js

@@ -52,22 +52,6 @@ it('generates the right CSS when using @import instead of @tailwind', () => {
     })
 })
 
-it('generates the right CSS in IE11 mode', () => {
-  const inputPath = path.resolve(`${__dirname}/fixtures/tailwind-input.css`)
-  const input = fs.readFileSync(inputPath, 'utf8')
-
-  return postcss([tailwind({ ...config, target: 'ie11' })])
-    .process(input, { from: inputPath })
-    .then(result => {
-      const expected = fs.readFileSync(
-        path.resolve(`${__dirname}/fixtures/tailwind-output-ie11.css`),
-        'utf8'
-      )
-
-      expect(result.css).toBe(expected)
-    })
-})
-
 it('does not add any CSS if no Tailwind features are used', () => {
   return postcss([tailwind()])
     .process('.foo { color: blue; }', { from: undefined })

__tests__/targetMode.test.js

@@ -0,0 +1,83 @@
+import fs from 'fs'
+import path from 'path'
+import _ from 'lodash'
+import postcss from 'postcss'
+import tailwind from '../src/index'
+import config from '../stubs/defaultConfig.stub.js'
+import processPlugins from '../src/util/processPlugins'
+
+function css(nodes) {
+  return postcss.root({ nodes }).toString()
+}
+
+it('generates the right CSS in IE11 mode', () => {
+  const inputPath = path.resolve(`${__dirname}/fixtures/tailwind-input.css`)
+  const input = fs.readFileSync(inputPath, 'utf8')
+
+  return postcss([tailwind({ ...config, target: 'ie11' })])
+    .process(input, { from: inputPath })
+    .then(result => {
+      const expected = fs.readFileSync(
+        path.resolve(`${__dirname}/fixtures/tailwind-output-ie11.css`),
+        'utf8'
+      )
+
+      expect(result.css).toBe(expected)
+    })
+})
+
+test('plugins can request the target for a specific plugin key', () => {
+  const { utilities } = processPlugins(
+    [
+      function({ addUtilities, target }) {
+        addUtilities({
+          '.testA': {
+            target: target('testPluginA'),
+          },
+        })
+      },
+      function({ addUtilities, target }) {
+        addUtilities({
+          '.testB': {
+            target: target('testPluginB'),
+          },
+        })
+      },
+      function({ addUtilities, target }) {
+        addUtilities({
+          '.testC': {
+            target: target('testPluginC'),
+          },
+        })
+      },
+    ],
+    {
+      ...config,
+      target: [
+        'ie11',
+        {
+          testPluginA: 'modern',
+          testPluginB: 'relaxed',
+        },
+      ],
+    }
+  )
+
+  expect(css(utilities)).toMatchCss(`
+    @variants {
+      .testA {
+        target: modern
+      }
+    }
+    @variants {
+      .testB {
+        target: relaxed
+      }
+    }
+    @variants {
+      .testC {
+        target: ie11
+      }
+    }
+    `)
+})

__tests__/util/invokePlugin.js

@@ -16,6 +16,15 @@ export default function(plugin, config) {
 
       return getConfigValue(`variants.${path}`, defaultValue)
     },
+    target: path => {
+      if (_.isString(config.target)) {
+        return config.target
+      }
+
+      const [defaultTarget, targetOverrides] = getConfigValue('target')
+
+      return _.get(targetOverrides, path, defaultTarget)
+    },
     addUtilities(utilities, variants) {
       addedUtilities.push([utilities, variants])
     },

src/plugins/backgroundColor.js

@@ -3,8 +3,8 @@ import flattenColorPalette from '../util/flattenColorPalette'
 import withAlphaVariable from '../util/withAlphaVariable'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants, config }) {
-    if (config('target') === 'ie11') {
+  return function({ addUtilities, e, theme, variants, target }) {
+    if (target('backgroundColor') === 'ie11') {
       const utilities = _.fromPairs(
         _.map(flattenColorPalette(theme('backgroundColor')), (value, modifier) => {
           return [`.${e(`bg-${modifier}`)}`, { 'background-color': value }]

src/plugins/backgroundOpacity.js

@@ -1,13 +1,13 @@
 import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return function({ config, ...args }) {
-    if (config('target') === 'ie11') {
+  return function({ target, ...args }) {
+    if (target('backgroundOpacity') === 'ie11') {
       return
     }
 
     createUtilityPlugin('backgroundOpacity', [['bg-opacity', ['--bg-opacity']]])({
-      config,
+      target,
       ...args,
     })
   }

src/plugins/borderColor.js

@@ -3,8 +3,8 @@ import flattenColorPalette from '../util/flattenColorPalette'
 import withAlphaVariable from '../util/withAlphaVariable'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants, config }) {
-    if (config('target') === 'ie11') {
+  return function({ addUtilities, e, theme, variants, target }) {
+    if (target('borderColor') === 'ie11') {
       const colors = flattenColorPalette(theme('borderColor'))
 
       const utilities = _.fromPairs(

src/plugins/borderOpacity.js

@@ -1,13 +1,13 @@
 import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
-  return function({ config, ...args }) {
-    if (config('target') === 'ie11') {
+  return function({ target, ...args }) {
+    if (target('borderOpacity') === 'ie11') {
       return
     }
 
     createUtilityPlugin('borderOpacity', [['border-opacity', ['--border-opacity']]])({
-      config,
+      target,
       ...args,
     })
   }

src/plugins/display.js

@@ -1,5 +1,5 @@
 export default function() {
-  return function({ addUtilities, variants, config }) {
+  return function({ addUtilities, variants, target }) {
     addUtilities(
       {
         '.block': {
@@ -44,7 +44,7 @@ export default function() {
         '.table-row': {
           display: 'table-row',
         },
-        ...(config('target') === 'ie11'
+        ...(target('display') === 'ie11'
           ? {}
           : {
               '.flow-root': {