@niibase/uniwind 1.6.1 → 1.6.2

package/src/components/web/useUniwindAccent.ts

@@ -0,0 +1,21 @@
+import { isDefined } from '../../common/utils'
+import { Logger } from '../../core/logger'
+import { formatColor } from '../../core/web/formatColor'
+import { useResolveClassNames } from '../../hooks/useResolveClassNames'
+
+let warnedOnce = false
+
+export const useUniwindAccent = (className: string | undefined) => {
+    const styles = useResolveClassNames(className ?? '')
+
+    if (__DEV__ && !warnedOnce && isDefined(className) && className.trim() !== '' && styles.accentColor === undefined) {
+        warnedOnce = true
+        Logger.warn(
+            `className '${className}' was provided to extract accentColor but no color was found. Make sure the className includes a color utility (e.g., 'accent-red-500', 'accent-blue-600'). See https://docs.uniwind.dev/class-names#the-accent-prefix`,
+        )
+    }
+
+    return styles.accentColor !== undefined
+        ? formatColor(styles.accentColor)
+        : undefined
+}

package/src/hoc/withUniwind.native.tsx

@@ -1,11 +1,15 @@
 import { ComponentProps, useLayoutEffect, useReducer } from 'react'
+import { isDefined } from '../common/utils'
 import { useUniwindContext } from '../core/context'
 import { UniwindListener } from '../core/listener'
+import { Logger } from '../core/logger'
 import { UniwindStore } from '../core/native'
 import { StyleDependency } from '../types'
 import { AnyObject, Component, OptionMapping, WithUniwind } from './types'
 import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from './withUniwindUtils'
 
+let warnedOnce = false
+
 export const withUniwind: WithUniwind = <
     TComponent extends Component,
     TOptions extends Record<keyof ComponentProps<TComponent>, OptionMapping>,
@@ -28,6 +32,13 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
 
             const { styles, dependencies } = UniwindStore.getStyles(propValue, props, undefined, uniwindContext)
 
+            if (__DEV__ && !warnedOnce && isDefined(propValue) && propValue.trim() !== '' && styles.accentColor === undefined) {
+                warnedOnce = true
+                Logger.warn(
+                    `className '${propValue}' was provided to extract accentColor but no color was found. Make sure the className includes a color utility (e.g., 'accent-red-500', 'accent-blue-600'). See https://docs.uniwind.dev/class-names#the-accent-prefix`,
+                )
+            }
+
             acc.dependencies.push(...dependencies)
             acc.generatedProps[colorProp] = styles.accentColor
 

package/src/hoc/withUniwind.tsx

@@ -1,10 +1,14 @@
 import { ComponentProps, useLayoutEffect, useReducer } from 'react'
+import { isDefined } from '../common/utils'
 import { generateDataSet } from '../components/web/generateDataSet'
 import { useUniwindContext } from '../core/context'
+import { Logger } from '../core/logger'
 import { CSSListener, formatColor, getWebStyles } from '../core/web'
 import { AnyObject, Component, OptionMapping, WithUniwind } from './types'
 import { classToColor, classToStyle, isClassProperty, isColorClassProperty, isStyleProperty } from './withUniwindUtils'
 
+let warnedOnce = false
+
 export const withUniwind: WithUniwind = <
     TComponent extends Component,
     TOptions extends Record<keyof ComponentProps<TComponent>, OptionMapping>,
@@ -29,6 +33,13 @@ const withAutoUniwind = (Component: Component<AnyObject>) => (props: AnyObject)
             const className = propValue
             const color = getWebStyles(className, props, uniwindContext).accentColor
 
+            if (__DEV__ && !warnedOnce && isDefined(className) && className.trim() !== '' && color === undefined) {
+                warnedOnce = true
+                Logger.warn(
+                    `className '${className}' was provided to extract accentColor but no color was found. Make sure the className includes a color utility (e.g., 'accent-red-500', 'accent-blue-600'). See https://docs.uniwind.dev/class-names#the-accent-prefix`,
+                )
+            }
+
             acc.generatedProps[colorProp] = color !== undefined
                 ? formatColor(color)
                 : undefined

package/src/hooks/index.ts

@@ -1,4 +1,3 @@
 export * from './useCSSVariable'
 export * from './useResolveClassNames'
 export * from './useUniwind'
-export * from './useUniwindAccent'

package/src/metro/addMetaToStylesTemplate.ts

@@ -1,8 +1,9 @@
 import { Platform } from '../common/consts'
+import { isDefined } from '../common/utils'
 import { StyleDependency } from '../types'
 import { ProcessorBuilder } from './processor'
 import { StyleSheetTemplate } from './types'
