diff --git a/packages/uniwind/src/core/native/store.ts b/packages/uniwind/src/core/native/store.ts index 08807ec1..1c5d9cd1 100644 --- a/packages/uniwind/src/core/native/store.ts +++ b/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] === '-') { diff --git a/packages/uniwind/tests/native/styles-parsing/specificity.test.tsx b/packages/uniwind/tests/native/styles-parsing/specificity.test.tsx index 36ce85c8..c80bf817 100644 --- a/packages/uniwind/tests/native/styles-parsing/specificity.test.tsx +++ b/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( + , + ) + + 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) + }) })