>;
export declare const useStyleContext: (scope?: string) => any;
export {};
diff --git a/packages/nativewind/utils/withStyleContextAndStates/index.js b/packages/nativewind/utils/withStyleContextAndStates/index.js
index 127c0c9536..7c82f52e31 100644
--- a/packages/nativewind/utils/withStyleContextAndStates/index.js
+++ b/packages/nativewind/utils/withStyleContextAndStates/index.js
@@ -4,31 +4,26 @@ import { extractDataClassName } from '../utils';
import { ParentContext } from '../context';
import { useParentContext } from '../context';
export const withStyleContextAndStates = (Component, scope = 'Global') => {
- return React.forwardRef(({ context, className, states, ...props }, ref) => {
- let contextValues = {};
- const parentContextValues = useParentContext();
- if (parentContextValues[scope] !== undefined) {
- parentContextValues[scope] = context;
- contextValues = parentContextValues;
- } else {
- contextValues = { ...parentContextValues, [scope]: context };
- }
- const classNamesFinal = React.useMemo(() => {
- if (!className) return;
- return extractDataClassName(className, states);
- }, [className, states]);
- return React.createElement(
- ParentContext.Provider,
- { value: contextValues },
- React.createElement(Component, {
- className: classNamesFinal,
- ...props,
- ref: ref,
- })
- );
- });
+ return React.forwardRef(({ context, className, states, ...props }, ref) => {
+ let contextValues = {};
+ const parentContextValues = useParentContext();
+ if (parentContextValues[scope] !== undefined) {
+ parentContextValues[scope] = context;
+ contextValues = parentContextValues;
+ }
+ else {
+ contextValues = { ...parentContextValues, [scope]: context };
+ }
+ const classNamesFinal = React.useMemo(() => {
+ if (!className)
+ return;
+ return extractDataClassName(className, states);
+ }, [className, states]);
+ return (React.createElement(ParentContext.Provider, { value: contextValues },
+ React.createElement(Component, { className: classNamesFinal, ...props, ref: ref })));
+ });
};
export const useStyleContext = (scope = 'Global') => {
- const parentContextValues = useParentContext();
- return parentContextValues[scope];
+ const parentContextValues = useParentContext();
+ return parentContextValues[scope];
};
diff --git a/packages/styled/react/CHANGELOG.md b/packages/styled/react/CHANGELOG.md
index a665a3b735..4b15a2e6e4 100644
--- a/packages/styled/react/CHANGELOG.md
+++ b/packages/styled/react/CHANGELOG.md
@@ -1,5 +1,11 @@
# @gluestack-style/react
+## 1.0.54
+
+### Patch Changes
+
+- - Fixed plugins utility props resolution
+
## 1.0.53
### Patch Changes
diff --git a/packages/styled/react/package.json b/packages/styled/react/package.json
index 3f49cf2019..991ccb1c0c 100644
--- a/packages/styled/react/package.json
+++ b/packages/styled/react/package.json
@@ -1,7 +1,7 @@
{
"name": "@gluestack-style/react",
"description": "A universal & performant styling library for React Native, Next.js & React",
- "version": "1.0.53",
+ "version": "1.0.54",
"keywords": [
"React Native",
"Next.js",
diff --git a/packages/styled/react/src/plugins/font-resolver.tsx b/packages/styled/react/src/plugins/font-resolver.tsx
index 0535f1afdd..1fb18f63ca 100644
--- a/packages/styled/react/src/plugins/font-resolver.tsx
+++ b/packages/styled/react/src/plugins/font-resolver.tsx
@@ -318,17 +318,19 @@ export class FontResolver implements IStyledPlugin, FontPlugin {
let style = rest?.style;
- if (Object.keys(resolvedSxProps).length > 0) {
- if (Array.isArray(style)) {
- style = StyleSheet.flatten(style);
-
- Object.keys(resolvedSxProps).forEach((ele) => {
- style[ele] = resolvedSxProps[ele];
- });
- } else {
- Object.keys(resolvedSxProps).forEach((ele) => {
- style[ele] = resolvedSxProps[ele];
- });
+ if (resolvedSxProps.fontFamily) {
+ if (Object.keys(resolvedSxProps).length > 0) {
+ if (Array.isArray(style)) {
+ style = StyleSheet.flatten(style);
+
+ Object.keys(resolvedSxProps).forEach((ele) => {
+ style[ele] = resolvedSxProps[ele];
+ });
+ } else {
+ Object.keys(resolvedSxProps).forEach((ele) => {
+ style[ele] = resolvedSxProps[ele];
+ });
+ }
}
}
diff --git a/packages/styled/react/src/styled.tsx b/packages/styled/react/src/styled.tsx
index 8497f70f42..249d5691de 100644
--- a/packages/styled/react/src/styled.tsx
+++ b/packages/styled/react/src/styled.tsx
@@ -141,7 +141,11 @@ function convertUtiltiyToSXFromProps(
const resolvedSXVerbosed = convertSxToSxVerbosed(resolvedSxVerbose);
- return { sx: resolvedSXVerbosed, rest: restProps };
+ return {
+ sx: resolvedSXVerbosed,
+ nonVerbosedSx: resolvedSxVerbose,
+ rest: restProps,
+ };
}
function getStateStyleCSSFromStyleIdsAndProps(
@@ -1589,36 +1593,51 @@ export function verboseStyled(
applySxStatePassingProps.current
);
- let { sx: filteredComponentSx, rest: filteredComponentRemainingProps } =
- convertUtiltiyToSXFromProps(
- // Object.assign(
- // defaultThemePropsWithoutVariants,
- inlineComponentPropsWithoutVariants,
- styledSystemProps,
- { ...componentStyleConfig, uniqueComponentId },
- reservedKeys,
- plugins,
- ignoreKeys,
- inlineComponentPropsWithoutVariants?.as ?? Component,
- ExtendedConfig
- );
+ let {
+ sx: filteredComponentSx,
+ nonVerbosedSx,
+ rest: filteredComponentRemainingProps,
+ } = convertUtiltiyToSXFromProps(
+ // Object.assign(
+ // defaultThemePropsWithoutVariants,
+ inlineComponentPropsWithoutVariants,
+ styledSystemProps,
+ { ...componentStyleConfig, uniqueComponentId },
+ reservedKeys,
+ plugins,
+ ignoreKeys,
+ inlineComponentPropsWithoutVariants?.as ?? Component,
+ ExtendedConfig
+ );
+
+ let sxToBePassedIntoPlugin = {
+ ...nonVerbosedSx,
+ };
const mergedPassingProps = shallowMerge(
{ ...defaultThemePropsWithoutVariants, ...passingProps },
applyAncestorPassingProps
);
- let { sx: filteredPassingSx, rest: filteredPassingRemainingProps } =
- convertUtiltiyToSXFromProps(
- mergedPassingProps,
- styledSystemProps,
- { ...componentStyleConfig, uniqueComponentId },
- reservedKeys,
- plugins,
- ignoreKeys,
- mergedPassingProps?.as ?? Component,
- ExtendedConfig
- );
+ let {
+ sx: filteredPassingSx,
+ nonVerbosedSx: filteredPassingNonVerbosedSx,
+ rest: filteredPassingRemainingProps,
+ } = convertUtiltiyToSXFromProps(
+ mergedPassingProps,
+ styledSystemProps,
+ { ...componentStyleConfig, uniqueComponentId },
+ reservedKeys,
+ plugins,
+ ignoreKeys,
+ mergedPassingProps?.as ?? Component,
+ ExtendedConfig
+ );
+
+ sxToBePassedIntoPlugin = deepMergeObjects(
+ sxToBePassedIntoPlugin,
+ filteredPassingNonVerbosedSx
+ );
let containsSX = false;
Object.assign(applyComponentInlineProps, filteredPassingRemainingProps);
@@ -1831,6 +1850,7 @@ export function verboseStyled
(
const {
sx: filteredPassingSxUpdated,
+ nonVerbosedSx: filteredPassingNonVerbosedSxUpdated,
rest: filteredPassingRemainingPropsUpdated,
} = convertUtiltiyToSXFromProps(
passingPropsUpdated,
@@ -1843,6 +1863,11 @@ export function verboseStyled
(
ExtendedConfig
);
+ sxToBePassedIntoPlugin = deepMergeObjects(
+ sxToBePassedIntoPlugin,
+ filteredPassingNonVerbosedSxUpdated
+ );
+
filteredPassingSx = filteredPassingSxUpdated;
injectAndUpdateSXProps(filteredPassingSx);
@@ -2214,7 +2239,7 @@ export function verboseStyled
(
? {
...variantProps,
states: states,
- sx: componentProps.sx,
+ sx: sxToBePassedIntoPlugin,
}
: {};