Ensure that arbitrary properties respect important configuration (#…

…13353)

* ensure we respect important on arbitrary properties

* update changelog

* reword changelog entry

CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Reset letter spacing for form elements ([#13150](https://github.com/tailwindlabs/tailwindcss/pull/13150))
 - Fix missing `xx-large` and remove double `x-large` absolute size ([#13324](https://github.com/tailwindlabs/tailwindcss/pull/13324))
 - Don't error when encountering nested CSS unless trying to `@apply` a class that uses nesting ([#13325](https://github.com/tailwindlabs/tailwindcss/pull/13325))
+- Ensure that arbitrary properties respect `important` configuration ([#13353](https://github.com/tailwindlabs/tailwindcss/pull/13353))
 
 ## [3.4.1] - 2024-01-05
 

src/lib/generateRules.js

@@ -516,7 +516,7 @@ function extractArbitraryProperty(classCandidate, context) {
 
   return [
     [
-      { sort, layer: 'utilities' },
+      { sort, layer: 'utilities', options: { respectImportant: true } },
       () => ({
         [asClass(classCandidate)]: {
           [property]: normalized,

tests/important-selector.test.js

@@ -21,6 +21,7 @@ test('important selector', () => {
           <div class="rtl:active:text-center"></div>
           <div class="dark:before:underline"></div>
           <div class="hover:[&::file-selector-button]:rtl:dark:bg-black/100"></div>
+          <div class="[color:red]"></div>
         `,
       },
     ],
@@ -132,6 +133,9 @@ test('important selector', () => {
       .custom-util {
         button: no;
       }
+      #app .\[color\:red\] {
+        color: red;
+      }
       #app :is(.group:hover .group-hover\:focus-within\:text-left:focus-within) {
         text-align: left;
       }