Basic important support

Author: adamwathan

src/lib/generateRules.js

@@ -168,14 +168,14 @@ function* resolveMatches(candidate, context) {
         for (let ruleSet of [].concat(plugin(modifier, pluginHelpers))) {
           let [rules, options] = parseRules(ruleSet, context.postCssNodeCache)
           for (let rule of rules) {
-            matches.push([{ ...sort, options }, rule])
+            matches.push([{ ...sort, options: { ...sort.options, ...options } }, rule])
           }
         }
       } else {
         let ruleSet = plugin
         let [rules, options] = parseRules(ruleSet, context.postCssNodeCache)
         for (let rule of rules) {
-          matches.push([{ ...sort, options }, rule])
+          matches.push([{ ...sort, options: { ...sort.options, ...options } }, rule])
         }
       }
     }
@@ -216,7 +216,14 @@ function generateRules(candidates, context) {
     allRules.push(matches)
   }
 
-  return allRules.flat(1).map(([{ sort, layer }, rule]) => [sort | context.layerOrder[layer], rule])
+  return allRules.flat(1).map(([{ sort, layer, options }, rule]) => {
+    if (context.tailwindConfig.important === true && options.respectImportant) {
+      rule.walkDecls((d) => {
+        d.important = true
+      })
+    }
+    return [sort | context.layerOrder[layer], rule]
+  })
 }
 
 module.exports = {

src/lib/setupContext.js

@@ -409,7 +409,9 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
           context.candidateRuleMap.set(identifier, [])
         }
 
-        context.candidateRuleMap.get(identifier).push([{ sort: offset, layer: 'components' }, rule])
+        context.candidateRuleMap
+          .get(identifier)
+          .push([{ sort: offset, layer: 'components', options }, rule])
       }
     },
     addUtilities(utilities, options) {
@@ -433,7 +435,9 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
           context.candidateRuleMap.set(identifier, [])
         }
 
-        context.candidateRuleMap.get(identifier).push([{ sort: offset, layer: 'utilities' }, rule])
+        context.candidateRuleMap
+          .get(identifier)
+          .push([{ sort: offset, layer: 'utilities', options }, rule])
       }
     },
     matchBase: function (base) {
@@ -451,13 +455,22 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
         context.candidateRuleMap.get(identifier).push(...withOffsets)
       }
     },
-    matchUtilities: function (utilities) {
+    matchUtilities: function (utilities, options) {
+      let defaultOptions = {
+        variants: [],
+        respectPrefix: true,
+        respectImportant: true,
+        respectVariants: true,
+      }
+
+      options = { ...defaultOptions, ...options }
+
       let offset = offsets.utilities++
 
       for (let identifier in utilities) {
         let value = [].concat(utilities[identifier])
 
-        let withOffsets = value.map((rule) => [{ sort: offset, layer: 'utilities' }, rule])
+        let withOffsets = value.map((rule) => [{ sort: offset, layer: 'utilities', options }, rule])
 
         if (!context.candidateRuleMap.has(identifier)) {
           context.candidateRuleMap.set(identifier, [])

tests/03-important-boolean.test.css

@@ -0,0 +1,65 @@
+* {
+  --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;
+}
+.container {
+  width: 100%;
+}
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+.btn {
+  button: yes !important;
+}
+.font-bold {
+  font-weight: 700 !important;
+}
+.custom-util {
+  button: no;
+}
+.group:hover .group-hover\:focus-within\:text-left:focus-within {
+  text-align: left !important;
+}
+[dir='rtl'] .rtl\:active\:text-center:active {
+  text-align: center !important;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .motion-safe\:hover\:text-center:hover {
+    text-align: center !important;
+  }
+}
+.dark .dark\:focus\:text-left:focus {
+  text-align: left !important;
+}
+@media (min-width: 768px) {
+  .md\:hover\:text-right:hover {
+    text-align: right !important;
+  }
+}

tests/03-important-boolean.test.html

@@ -0,0 +1,9 @@
+<div class="container"></div>
+<div class="btn"></div>
+<div class="custom-util"></div>
+<div class="font-bold"></div>
+<div class="md:hover:text-right"></div>
+<div class="motion-safe:hover:text-center"></div>
+<div class="dark:focus:text-left"></div>
+<div class="group-hover:focus-within:text-left"></div>
+<div class="rtl:active:text-center"></div>

tests/03-important-boolean.test.js

@@ -0,0 +1,51 @@
+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 boolean', () => {
+  let config = {
+    important: true,
+    darkMode: 'class',
+    purge: [path.resolve(__dirname, './03-important-boolean.test.html')],
+    corePlugins: { preflight: false },
+    theme: {},
+    plugins: [
+      function ({ addComponents, addUtilities }) {
+        addComponents(
+          {
+            '.btn': {
+              button: 'yes',
+            },
+          },
+          { respectImportant: true }
+        )
+        addUtilities(
+          {
+            '.custom-util': {
+              button: 'no',
+            },
+          },
+          { respectImportant: false }
+        )
+      },
+    ],
+  }
+
+  let css = `
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  return run(css, config).then((result) => {
+    let expectedPath = path.resolve(__dirname, './03-important-boolean.test.css')
+    let expected = fs.readFileSync(expectedPath, 'utf8')
+
+    expect(result.css).toMatchCss(expected)
+  })
+})