Support plugin-specific target mode

__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': {

src/plugins/divideColor.js

@@ -3,10 +3,10 @@ import flattenColorPalette from '../util/flattenColorPalette'
 import withAlphaVariable from '../util/withAlphaVariable'
 
 export default function() {
- return function({ addUtilities, e, theme, variants, config }) {
+ return function({ addUtilities, e, theme, variants, target }) {
  const colors = flattenColorPalette(theme('divideColor'))
 
- if (config('target') === 'ie11') {
+ if (target('divideColor') === 'ie11') {
  const utilities = _.fromPairs(
  _.map(_.omit(colors, 'default'), (value, modifier) => {
  return [

src/plugins/divideOpacity.js

@@ -1,8 +1,8 @@
 import _ from 'lodash'
 
 export default function() {
- return function({ addUtilities, e, theme, variants, config }) {
- if (config('target') === 'ie11') {
+ return function({ addUtilities, e, theme, variants, target }) {
+ if (target('divideOpacity') === 'ie11') {
  return
  }
 

src/plugins/divideWidth.js

@@ -1,8 +1,8 @@
 import _ from 'lodash'
 
 export default function() {
- return function({ addUtilities, e, theme, variants, config }) {
- if (config('target') === 'ie11') {
+ return function({ addUtilities, e, theme, variants, target }) {
+ if (target('divideWidth') === 'ie11') {
  const generators = [
  (size, modifier) => ({
  [`.${e(`divide-y${modifier}`)} > :not(template) ~ :not(template)`]: {

src/plugins/gap.js

@@ -1,15 +1,15 @@
 import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
- return function({ config, ...args }) {
- if (config('target') === 'ie11') {
+ return function({ target, ...args }) {
+ if (target('gap') === 'ie11') {
  return
  }
 
  createUtilityPlugin('gap', [
  ['gap', ['gridGap', 'gap']],
  ['col-gap', ['gridColumnGap', 'columnGap']],
  ['row-gap', ['gridRowGap', 'rowGap']],
- ])({ config, ...args })
+ ])({ target, ...args })
  }
 }

src/plugins/gridAutoFlow.js

@@ -1,6 +1,6 @@
 export default function() {
- return function({ addUtilities, variants, config }) {
- if (config('target') === 'ie11') {
+ return function({ addUtilities, variants, target }) {
+ if (target('gridAutoFlow') === 'ie11') {
  return
  }
 

src/plugins/gridColumn.js

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

src/plugins/gridColumnEnd.js

@@ -1,11 +1,11 @@
 import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
- return function({ config, ...args }) {
- if (config('target') === 'ie11') {
+ return function({ target, ...args }) {
+ if (target('gridColumnEnd') === 'ie11') {
  return
  }
 
- createUtilityPlugin('gridColumnEnd', [['col-end', ['gridColumnEnd']]])({ config, ...args })
+ createUtilityPlugin('gridColumnEnd', [['col-end', ['gridColumnEnd']]])({ target, ...args })
  }
 }

src/plugins/gridColumnStart.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('gridColumnStart') === 'ie11') {
  return
  }
 
  createUtilityPlugin('gridColumnStart', [['col-start', ['gridColumnStart']]])({
- config,
+ target,
  ...args,
  })
  }

src/plugins/gridRow.js

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

src/plugins/gridRowEnd.js

@@ -1,11 +1,11 @@
 import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
- return function({ config, ...args }) {
- if (config('target') === 'ie11') {
+ return function({ target, ...args }) {
+ if (target('gridRowEnd') === 'ie11') {
  return
  }
 
- createUtilityPlugin('gridRowEnd', [['row-end', ['gridRowEnd']]])({ config, ...args })
+ createUtilityPlugin('gridRowEnd', [['row-end', ['gridRowEnd']]])({ target, ...args })
  }
 }

src/plugins/gridRowStart.js

@@ -1,11 +1,11 @@
 import createUtilityPlugin from '../util/createUtilityPlugin'
 
 export default function() {
- return function({ config, ...args }) {
- if (config('target') === 'ie11') {
+ return function({ target, ...args }) {
+ if (target('gridRowStart') === 'ie11') {
  return
  }
 
- createUtilityPlugin('gridRowStart', [['row-start', ['gridRowStart']]])({ config, ...args })
+ createUtilityPlugin('gridRowStart', [['row-start', ['gridRowStart']]])({ target, ...args })
  }
 }

src/plugins/gridTemplateColumns.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('gridTemplateColumns') === 'ie11') {
  return
  }
 
  createUtilityPlugin('gridTemplateColumns', [['grid-cols', ['gridTemplateColumns']]])({
- config,
+ target,
  ...args,
  })
  }

src/plugins/gridTemplateRows.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('gridTemplateRows') === 'ie11') {
  return
  }
 
  createUtilityPlugin('gridTemplateRows', [['grid-rows', ['gridTemplateRows']]])({
- config,
+ target,
  ...args,
  })
  }