fix: important with state specificity (#585)

Author: Brentlok

packages/uniwind/src/core/native/store.ts

@@ -147,15 +147,17 @@ class UniwindStoreBuilder {
                 for (const [property, valueGetter] of style.entries) {
                     const previousBest = bestBreakpoints.get(property)
 
-                    if (
-                        previousBest
-                        && (
-                            previousBest.minWidth > style.minWidth
+                    if (previousBest) {
+                        const previousWins = previousBest.minWidth > style.minWidth
                             || previousBest.complexity > style.complexity
-                            || previousBest.importantProperties.includes(property)
-                        )
-                    ) {
-                        continue
+                            || (
+                                previousBest.complexity === style.complexity
+                                && previousBest.importantProperties.includes(property)
+                            )
+
+                        if (previousWins) {
+                            continue
+                        }
                     }
 
                     if (property[0] === '-') {

packages/uniwind/tests/native/styles-parsing/specificity.test.tsx

@@ -1,4 +1,6 @@
+import { fireEvent } from '@testing-library/react-native'
 import * as React from 'react'
+import TextInput from '../../../src/components/native/TextInput'
 import View from '../../../src/components/native/View'
 import { TW_BLUE_500, TW_GREEN_500, TW_RED_500 } from '../../consts'
 import { renderUniwind } from '../utils'
@@ -38,4 +40,31 @@ describe('Specificity', () => {
         expect(getStylesFromId('important-middle').color).toBe(TW_GREEN_500)
         expect(getStylesFromId('important-last').color).toBe(TW_BLUE_500)
     })
+
+    test('Important with state variant', () => {
+        const { getByTestId, getStylesFromId } = renderUniwind(
+            <TextInput
+                className="bg-red-500! focus:bg-blue-500!"
+                testID="text-input-focus"
+            />,
+        )
+
+        const component = getByTestId('text-input-focus')
+        const initialStyle = getStylesFromId('text-input-focus')
+
+        // Initial state
+        expect(initialStyle.backgroundColor).toBe(TW_RED_500)
+
+        // Focus
+        fireEvent(component, 'focus')
+
+        const focusedStyle = getStylesFromId('text-input-focus')
+        expect(focusedStyle.backgroundColor).toBe(TW_BLUE_500)
+
+        // Blur
+        fireEvent(component, 'blur')
+
+        const blurredStyle = getStylesFromId('text-input-focus')
+        expect(blurredStyle.backgroundColor).toBe(TW_RED_500)
+    })
 })