Add @important at-rule

__tests__/importantAtRule.test.js

@@ -0,0 +1,29 @@
+import postcss from 'postcss'
+import plugin from '../src/lib/substituteImportantAtRules'
+
+function run(input, opts = () => {}) {
+  return postcss([plugin(opts)]).process(input)
+}
+
+test("it makes every property of every nested rule !important", () => {
+  const input = `
+    .foo { color: blue; }
+    @important {
+      .banana { color: yellow; }
+      .chocolate { color: brown; }
+    }
+    .bar { color: red; }
+  `
+
+  const output = `
+    .foo { color: blue; }
+    .banana { color: yellow !important; }
+    .chocolate { color: brown !important; }
+    .bar { color: red; }
+  `
+
+  return run(input).then(result => {
+    expect(result.css).toEqual(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})

src/index.js

@@ -11,6 +11,7 @@ import evaluateTailwindFunctions from './lib/evaluateTailwindFunctions'
 import generateUtilities from './lib/generateUtilities'
 import substituteHoverableAtRules from './lib/substituteHoverableAtRules'
 import substituteFocusableAtRules from './lib/substituteFocusableAtRules'
+import substituteImportantAtRules from './lib/substituteImportantAtRules'
 import substituteResponsiveAtRules from './lib/substituteResponsiveAtRules'
 import substituteScreenAtRules from './lib/substituteScreenAtRules'
 import substituteClassApplyAtRules from './lib/substituteClassApplyAtRules'
@@ -37,6 +38,7 @@ const plugin = postcss.plugin('tailwind', (config) => {
     generateUtilities(lazyConfig),
     substituteHoverableAtRules(lazyConfig),
     substituteFocusableAtRules(lazyConfig),
+    substituteImportantAtRules(lazyConfig),
     substituteResponsiveAtRules(lazyConfig),
     substituteScreenAtRules(lazyConfig),
     substituteClassApplyAtRules(lazyConfig),

src/lib/substituteImportantAtRules.js

@@ -0,0 +1,15 @@
+import _ from 'lodash'
+import postcss from 'postcss'
+import cloneNodes from '../util/cloneNodes'
+
+export default function(config) {
+  return function (css) {
+    const options = config()
+
+    css.walkAtRules('important', atRule => {
+      atRule.walkDecls(decl => decl.important = true)
+      atRule.before(cloneNodes(atRule.nodes))
+      atRule.remove()
+    })
+  }
+}