-import { isDefined, serialize, toCamelCase } from './utils'
+import { serialize, toCamelCase } from './utils'
 
 const extractVarsFromString = (value: string) => {
     const thisIndexes = [...value.matchAll(/this\[/g)].map(m => m.index)

package/src/metro/metro-transformer.ts

@@ -30,7 +30,7 @@ export const transform = async (
     data: Buffer,
     options: JsTransformOptions,
 ) => {
-    const isCss = options.type !== 'asset' && path.join(process.cwd(), config.uniwind.cssEntryFile) === path.join(process.cwd(), filePath)
+    const isCss = options.type !== 'asset' && path.join(process.cwd(), config.uniwind.cssEntryFile) === path.join(projectRoot, filePath)
 
     if (filePath.endsWith('/components/web/metro-injected.js')) {
         const cssPath = path.join(process.cwd(), config.uniwind.cssEntryFile)
@@ -75,7 +75,7 @@ export const transform = async (
         themes: config.uniwind.themes,
         dtsPath: config.uniwind.dtsFile,
     })
-    const css = fs.readFileSync(filePath, 'utf-8')
+    const css = fs.readFileSync(cssPath, 'utf-8')
     const platform = getPlatform()
     const virtualCode = await compileVirtual({
         css,

package/src/metro/processor/css.ts

@@ -1,9 +1,11 @@
 /* eslint-disable max-lines */
 
 import { Animation, Filter, OverflowKeyword, TokenOrValue } from 'lightningcss'
+
+import { isDefined } from '../../common/utils'
 import { Logger } from '../logger'
 import { DeclarationValues } from '../types'
-import { deepEqual, isDefined, pipe, roundToPrecision, shouldBeSerialized, toCamelCase } from '../utils'
+import { deepEqual, pipe, roundToPrecision, shouldBeSerialized, toCamelCase } from '../utils'
 import { getProcessedAnimation, getProcessedVarAnimation } from './animation'
 import type { ProcessorBuilder } from './processor'
 

package/src/metro/processor/rn.ts

@@ -1,4 +1,5 @@
-import { addMissingSpaces, isDefined, pipe, removeKeys, toCamelCase } from '../utils'
+import { isDefined } from '../../common/utils'
+import { addMissingSpaces, pipe, removeKeys, toCamelCase } from '../utils'
 import type { ProcessorBuilder } from './processor'
 
 const transitions: Record<string, any> = { overlay: '"overlayColor"' }

package/src/metro/utils/common.ts

@@ -1,5 +1,3 @@
-export const isDefined = <T>(value: T): value is NonNullable<T> => value !== null && value !== undefined
-
 export const toCamelCase = (str: string) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
 
 type P<I, O> = (data: I) => O

package/dist/common/components/native/TextInput.android.js

@@ -1,52 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-module.exports = exports.TextInput = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _reactNative = require("react-native");
-var _utils = require("../utils");
-var _useStyle = require("./useStyle");
-const TextInput = exports.TextInput = (0, _utils.copyComponentProperties)(_reactNative.TextInput, props => {
-  const [isFocused, setIsFocused] = (0, _react.useState)(false);
-  const [isPressed, setIsPressed] = (0, _react.useState)(false);
-  const state = {
-    isDisabled: props.editable === false,
-    isFocused,
-    isPressed
-  };
-  const style = (0, _useStyle.useStyle)(props.className, props, state);
-  const cursorColor = (0, _useStyle.useStyle)(props.cursorColorClassName, props, state).accentColor;
-  const selectionColor = (0, _useStyle.useStyle)(props.selectionColorClassName, props, state).accentColor;
-  const placeholderTextColor = (0, _useStyle.useStyle)(props.placeholderTextColorClassName, props, state).accentColor;
-  const selectionHandleColor = (0, _useStyle.useStyle)(props.selectionHandleColorClassName, props, state).accentColor;
-  const underlineColorAndroid = (0, _useStyle.useStyle)(props.underlineColorAndroidClassName, props, state).accentColor;
-  return /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-    ...props,
-    style: [style, props.style],
-    cursorColor: props.cursorColor ?? cursorColor,
-    selectionColor: props.selectionColor ?? selectionColor,
-    placeholderTextColor: props.placeholderTextColor ?? placeholderTextColor,
-    selectionHandleColor: props.selectionHandleColor ?? selectionHandleColor,
-    underlineColorAndroid: props.underlineColorAndroid ?? underlineColorAndroid,
-    onFocus: event => {
-      setIsFocused(true);
-      props.onFocus?.(event);
-    },
-    onBlur: event => {
-      setIsFocused(false);
-      props.onBlur?.(event);
-    },
-    onPressIn: event => {
-      setIsPressed(true);
-      props.onPressIn?.(event);
-    },
-    onPressOut: event => {
-      setIsPressed(false);
-      props.onPressOut?.(event);
-    }
-  });
-});
-module.exports = TextInput;

package/dist/common/hooks/useUniwindAccent.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useUniwindAccent = void 0;
-var _formatColor = require("../core/web/formatColor");
-var _useResolveClassNames = require("./useResolveClassNames");
-const useUniwindAccent = className => {
-  const styles = (0, _useResolveClassNames.useResolveClassNames)(className ?? "");
-  return styles.accentColor !== void 0 ? (0, _formatColor.formatColor)(styles.accentColor) : void 0;
-};
-exports.useUniwindAccent = useUniwindAccent;

package/dist/module/components/native/TextInput.android.d.ts

@@ -1,3 +0,0 @@
-import { TextInput as RNTextInput } from 'react-native';
-export declare const TextInput: typeof RNTextInput;
-export default TextInput;

package/dist/module/components/native/TextInput.android.js

@@ -1,49 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { TextInput as RNTextInput } from "react-native";
-import { copyComponentProperties } from "../utils.js";
-import { useStyle } from "./useStyle.js";
-export const TextInput = copyComponentProperties(RNTextInput, (props) => {
-  const [isFocused, setIsFocused] = useState(false);
-  const [isPressed, setIsPressed] = useState(false);
-  const state = {
-    isDisabled: props.editable === false,
-    isFocused,
-    isPressed
-  };
-  const style = useStyle(props.className, props, state);
-  const cursorColor = useStyle(props.cursorColorClassName, props, state).accentColor;
-  const selectionColor = useStyle(props.selectionColorClassName, props, state).accentColor;
-  const placeholderTextColor = useStyle(props.placeholderTextColorClassName, props, state).accentColor;
-  const selectionHandleColor = useStyle(props.selectionHandleColorClassName, props, state).accentColor;
-  const underlineColorAndroid = useStyle(props.underlineColorAndroidClassName, props, state).accentColor;
-  return /* @__PURE__ */ jsx(
-    RNTextInput,
-    {
-      ...props,
-      style: [style, props.style],
-      cursorColor: props.cursorColor ?? cursorColor,
-      selectionColor: props.selectionColor ?? selectionColor,
-      placeholderTextColor: props.placeholderTextColor ?? placeholderTextColor,
-      selectionHandleColor: props.selectionHandleColor ?? selectionHandleColor,
-      underlineColorAndroid: props.underlineColorAndroid ?? underlineColorAndroid,
-      onFocus: (event) => {
-        setIsFocused(true);
-        props.onFocus?.(event);
-      },
-      onBlur: (event) => {
-        setIsFocused(false);
-        props.onBlur?.(event);
-      },
-      onPressIn: (event) => {
-        setIsPressed(true);
-        props.onPressIn?.(event);
-      },
-      onPressOut: (event) => {
-        setIsPressed(false);
-        props.onPressOut?.(event);
-      }
-    }
-  );
-});
-export default TextInput;

package/dist/module/hooks/useUniwindAccent.js

@@ -1,6 +0,0 @@
-import { formatColor } from "../core/web/formatColor.js";
-import { useResolveClassNames } from "./useResolveClassNames.js";
-export const useUniwindAccent = (className) => {
-  const styles = useResolveClassNames(className ?? "");
-  return styles.accentColor !== void 0 ? formatColor(styles.accentColor) : void 0;
-};

package/src/components/native/TextInput.android.tsx

@@ -1,51 +0,0 @@
-import { useState } from 'react'
-import { TextInput as RNTextInput, TextInputProps } from 'react-native'
-import { ComponentState } from '../../core/types'
-import { copyComponentProperties } from '../utils'
-import { useStyle } from './useStyle'
-
-export const TextInput = copyComponentProperties(RNTextInput, (props: TextInputProps) => {
-    const [isFocused, setIsFocused] = useState(false)
-    const [isPressed, setIsPressed] = useState(false)
-    const state = {
-        isDisabled: props.editable === false,
-        isFocused,
-        isPressed,
-    } satisfies ComponentState
-    const style = useStyle(props.className, props, state)
-    const cursorColor = useStyle(props.cursorColorClassName, props, state).accentColor
-    const selectionColor = useStyle(props.selectionColorClassName, props, state).accentColor
-    const placeholderTextColor = useStyle(props.placeholderTextColorClassName, props, state).accentColor
-    const selectionHandleColor = useStyle(props.selectionHandleColorClassName, props, state).accentColor
-    const underlineColorAndroid = useStyle(props.underlineColorAndroidClassName, props, state).accentColor
-
-    return (
-        <RNTextInput
-            {...props}
-            style={[style, props.style]}
-            cursorColor={props.cursorColor ?? cursorColor}
-            selectionColor={props.selectionColor ?? selectionColor}
-            placeholderTextColor={props.placeholderTextColor ?? placeholderTextColor}
-            selectionHandleColor={props.selectionHandleColor ?? selectionHandleColor}
-            underlineColorAndroid={props.underlineColorAndroid ?? underlineColorAndroid}
-            onFocus={event => {
-                setIsFocused(true)
-                props.onFocus?.(event)
-            }}
-            onBlur={event => {
-                setIsFocused(false)
-                props.onBlur?.(event)
-            }}
-            onPressIn={event => {
-                setIsPressed(true)
-                props.onPressIn?.(event)
-            }}
-            onPressOut={event => {
-                setIsPressed(false)
-                props.onPressOut?.(event)
-            }}
-        />
-    )
-})
-
-export default TextInput

package/src/hooks/useUniwindAccent.ts

@@ -1,10 +0,0 @@
-import { formatColor } from '../core/web/formatColor'
-import { useResolveClassNames } from './useResolveClassNames'
-
-export const useUniwindAccent = (className: string | undefined) => {
-    const styles = useResolveClassNames(className ?? '')
-
-    return styles.accentColor !== undefined
-        ? formatColor(styles.accentColor)
-        : undefined
-}