diff --git a/__tests__/importantAtRule.test.js b/__tests__/importantAtRule.test.js new file mode 100644 index 000000000000..a370ad119799 --- /dev/null +++ b/__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) + }) +}) diff --git a/src/index.js b/src/index.js index f0899fe77f99..09fc93af7c99 100644 --- a/src/index.js +++ b/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), diff --git a/src/lib/substituteImportantAtRules.js b/src/lib/substituteImportantAtRules.js new file mode 100644 index 000000000000..9af84b0594a9 --- /dev/null +++ b/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() + }) + } +}