From 0ec866e35432fd75fa164eb27f21d5a1be854a59 Mon Sep 17 00:00:00 2001 From: Suraj Ahmed Choudhury Date: Wed, 10 Jan 2024 18:28:31 +0530 Subject: [PATCH 1/9] Update index.stories.mdx --- .../src/styled/configuration/Themes/index.stories.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/example/storybook/src/styled/configuration/Themes/index.stories.mdx b/example/storybook/src/styled/configuration/Themes/index.stories.mdx index c9b247f6e4..eb3125006f 100644 --- a/example/storybook/src/styled/configuration/Themes/index.stories.mdx +++ b/example/storybook/src/styled/configuration/Themes/index.stories.mdx @@ -162,14 +162,14 @@ export const config = createConfig({ themes: { classic: { colors: { - $primary: '$colors.$brown400', - $secondary: '$colors.$brown100', + primary: '$colors$brown400', + secondary: '$colors$brown100', }, }, modern: { colors: { - $primary: '$colors.$red400', - $secondary: '$colors.$red100', + primary: '$colors$red400', + secondary: '$colors$red100', }, }, }, From 774b4d7b9447bbd471d1ce8d4a89fdbc22e4930f Mon Sep 17 00:00:00 2001 From: Ankit Tailor <44310861+ankit-tailor@users.noreply.github.com> Date: Wed, 10 Jan 2024 18:44:03 +0530 Subject: [PATCH 2/9] Update index.stories.mdx --- .../configuration/Themes/index.stories.mdx | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/example/storybook/src/styled/configuration/Themes/index.stories.mdx b/example/storybook/src/styled/configuration/Themes/index.stories.mdx index eb3125006f..162376d96a 100644 --- a/example/storybook/src/styled/configuration/Themes/index.stories.mdx +++ b/example/storybook/src/styled/configuration/Themes/index.stories.mdx @@ -211,4 +211,41 @@ export const App = () => { }; ``` +### Theme specific style + +You can apply theme-specific styling by using the . prefix with the theme name. This API is supported in both `styled()` and the `sx` prop. + +```tsx +import { styled, StyledProvider, Theme } from '@gluestack-style/react'; +import { Pressable } from 'react-native'; +import { config } from './config'; + +const Button = styled(Pressable, { + backgroundColor: '$primary', + padding: '$3', + '.classic': { + backgroundColor: '$secondary' + } +}); + +const ButtonText = styled(Pressable, { + color: '$secondary', + '.classic': { + color: '$primary' + } +}); + +export const App = () => { + return ( + + + + + + ); +}; +``` + > **Note**: Components must be wrapped inside the `Theme` component to use the theme. Else default tokens from config will be used. From 7616531e1ed3e5b576530779659202c666bc9324 Mon Sep 17 00:00:00 2001 From: Ankit Tailor <44310861+ankit-tailor@users.noreply.github.com> Date: Wed, 10 Jan 2024 18:59:33 +0530 Subject: [PATCH 3/9] Update index.stories.mdx --- .../src/styled/configuration/Themes/index.stories.mdx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/example/storybook/src/styled/configuration/Themes/index.stories.mdx b/example/storybook/src/styled/configuration/Themes/index.stories.mdx index 162376d96a..2ea6b3b62c 100644 --- a/example/storybook/src/styled/configuration/Themes/index.stories.mdx +++ b/example/storybook/src/styled/configuration/Themes/index.stories.mdx @@ -124,8 +124,8 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; argsType: { name: { control: 'select', - options: ['2000s', '2010s', '2020s'], - default: '2000s', + options: ['classic', 'modern', 'latest'], + default: 'classic', }, }, }} @@ -211,6 +211,8 @@ export const App = () => { }; ``` +> Note: Theme name should always be a string. + ### Theme specific style You can apply theme-specific styling by using the . prefix with the theme name. This API is supported in both `styled()` and the `sx` prop. From 2c1025a785e104c538d39645c3b69f7668f2339d Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 11 Jan 2024 13:07:33 +0530 Subject: [PATCH 4/9] fix: multi provider color mode issue --- packages/styled/react/src/StyledProvider.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/styled/react/src/StyledProvider.tsx b/packages/styled/react/src/StyledProvider.tsx index 37689a65e7..778efcbe5b 100644 --- a/packages/styled/react/src/StyledProvider.tsx +++ b/packages/styled/react/src/StyledProvider.tsx @@ -63,6 +63,8 @@ export const StyledProvider: React.FC<{ }); const { themes } = useTheme(); + const styledContext = useStyled(); + const isParentProviderExist = styledContext?.config ? true : false; const themeContextValue = React.useMemo(() => { if (colorMode) { @@ -130,7 +132,9 @@ export const StyledProvider: React.FC<{ documentElement.classList.add(`gs`); if (currentColorMode) { - document.body.setAttribute('data-theme-id', currentColorMode); + if (!isParentProviderExist) { + document.body.setAttribute('data-theme-id', currentColorMode); + } documentElement.classList.add(`gs-${currentColorMode}`); } else { documentElement.classList.add(`gs-light`); @@ -145,10 +149,14 @@ export const StyledProvider: React.FC<{ if (Platform.OS === 'web') { if (currentColor) { if (currentColor === 'dark') { - document.body.setAttribute('data-theme-id', 'dark'); + if (!isParentProviderExist) { + document.body.setAttribute('data-theme-id', 'dark'); + } documentElement.classList.remove(`gs-light`); } else { - document.body.setAttribute('data-theme-id', 'light'); + if (!isParentProviderExist) { + document.body.setAttribute('data-theme-id', 'light'); + } documentElement.classList.remove(`gs-dark`); } documentElement.classList.add(`gs-${currentColor}`); From db103f7c5be1d0c5fea19e0c51f897e0ddc95729 Mon Sep 17 00:00:00 2001 From: Suraj Date: Thu, 11 Jan 2024 13:18:50 +0530 Subject: [PATCH 5/9] fix: require cycle issue fixed --- packages/styled/react/src/createConfig.ts | 2 +- .../styled/react/src/createGlobalStyles.ts | 2 +- .../styled/react/src/style-sheet/index.ts | 2 +- packages/styled/react/src/styled.tsx | 27 +------------------ packages/styled/react/src/utils.ts | 26 ++++++++++++++++++ 5 files changed, 30 insertions(+), 29 deletions(-) diff --git a/packages/styled/react/src/createConfig.ts b/packages/styled/react/src/createConfig.ts index 0aa1e18560..99c59fb75d 100644 --- a/packages/styled/react/src/createConfig.ts +++ b/packages/styled/react/src/createConfig.ts @@ -6,7 +6,7 @@ import { stableHash } from './stableHash'; import { propertyTokenMap } from './propertyTokenMap'; import { updateOrderUnResolvedMap } from './updateOrderUnResolvedMap'; import { GluestackStyleSheet } from './style-sheet'; -import { resolvePlatformTheme } from './styled'; +import { resolvePlatformTheme } from './utils'; import { Platform } from 'react-native'; /********************* PLUGINS *****************************/ diff --git a/packages/styled/react/src/createGlobalStyles.ts b/packages/styled/react/src/createGlobalStyles.ts index 558e501c3b..3ef0ebb204 100644 --- a/packages/styled/react/src/createGlobalStyles.ts +++ b/packages/styled/react/src/createGlobalStyles.ts @@ -1,6 +1,6 @@ import { convertStyledToStyledVerbosed } from './convertSxToSxVerbosed'; import { stableHash } from './stableHash'; -import { resolvePlatformTheme } from './styled'; +import { resolvePlatformTheme } from './utils'; import { updateOrderUnResolvedMap } from './updateOrderUnResolvedMap'; export const createGlobalStyles = (globalStyle: object, Platform: any) => { diff --git a/packages/styled/react/src/style-sheet/index.ts b/packages/styled/react/src/style-sheet/index.ts index 9a7e5b1fc7..855b5248a3 100644 --- a/packages/styled/react/src/style-sheet/index.ts +++ b/packages/styled/react/src/style-sheet/index.ts @@ -1,7 +1,7 @@ import { StyledValueToCSSObject, themeStyledValueToCSSObject, -} from '../resolver'; +} from '../resolver/StyledValueToCSSObject'; import type { OrderedSXResolved } from '../types'; import { getCSSIdAndRuleset } from '../updateCSSStyleInOrderedResolved.web'; import { diff --git a/packages/styled/react/src/styled.tsx b/packages/styled/react/src/styled.tsx index 03454bed2c..77e07a353f 100644 --- a/packages/styled/react/src/styled.tsx +++ b/packages/styled/react/src/styled.tsx @@ -35,6 +35,7 @@ import { styledResolvedToOrderedSXResolved } from './resolver/orderedResolved'; import { styledToStyledResolved } from './resolver/styledResolved'; import { getStyleIds } from './resolver/getStyleIds'; import { injectComponentAndDescendantStyles } from './resolver/injectComponentAndDescendantStyles'; +import { resolvePlatformTheme } from './utils'; import { convertStyledToStyledVerbosed, @@ -692,32 +693,6 @@ function mergeArraysInObjects(...objects: any) { return merged; } -export function resolvePlatformTheme(theme: any, platform: any) { - if (typeof theme === 'object') { - Object.keys(theme).forEach((themeKey) => { - if (themeKey !== 'style' && themeKey !== 'defaultProps') { - if (theme[themeKey].platform) { - let temp = { ...theme[themeKey] }; - theme[themeKey] = deepMerge(temp, theme[themeKey].platform[platform]); - delete theme[themeKey].platform; - resolvePlatformTheme(theme[themeKey], platform); - } else if (themeKey === 'queries') { - theme[themeKey].forEach((query: any) => { - if (query.value.platform) { - let temp = { ...query.value }; - query.value = deepMerge(temp, query.value.platform[platform]); - delete query.value.platform; - } - resolvePlatformTheme(query.value, platform); - }); - } else { - resolvePlatformTheme(theme[themeKey], platform); - } - } - }); - } -} - export function getVariantProps( props: any, theme: any, diff --git a/packages/styled/react/src/utils.ts b/packages/styled/react/src/utils.ts index 33a3ebb9d6..be4ea54629 100644 --- a/packages/styled/react/src/utils.ts +++ b/packages/styled/react/src/utils.ts @@ -600,3 +600,29 @@ export function addThemeConditionInMeta(originalThemeObject: any, CONFIG: any) { }); return themeObject; } + +export function resolvePlatformTheme(theme: any, platform: any) { + if (typeof theme === 'object') { + Object.keys(theme).forEach((themeKey) => { + if (themeKey !== 'style' && themeKey !== 'defaultProps') { + if (theme[themeKey].platform) { + let temp = { ...theme[themeKey] }; + theme[themeKey] = deepMerge(temp, theme[themeKey].platform[platform]); + delete theme[themeKey].platform; + resolvePlatformTheme(theme[themeKey], platform); + } else if (themeKey === 'queries') { + theme[themeKey].forEach((query: any) => { + if (query.value.platform) { + let temp = { ...query.value }; + query.value = deepMerge(temp, query.value.platform[platform]); + delete query.value.platform; + } + resolvePlatformTheme(query.value, platform); + }); + } else { + resolvePlatformTheme(theme[themeKey], platform); + } + } + }); + } +} From 77eed03bbf6482245956569c585bc6dcb662569d Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 11 Jan 2024 13:48:20 +0530 Subject: [PATCH 6/9] fix: inline theme performance --- packages/styled/react/src/StyledProvider.tsx | 29 +++++++++++ .../src/resolver/StyledValueToCSSObject.ts | 50 ++++++++++--------- 2 files changed, 55 insertions(+), 24 deletions(-) diff --git a/packages/styled/react/src/StyledProvider.tsx b/packages/styled/react/src/StyledProvider.tsx index 778efcbe5b..3b969de0b5 100644 --- a/packages/styled/react/src/StyledProvider.tsx +++ b/packages/styled/react/src/StyledProvider.tsx @@ -5,6 +5,7 @@ import { propertyTokenMap } from './propertyTokenMap'; import type { COLORMODES } from './types'; import { convertTokensToCssVariables, + deepMerge, platformSpecificSpaceUnits, } from './utils'; import { createGlobalStylesWeb } from './createGlobalStylesWeb'; @@ -13,6 +14,7 @@ import { injectGlobalCssStyle } from './injectInStyle'; import { ThemeContext, useTheme } from './Theme'; import { useSafeLayoutEffect } from './hooks/useSafeLayoutEffect'; import { resolveThemes } from './createConfig'; +import { deepClone } from './utils/cssify/utils/common'; type Config = any; let colorModeSet = false; @@ -45,6 +47,29 @@ const setCurrentColorMode = (inputColorMode: string | undefined) => { // colorModeSet = true; // } }; + +function generateMergedThemeTokens(CONFIG: any) { + const mergedTokens: any = CONFIG; + const tokens = deepClone(CONFIG.tokens); + const themeTokens: any = {}; + + if (CONFIG?.themes) { + Object.keys(CONFIG.themes).forEach((key) => { + // tokens is a reserved key to merge theme tokens + if (key !== 'tokens') { + themeTokens[key] = deepMerge(tokens, CONFIG.themes[key]); + } + }); + + if (themeTokens) { + mergedTokens.themes.tokens = {}; + Object.assign(mergedTokens.themes.tokens, themeTokens); + } + } + + return mergedTokens; +} + export const StyledProvider: React.FC<{ config: Config; colorMode?: COLORMODES; @@ -98,6 +123,10 @@ export const StyledProvider: React.FC<{ ); } + configWithPlatformSpecificUnits = generateMergedThemeTokens( + configWithPlatformSpecificUnits + ); + return configWithPlatformSpecificUnits; }, [config]); diff --git a/packages/styled/react/src/resolver/StyledValueToCSSObject.ts b/packages/styled/react/src/resolver/StyledValueToCSSObject.ts index 8eaecb678a..3f5b0e5751 100644 --- a/packages/styled/react/src/resolver/StyledValueToCSSObject.ts +++ b/packages/styled/react/src/resolver/StyledValueToCSSObject.ts @@ -1,6 +1,5 @@ import type { CSSObject, StyledValue } from '../types'; -import { deepMerge, resolvedTokenization } from '../utils'; -import { deepClone } from '../utils/cssify/utils/common'; +import { resolvedTokenization } from '../utils'; export function StyledValueToCSSObject( input: StyledValue | undefined, @@ -11,6 +10,7 @@ export function StyledValueToCSSObject( if (!input) { return {}; } + return resolvedTokenization(input, CONFIG, ignoreKeys, deleteIfTokenNotExist); } export function themeStyledValueToCSSObject( @@ -20,34 +20,36 @@ export function themeStyledValueToCSSObject( ) { let themeResolved1: any = {}; if (CONFIG?.themes) { - const tokens = deepClone(CONFIG.tokens); - Object.keys(CONFIG?.themes).forEach((key: any) => { - const themeTokens = CONFIG?.themes[key]; - Object.keys(themeTokens).forEach((tokenKey1: any) => { - Object.keys(themeTokens[tokenKey1]).forEach((tokenKey: any) => { - delete tokens[tokenKey1][tokenKey]; - }); - }); - }); + // const tokens = deepClone(CONFIG.tokens); + // Object.keys(CONFIG?.themes).forEach((key: any) => { + // const themeTokens = CONFIG?.themes[key]; + // Object.keys(themeTokens).forEach((tokenKey1: any) => { + // Object.keys(themeTokens[tokenKey1]).forEach((tokenKey: any) => { + // delete tokens[tokenKey1][tokenKey]; + // }); + // }); + // }); // debugger; Object.keys(CONFIG?.themes).forEach((key: any) => { - const themeResolved = StyledValueToCSSObject( - input, - { - ...CONFIG, - tokens: deepMerge(deepClone(tokens), CONFIG.themes[key]), - }, - ignoreKeys, - true - ); + if (key !== 'tokens') { + const themeResolved = StyledValueToCSSObject( + input, + { + ...CONFIG, + tokens: CONFIG?.themes?.tokens[key], + }, + ignoreKeys, + true + ); - Object.keys(themeResolved).forEach((key) => - themeResolved[key] === undefined ? delete themeResolved[key] : {} - ); + Object.keys(themeResolved).forEach((key) => + themeResolved[key] === undefined ? delete themeResolved[key] : {} + ); - themeResolved1[key] = themeResolved; + themeResolved1[key] = themeResolved; + } }); } From 2f4f60b062ba626a6e156b1a2552177e873fc38e Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 11 Jan 2024 15:33:56 +0530 Subject: [PATCH 7/9] fix: refactor code --- .../react/src/resolver/StyledValueToCSSObject.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/styled/react/src/resolver/StyledValueToCSSObject.ts b/packages/styled/react/src/resolver/StyledValueToCSSObject.ts index 3f5b0e5751..dae1d69a4c 100644 --- a/packages/styled/react/src/resolver/StyledValueToCSSObject.ts +++ b/packages/styled/react/src/resolver/StyledValueToCSSObject.ts @@ -32,23 +32,23 @@ export function themeStyledValueToCSSObject( // debugger; - Object.keys(CONFIG?.themes).forEach((key: any) => { - if (key !== 'tokens') { + Object.keys(CONFIG?.themes).forEach((themeName: any) => { + if (themeName !== 'tokens') { const themeResolved = StyledValueToCSSObject( input, { ...CONFIG, - tokens: CONFIG?.themes?.tokens[key], + tokens: CONFIG?.themes?.tokens[themeName], }, ignoreKeys, true ); - Object.keys(themeResolved).forEach((key) => + Object.keys(themeResolved).forEach((key: any) => themeResolved[key] === undefined ? delete themeResolved[key] : {} ); - themeResolved1[key] = themeResolved; + themeResolved1[themeName] = themeResolved; } }); } From 607260c150b461464402f4a53e57ed77ed7ffa44 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 11 Jan 2024 15:40:14 +0530 Subject: [PATCH 8/9] fix: refactor code --- packages/styled/react/src/StyledProvider.tsx | 25 +------------------- packages/styled/react/src/utils.ts | 23 ++++++++++++++++++ 2 files changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/styled/react/src/StyledProvider.tsx b/packages/styled/react/src/StyledProvider.tsx index 3b969de0b5..7fcbbbc519 100644 --- a/packages/styled/react/src/StyledProvider.tsx +++ b/packages/styled/react/src/StyledProvider.tsx @@ -5,7 +5,7 @@ import { propertyTokenMap } from './propertyTokenMap'; import type { COLORMODES } from './types'; import { convertTokensToCssVariables, - deepMerge, + generateMergedThemeTokens, platformSpecificSpaceUnits, } from './utils'; import { createGlobalStylesWeb } from './createGlobalStylesWeb'; @@ -14,7 +14,6 @@ import { injectGlobalCssStyle } from './injectInStyle'; import { ThemeContext, useTheme } from './Theme'; import { useSafeLayoutEffect } from './hooks/useSafeLayoutEffect'; import { resolveThemes } from './createConfig'; -import { deepClone } from './utils/cssify/utils/common'; type Config = any; let colorModeSet = false; @@ -48,28 +47,6 @@ const setCurrentColorMode = (inputColorMode: string | undefined) => { // } }; -function generateMergedThemeTokens(CONFIG: any) { - const mergedTokens: any = CONFIG; - const tokens = deepClone(CONFIG.tokens); - const themeTokens: any = {}; - - if (CONFIG?.themes) { - Object.keys(CONFIG.themes).forEach((key) => { - // tokens is a reserved key to merge theme tokens - if (key !== 'tokens') { - themeTokens[key] = deepMerge(tokens, CONFIG.themes[key]); - } - }); - - if (themeTokens) { - mergedTokens.themes.tokens = {}; - Object.assign(mergedTokens.themes.tokens, themeTokens); - } - } - - return mergedTokens; -} - export const StyledProvider: React.FC<{ config: Config; colorMode?: COLORMODES; diff --git a/packages/styled/react/src/utils.ts b/packages/styled/react/src/utils.ts index be4ea54629..9c00917656 100644 --- a/packages/styled/react/src/utils.ts +++ b/packages/styled/react/src/utils.ts @@ -1,7 +1,30 @@ import type { Config } from './types'; +import { deepClone } from './utils/cssify/utils/common'; const propsNotToConvertToCSSVariables = ['shadowColor', 'textShadowColor']; +export function generateMergedThemeTokens(CONFIG: any) { + const mergedTokens: any = CONFIG; + const tokens = deepClone(CONFIG.tokens); + const themeTokens: any = {}; + + if (CONFIG?.themes) { + Object.keys(CONFIG.themes).forEach((key) => { + // tokens is a reserved key to merge theme tokens + if (key !== 'tokens') { + themeTokens[key] = deepMerge(tokens, CONFIG.themes[key]); + } + }); + + if (themeTokens) { + mergedTokens.themes.tokens = {}; + Object.assign(mergedTokens.themes.tokens, themeTokens); + } + } + + return mergedTokens; +} + export function convertToUnicodeString(inputString: any) { let result = ''; if (!inputString) { From 27d8f8c66791f5abd184288017ebd00074dc81b7 Mon Sep 17 00:00:00 2001 From: ankit-tailor Date: Thu, 11 Jan 2024 15:43:55 +0530 Subject: [PATCH 9/9] v1.0.34 --- packages/styled/react/CHANGELOG.md | 7 +++++++ packages/styled/react/package.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/styled/react/CHANGELOG.md b/packages/styled/react/CHANGELOG.md index 1649eb4d83..67bcb2dc82 100644 --- a/packages/styled/react/CHANGELOG.md +++ b/packages/styled/react/CHANGELOG.md @@ -1,5 +1,12 @@ # @gluestack-style/react +## 1.0.34 + +### Patch Changes + +- Fixed inline theme performance [PR](https://github.com/gluestack/gluestack-ui/pull/1606) +- Fixed multiple provider color mode issue [PR](https://github.com/gluestack/gluestack-ui/pull/1602) + ## 1.0.33 ### Patch Changes diff --git a/packages/styled/react/package.json b/packages/styled/react/package.json index 456f6709bd..5406001028 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.33", + "version": "1.0.34", "keywords": [ "React Native", "Next.js",