Finish proof of concept for target: 'ie11' feature

__tests__/sanity.test.js

@@ -52,6 +52,22 @@ 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 })

scripts/rebuildFixtures.js

@@ -39,6 +39,11 @@ Promise.all([
     to: '__tests__/fixtures/tailwind-output-important.css',
     config: { important: true },
   }),
+  build({
+    from: '__tests__/fixtures/tailwind-input.css',
+    to: '__tests__/fixtures/tailwind-output-ie11.css',
+    config: { target: 'ie11' },
+  }),
 ]).then(() => {
   console.log('\nFinished rebuilding fixtures.')
   console.log(

src/plugins/divideColor.js

@@ -3,9 +3,24 @@ import flattenColorPalette from '../util/flattenColorPalette'
 import withAlphaVariable from '../util/withAlphaVariable'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, theme, variants, config }) {
     const colors = flattenColorPalette(theme('divideColor'))
 
+    if (config('target') === 'ie11') {
+      const utilities = _.fromPairs(
+        _.map(_.omit(colors, 'default'), (value, modifier) => {
+          return [
+            `.${e(`divide-${modifier}`)} > :not(template) ~ :not(template)`,
+            { 'border-color': value },
+          ]
+        })
+      )
+
+      addUtilities(utilities, variants('textColor'))
+
+      return
+    }
+
     const utilities = _.fromPairs(
       _.map(_.omit(colors, 'default'), (value, modifier) => {
         return [

src/plugins/divideWidth.js

@@ -1,7 +1,30 @@
 import _ from 'lodash'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, theme, variants, config }) {
+    if (config('target') === 'ie11') {
+      const generators = [
+        (size, modifier) => ({
+          [`.${e(`divide-y${modifier}`)} > :not(template) ~ :not(template)`]: {
+            'border-top-width': size,
+          },
+          [`.${e(`divide-x${modifier}`)} > :not(template) ~ :not(template)`]: {
+            'border-left-width': size,
+          },
+        }),
+      ]
+
+      const utilities = _.flatMap(generators, generator => {
+        return _.flatMap(theme('divideWidth'), (value, modifier) => {
+          return generator(value, modifier === 'default' ? '' : `-${modifier}`)
+        })
+      })
+
+      addUtilities(utilities, variants('divideWidth'))
+
+      return
+    }
+
     const generators = [
       (size, modifier) => ({
         [`.${e(`divide-y${modifier}`)} > :not(template) ~ :not(template)`]: {

src/plugins/space.js

@@ -2,7 +2,32 @@ import _ from 'lodash'
 import prefixNegativeModifiers from '../util/prefixNegativeModifiers'
 
 export default function() {
-  return function({ addUtilities, e, theme, variants }) {
+  return function({ addUtilities, e, theme, variants, config }) {
+    if (config('target') === 'ie11') {
+      const generators = [
+        (size, modifier) => ({
+          [`.${e(
+            prefixNegativeModifiers('space-y', modifier)
+          )} > :not(template) ~ :not(template)`]: {
+            'margin-top': size,
+          },
+          [`.${e(
+            prefixNegativeModifiers('space-x', modifier)
+          )} > :not(template) ~ :not(template)`]: {
+            'margin-left': size,
+          },
+        }),
+      ]
+
+      const utilities = _.flatMap(generators, generator => {
+        return _.flatMap(theme('space'), generator)
+      })
+
+      addUtilities(utilities, variants('space'))
+
+      return
+    }
+
     const generators = [
       (size, modifier) => ({
         [`.${e(prefixNegativeModifiers('space-y', modifier))} > :not(template) ~ :not(template)`]: {