Test important modifier when using prefix

Author: adamwathan

tests/14-important-modifier.test.js

@@ -7,7 +7,7 @@ function run(input, config = {}) {
   return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
 }
 
-test('important boolean', () => {
+test('important modifier', () => {
   let config = {
     important: false,
     darkMode: 'class',

tests/15-important-modifier-prefix.test.css

@@ -0,0 +1,53 @@
+* {
+  --tw-shadow: 0 0 #0000;
+  --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgba(59, 130, 246, 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+}
+.\!tw-container {
+  width: 100% !important;
+}
+@media (min-width: 640px) {
+  .\!tw-container {
+    max-width: 640px !important;
+  }
+}
+@media (min-width: 768px) {
+  .\!tw-container {
+    max-width: 768px !important;
+  }
+}
+@media (min-width: 1024px) {
+  .\!tw-container {
+    max-width: 1024px !important;
+  }
+}
+@media (min-width: 1280px) {
+  .\!tw-container {
+    max-width: 1280px !important;
+  }
+}
+@media (min-width: 1536px) {
+  .\!tw-container {
+    max-width: 1536px !important;
+  }
+}
+.\!tw-font-bold {
+  font-weight: 700 !important;
+}
+.hover\:\!tw-text-center:hover {
+  text-align: center !important;
+}
+@media (min-width: 1024px) {
+  .lg\:\!tw-opacity-50 {
+    opacity: 0.5 !important;
+  }
+}
+@media (min-width: 1280px) {
+  .xl\:focus\:disabled\:\!tw-float-right:focus:disabled {
+    float: right !important;
+  }
+}

tests/15-important-modifier-prefix.test.html

@@ -0,0 +1,5 @@
+<div class="!tw-container"></div>
+<div class="!tw-font-bold"></div>
+<div class="hover:!tw-text-center"></div>
+<div class="lg:!tw-opacity-50"></div>
+<div class="xl:focus:disabled:!tw-float-right"></div>

tests/15-important-modifier-prefix.test.js

@@ -0,0 +1,33 @@
+const postcss = require('postcss')
+const tailwind = require('../src/index.js')
+const fs = require('fs')
+const path = require('path')
+
+function run(input, config = {}) {
+  return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+}
+
+test('important modifier with prefix', () => {
+  let config = {
+    important: false,
+    prefix: 'tw-',
+    darkMode: 'class',
+    purge: [path.resolve(__dirname, './15-important-modifier-prefix.test.html')],
+    corePlugins: { preflight: false },
+    theme: {},
+    plugins: [],
+  }
+
+  let css = `
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    let expectedPath = path.resolve(__dirname, './15-important-modifier-prefix.test.css')
+    let expected = fs.readFileSync(expectedPath, 'utf8')
+
+    expect(result.css).toMatchCss(expected)
+  })
+})