From 8cc7d2fad25a101f6bed21e9b72c7f94eb0c9c84 Mon Sep 17 00:00:00 2001 From: Hubert Bieszczad Date: Sat, 31 Jan 2026 11:25:08 +0100 Subject: [PATCH 1/2] fix: Image size, TextInput placeholder color and Pressable disabled: not working on web --- packages/uniwind/src/components/web/Image.tsx | 11 +++++++++-- packages/uniwind/src/components/web/TextInput.tsx | 4 ++++ packages/uniwind/src/css/index.ts | 2 ++ packages/uniwind/src/css/overwrite.ts | 12 ++++++++++++ packages/uniwind/uniwind.css | 10 ++++++++++ 5 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 packages/uniwind/src/css/overwrite.ts diff --git a/packages/uniwind/src/components/web/Image.tsx b/packages/uniwind/src/components/web/Image.tsx index 52d13149..ef939043 100644 --- a/packages/uniwind/src/components/web/Image.tsx +++ b/packages/uniwind/src/components/web/Image.tsx @@ -1,15 +1,22 @@ import { Image as RNImage, ImageProps } from 'react-native' -import { useUniwindAccent } from '../../hooks' +import { useResolveClassNames, useUniwindAccent } from '../../hooks' import { copyComponentProperties } from '../utils' import { toRNWClassName } from './rnw' export const Image = copyComponentProperties(RNImage, (props: ImageProps) => { const tintColor = useUniwindAccent(props.tintColorClassName) + const styles = useResolveClassNames(props.className ?? '') + const isUsingWidth = styles.width !== undefined + const isUsingHeight = styles.height !== undefined + const styleReset = { + width: isUsingWidth ? '' : undefined, + height: isUsingHeight ? '' : undefined, + } return ( ) diff --git a/packages/uniwind/src/components/web/TextInput.tsx b/packages/uniwind/src/components/web/TextInput.tsx index 8175ae29..58c87ecc 100644 --- a/packages/uniwind/src/components/web/TextInput.tsx +++ b/packages/uniwind/src/components/web/TextInput.tsx @@ -1,12 +1,16 @@ import { TextInput as RNTextInput, TextInputProps } from 'react-native' +import { useUniwindAccent } from '../../hooks' import { copyComponentProperties } from '../utils' import { toRNWClassName } from './rnw' export const TextInput = copyComponentProperties(RNTextInput, (props: TextInputProps) => { + const placeholderTextColor = useUniwindAccent(props.placeholderTextColorClassName) + return ( ) }) diff --git a/packages/uniwind/src/css/index.ts b/packages/uniwind/src/css/index.ts index 20b6c7ff..bb95ec92 100644 --- a/packages/uniwind/src/css/index.ts +++ b/packages/uniwind/src/css/index.ts @@ -1,6 +1,7 @@ import fs from 'fs' import path from 'path' import { generateCSSForInsets } from './insets' +import { overwrite } from './overwrite' import { generateCSSForThemes } from './themes' import { generateCSSForVariants } from './variants' @@ -18,6 +19,7 @@ export const buildCSS = async (themes: Array, input: string) => { const newCssFile = [ variants, insets, + overwrite, themesCSS, ].join('\n') diff --git a/packages/uniwind/src/css/overwrite.ts b/packages/uniwind/src/css/overwrite.ts new file mode 100644 index 00000000..2ec919e2 --- /dev/null +++ b/packages/uniwind/src/css/overwrite.ts @@ -0,0 +1,12 @@ +const overwriteDisabled = `@custom-variant disabled { + &:disabled { + @slot; + } + + &[aria-disabled="true"] { + @slot; + } +} +` + +export const overwrite = overwriteDisabled diff --git a/packages/uniwind/uniwind.css b/packages/uniwind/uniwind.css index 470f20b7..a89b8f67 100644 --- a/packages/uniwind/uniwind.css +++ b/packages/uniwind/uniwind.css @@ -376,6 +376,16 @@ right: calc(env(safe-area-inset-right) + --value([length], --spacing-*)); } +@custom-variant disabled { + &:disabled { + @slot; + } + + &[aria-disabled="true"] { + @slot; + } +} + @custom-variant light { &:where(.light, .light *) { @slot; From cca948e3845d40b2a32c2015a20679f070b1f64f Mon Sep 17 00:00:00 2001 From: Hubert Bieszczad Date: Sat, 31 Jan 2026 11:49:32 +0100 Subject: [PATCH 2/2] chore: add readonly to disabled variant --- packages/uniwind/src/css/overwrite.ts | 4 ++++ packages/uniwind/src/metro/processor/processor.ts | 4 ++-- packages/uniwind/uniwind.css | 4 ++++ 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/uniwind/src/css/overwrite.ts b/packages/uniwind/src/css/overwrite.ts index 2ec919e2..50ceb050 100644 --- a/packages/uniwind/src/css/overwrite.ts +++ b/packages/uniwind/src/css/overwrite.ts @@ -6,6 +6,10 @@ const overwriteDisabled = `@custom-variant disabled { &[aria-disabled="true"] { @slot; } + + &[readonly] { + @slot; + } } ` diff --git a/packages/uniwind/src/metro/processor/processor.ts b/packages/uniwind/src/metro/processor/processor.ts index a29fe4e9..bf007171 100644 --- a/packages/uniwind/src/metro/processor/processor.ts +++ b/packages/uniwind/src/metro/processor/processor.ts @@ -180,13 +180,13 @@ export class ProcessorBuilder { } // data-x - if (selector.type === 'attribute' && selector.operation === null) { + if (selector.type === 'attribute' && selector.operation === null && selector.name.startsWith('data-')) { dataAttributes ??= {} dataAttributes[selector.name] = `"true"` } // data-x= - if (selector.type === 'attribute' && selector.operation?.operator === 'equal') { + if (selector.type === 'attribute' && selector.operation?.operator === 'equal' && selector.name.startsWith('data-')) { dataAttributes ??= {} dataAttributes[selector.name] = `"${selector.operation.value}"` } diff --git a/packages/uniwind/uniwind.css b/packages/uniwind/uniwind.css index a89b8f67..2833fc4e 100644 --- a/packages/uniwind/uniwind.css +++ b/packages/uniwind/uniwind.css @@ -384,6 +384,10 @@ &[aria-disabled="true"] { @slot; } + + &[readonly] { + @slot; + } } @custom-variant light {