diff --git a/packages/styled/babel-plugin-styled-resolver/babel.config.js b/packages/styled/babel-plugin-styled-resolver/babel.config.js deleted file mode 100644 index 0428790e79..0000000000 --- a/packages/styled/babel-plugin-styled-resolver/babel.config.js +++ /dev/null @@ -1,21 +0,0 @@ -const path = require('path'); - -module.exports = function (api) { - api.cache(true); - return { - presets: ['babel-preset-expo'], - plugins: [ - // process.env.NODE_ENV !== 'production' - // ? [ - // 'module-resolver', - // { - // alias: { - // // For development, we want to alias the library to the source - // // ['@gluestack/ui-styled']: path.join(__dirname, '../styled/src'), - // }, - // }, - // ] - // : ['transform-remove-console'], - ], - }; -}; diff --git a/packages/styled/babel-plugin-styled-resolver/package.json b/packages/styled/babel-plugin-styled-resolver/package.json index d77312bfe8..e4406e35d8 100644 --- a/packages/styled/babel-plugin-styled-resolver/package.json +++ b/packages/styled/babel-plugin-styled-resolver/package.json @@ -1,6 +1,6 @@ { "name": "@gluestack-style/babel-plugin-styled-resolver", - "version": "1.0.2", + "version": "1.0.5", "description": "A gluestack-style babel plugin that transpiles your styled function calls and resolves the component styling in build time.", "keywords": [ "css-in-js", @@ -44,11 +44,8 @@ "@babel/plugin-transform-typescript": "^7.20.2", "@babel/preset-typescript": "^7.18.6", "@babel/traverse": "^7.20.5", - "@rollup/plugin-node-resolve": "^15.2.3", - "@rollup/plugin-typescript": "^11.1.5", - "babel-preset-expo": "^9.5.2", - "lodash.merge": "^4.6.2", - "rollup": "^4.6.0" + "esbuild": "^0.19.8", + "lodash.merge": "^4.6.2" }, "react-native-builder-bob": { "source": "src", diff --git a/packages/styled/babel-plugin-styled-resolver/src/buildConfig.js b/packages/styled/babel-plugin-styled-resolver/src/buildConfig.js index 214fa44008..a04aecbef5 100644 --- a/packages/styled/babel-plugin-styled-resolver/src/buildConfig.js +++ b/packages/styled/babel-plugin-styled-resolver/src/buildConfig.js @@ -1,40 +1,9 @@ -/* eslint-disable no-console */ -const rollupTypescriptPlugin = require('@rollup/plugin-typescript'); -const rollup = require('rollup'); -const resolve = require('@rollup/plugin-node-resolve'); const fs = require('fs'); const path = require('path'); +const esbuild = require('esbuild'); -async function buildAndRun(rollupConfig) { - try { - await cleanup(); - const bundle = await rollup.rollup(rollupConfig); - - await bundle.write(rollupConfig.output); - } catch (err) { - console.log(err); - } -} - -function cleanup() { - return new Promise((resolve, reject) => { - if (fs.existsSync(`${process.cwd()}/.gluestack`)) { - fs.rm( - `${process.cwd()}/.gluestack`, - { recursive: true, force: true }, - (err) => { - if (err) { - reject(err); - } else { - resolve(`Removed ${process.cwd()}/.gluestack`); - } - } - ); - } else { - resolve('Preparing for build...'); - } - }); -} +const OUTPUT_FILE = `./.gluestack/config-${process.ppid}.js`; +const MOCK_LIBRARY = `./mock-${process.ppid}.js`; function getConfigPath() { const isConfigJSExist = fs.existsSync( @@ -56,7 +25,7 @@ function getConfigPath() { if (isGlueStackUIConfigTSExist) return './gluestack-ui.config.ts'; } -const globals = `const react = { +const mockLibrary = `const react = { forwardRef: () => {}, createElement: () => {}, }; @@ -91,39 +60,46 @@ const gluestackStyleLegendMotionAnimationDriver = { }; const gluestackStyleMotiAnimationDriver = { }; + +module.exports = { + ...react, + ...reactNative, + ...gluestackStyleReact, + ...gluestackStyleAnimationResolver, + ...gluestackStyleLegendMotionAnimationDriver, + ...gluestackStyleMotiAnimationDriver, +} `; -const generateRollupConfig = (config = {}) => { - const rollupConfig = { - input: getConfigPath(), - output: { - file: `./.gluestack/config-${process.ppid}.js`, // The bundled JavaScript file - format: 'iife', // iife format for Node.js - globals: { - 'react': 'react', - 'react-native': 'reactNative', - '@gluestack-style/react': 'gluestackStyleReact', - '@gluestack-style/animation-resolver': - 'gluestackStyleAnimationResolver', - '@gluestack-style/legend-motion-animation-driver': - 'gluestackStyleLegendMotionAnimationDriver', - '@gluestack-style/moti-animation-driver': - 'gluestackStyleMotiAnimationDriver', - }, - name: 'config', - banner: globals, - footer: 'module.exports = config;', +const getEsBuildConfigOptions = ( + inputDir, + outputDir = OUTPUT_FILE, + mockedLibraryPath = MOCK_LIBRARY +) => { + const entryPoint = inputDir ?? getConfigPath(); + + const esbuildConfigOptions = { + entryPoints: [entryPoint], + bundle: true, + outfile: outputDir, + format: 'iife', + globalName: 'config', + // banner: { + // js: globals, + // }, + alias: { + 'react-native': mockedLibraryPath, + '@gluestack-style/react': mockedLibraryPath, + '@gluestack-style/animation-resolver': mockedLibraryPath, + '@gluestack-style/legend-motion-animation-driver': mockedLibraryPath, + '@gluestack-style/moti-animation-driver': mockedLibraryPath, }, - plugins: [ - resolve({ - extensions: ['.js', '.ts', '.tsx', '.jsx', '.json'], // Add your custom file extensions here - }), - rollupTypescriptPlugin({ - compilerOptions: { lib: ['es5', 'es6', 'dom'], target: 'es5' }, - tsconfig: false, - // typescript: require('some-fork-of-typescript'), - }), - ], + target: 'node18', + footer: { + js: 'module.exports = config;', + }, + resolveExtensions: ['.js', '.ts', '.tsx', '.jsx', '.json'], + platform: 'node', external: [ 'react', 'react-native', @@ -131,23 +107,82 @@ const generateRollupConfig = (config = {}) => { '@gluestack-style/animation-resolver', '@gluestack-style/legend-motion-animation-driver', '@gluestack-style/moti-animation-driver', + mockedLibraryPath, ], - ...config, }; - return rollupConfig; + return esbuildConfigOptions; }; -const getConfig = async (configPath) => { - const rollupConfig = generateRollupConfig(); +function cleanup() { + if (fs.existsSync(`${process.cwd()}/.gluestack`)) { + fs.rmSync( + `${process.cwd()}/.gluestack`, + { recursive: true, force: true }, + (err) => { + if (err) { + console.error(err); + } else { + // eslint-disable-next-line no-console + console.log(`Removed ${process.cwd()}/.gluestack`); + // eslint-disable-next-line no-console + console.log('Preparing for build...'); + } + } + ); + } +} + +function buildConfig(inputDir, outputDir, mockLibraryPath) { try { - await buildAndRun(rollupConfig); - console.log('Config built successfully!'); - const { config } = require(`${process.cwd()}/.gluestack/config-${ - process.ppid - }.js`); - return config; + const esbuildConfigOptions = getEsBuildConfigOptions( + inputDir, + outputDir, + mockLibraryPath + ); + esbuild.buildSync(esbuildConfigOptions); + } catch (err) { + console.error(err); + } +} + +function buildMockLibrary(mockedLibraryPath) { + const gluestackFolderPath = path.join(process.cwd(), './.gluestack'); + const mockLibraryFullPath = path.resolve( + gluestackFolderPath, + mockedLibraryPath + ); + if (!fs.existsSync(gluestackFolderPath)) { + fs.mkdirSync(gluestackFolderPath); + } + + fs.writeFileSync(mockLibraryFullPath, mockLibrary); +} + +function cleanupAndBuildConfig(inputDir, outputDir, mockedLibraryPath) { + try { + cleanup(); + buildMockLibrary(mockedLibraryPath); + buildConfig(inputDir, outputDir, mockedLibraryPath); + } catch (err) { + console.error(err); + } +} + +const getConfig = ( + inputDir, + outputDir = OUTPUT_FILE, + mockLibraryPath = MOCK_LIBRARY +) => { + try { + if (inputDir) { + cleanupAndBuildConfig(inputDir, outputDir, mockLibraryPath); + const configFile = require(`${process.cwd()}/${outputDir}`); + return configFile; + } else { + return {}; + } } catch (err) { - console.log('Error: ', rollupConfig, err); + console.error(err); } }; diff --git a/packages/styled/babel-plugin-styled-resolver/src/index.js b/packages/styled/babel-plugin-styled-resolver/src/index.js index 4706cc68b1..3526a19987 100644 --- a/packages/styled/babel-plugin-styled-resolver/src/index.js +++ b/packages/styled/babel-plugin-styled-resolver/src/index.js @@ -7,6 +7,26 @@ const traverse = require('@babel/traverse').default; const types = require('@babel/types'); const { getConfig: buildAndGetConfig } = require('./buildConfig'); +let ConfigDefault = {}; + +let configFile; +const isConfigExist = fs.existsSync( + `${process.cwd()}/.gluestack/config-${process.ppid}.js` +); + +if (!isConfigExist) { + const outputDir = `.gluestack/config-${process.ppid}.js`; + const inputDir = getConfigPath(); + + if (inputDir) { + configFile = buildAndGetConfig(inputDir, outputDir); + ConfigDefault = configFile?.config; + } +} else { + configFile = require(`${process.cwd()}/.gluestack/config-${process.ppid}.js`); + ConfigDefault = configFile?.config; +} + const { convertStyledToStyledVerbosed, convertSxToSxVerbosed, @@ -35,10 +55,29 @@ const { checkAndReturnUtilityProp, } = require('@gluestack-style/react/lib/commonjs/core/convert-utility-to-sx'); -const IMPORT_NAME = '@gluestack-style/react'; let configThemePath = []; const BUILD_TIME_GLUESTACK_STYLESHEET = new StyleInjector(); +function getConfigPath() { + const isConfigJSExist = fs.existsSync( + path.join(process.cwd(), './gluestack-style.config.js') + ); + const isGlueStackUIConfigJSExist = fs.existsSync( + path.join(process.cwd(), './gluestack-ui.config.js') + ); + const isConfigTSExist = fs.existsSync( + path.join(process.cwd(), './gluestack-style.config.ts') + ); + const isGlueStackUIConfigTSExist = fs.existsSync( + path.join(process.cwd(), './gluestack-ui.config.ts') + ); + + if (isConfigJSExist) return './gluestack-style.config.js'; + if (isConfigTSExist) return './gluestack-style.config.ts'; + if (isGlueStackUIConfigJSExist) return './gluestack-ui.config.js'; + if (isGlueStackUIConfigTSExist) return './gluestack-ui.config.ts'; +} + const convertExpressionContainerToStaticObject = ( properties, result = {}, @@ -232,14 +271,12 @@ function getConfig(configPath) { ); } if (isGlueStackUIConfigJSExist) { - configThemePath = ['theme']; return fs.readFileSync( path.join(process.cwd(), './gluestack-ui.config.js'), 'utf8' ); } if (isGlueStackUIConfigTSExist) { - configThemePath = ['theme']; return fs.readFileSync( path.join(process.cwd(), './gluestack-ui.config.ts'), 'utf8' @@ -337,58 +374,6 @@ function getBuildTimeParams( return null; } -function getExportedConfigFromFileString(fileData) { - if (!fileData) { - return {}; - } - - fileData = fileData?.replace(/as const/g, ''); - - const ast = babel.parse(fileData, { - presets: [babelPresetTypeScript], - plugins: ['typescript'], - sourceType: 'module', - comments: false, - }); - - let config = {}; - - traverse(ast, { - CallExpression: (path) => { - const { callee, arguments: args } = path.node; - if ( - types.isIdentifier(callee, { name: 'createConfig' }) && - args.length === 1 && - types.isObjectExpression(args[0]) - ) { - path.replaceWith(args[0]); - } - }, - }); - - traverse(ast, { - ExportNamedDeclaration: (path) => { - path.traverse({ - VariableDeclarator: (variableDeclaratorPath) => { - config = variableDeclaratorPath.node.init; - }, - }); - }, - - Identifier: (path) => { - if (path.node.name === 'undefined') { - //path.remove(); - path.node.name = 'null'; - } - }, - }); - - let objectCode = generate(config).code; - objectCode = objectCode?.replace(/\/\/.*|\/\*[\s\S]*?\*\//g, ''); - objectCode = addQuotesToObjectKeys(objectCode)?.replace(/'/g, '"'); - - return JSON.parse(objectCode); -} function replaceSingleQuotes(str) { let inDoubleQuotes = false; let newStr = ''; @@ -551,25 +536,6 @@ function isImportFromAbsolutePath( return false; } -let CONFIG; -const isConfigExist = fs.existsSync( - `${process.cwd()}/.gluestack/config-${process.ppid}.js` -); - -let ConfigDefault = CONFIG; - -if (!isConfigExist) { - buildAndGetConfig() - .then((res) => { - CONFIG = res; - ConfigDefault = res; - }) - .catch((err) => { - // eslint-disable-next-line no-console - console.log(err); - }); -} - module.exports = function (b) { const { types: t } = b; @@ -588,13 +554,11 @@ module.exports = function (b) { let styledAlias = ''; let styledAliasImportedName = ''; let tempPropertyResolverNode; - let isValidConfig = true; let platform = 'all'; let currentFileName = 'file not found!'; let configPath; let outputLibrary; let componentSXProp; - let componentUtilityProps; const guessingStyledComponents = []; const styled = ['@gluestack-style/react', '@gluestack-ui/themed']; const components = ['@gluestack-ui/themed']; @@ -608,60 +572,69 @@ module.exports = function (b) { return { name: 'gluestack-babel-styled-resolver', // not required - // async pre(state) { - // let plugin; - - // state.opts.plugins?.forEach((currentPlugin) => { - // if (currentPlugin.key === 'gluestack-babel-styled-resolver') { - // plugin = currentPlugin; - // } - // }); - - // const configPath = plugin?.options?.configPath; - - // if (!isConfigExist) { - // const res = await buildAndGetConfig(configPath); - // ConfigDefault = res; - // } - // }, + pre(state) { + let plugin; + + state?.opts?.plugins?.forEach((currentPlugin) => { + if (currentPlugin.key === 'gluestack-babel-styled-resolver') { + plugin = currentPlugin; + } + }); + + if (plugin?.options?.configPath) { + configPath = plugin?.options?.configPath; + } + + if (plugin?.options?.configThemePath) { + configThemePath = plugin?.options?.configThemePath; + } + + const outputDir = `.gluestack/config-${process.ppid + 1}.js`; + const mockLibraryPath = `./mock-${process.ppid + 1}.js`; + + if (configPath) { + if (!fs.existsSync(path.join(process.cwd(), outputDir))) { + configFile = buildAndGetConfig( + configPath, + outputDir, + mockLibraryPath + ); + + if (configThemePath.length > 0) { + configThemePath.forEach((path) => { + configFile = configFile?.[path]; + }); + configThemePath = []; + ConfigDefault = configFile; + } else { + ConfigDefault = configFile?.config; + } + } else { + configFile = require(path.join(process.cwd(), outputDir)); + if (configThemePath.length > 0) { + configThemePath.forEach((path) => { + configFile = configFile?.[path]; + }); + configThemePath = []; + ConfigDefault = configFile; + } else { + ConfigDefault = configFile?.config; + } + } + } + }, visitor: { ImportDeclaration(importPath, state) { currentFileName = state.file.opts.filename; styledAlias = state?.opts?.styledAlias; outputLibrary = state?.opts?.outputLibrary || outputLibrary; - if (state?.opts?.configPath) { - configPath = state?.opts?.configPath; - } - - if (state?.opts?.configThemePath) { - configThemePath = state?.opts?.configThemePath; - } if (state?.opts?.platform) { platform = state?.opts?.platform; } else { platform = 'all'; } - // `${process.cwd()}/.gluestack/config-${process.ppid}.js` - - // if ( - // configPath && - // !fs.existsSync(path.join(process.cwd(), `.gluestack/config-${process.ppid}.js`)) - // ) { - // // ConfigDefault = getExportedConfigFromFileString( - // // getConfig(configPath) - // // ); - // ConfigDefault = buildAndGetConfig(configPath); - // } - - // configThemePath.forEach((path) => { - // ConfigDefault = ConfigDefault?.[path]; - // }); - // configThemePath = []; - - // console.log(ConfigDefault, '>>>>>>>>>>>>>>>'); - if (!currentFileName.includes('node_modules')) { if (currentFileName.includes('.web.')) { platform = 'web'; @@ -736,7 +709,6 @@ module.exports = function (b) { styledAliasImportedName || expressionPath?.node?.right?.callee?.name === styledImportName ) { - // console.log(expressionPath.node, '>>>>>'); let componentName = expressionPath?.parent?.id?.name; if (componentName) { @@ -744,8 +716,8 @@ module.exports = function (b) { } } }, - CallExpression(callExpressionPath) { - if (isValidConfig) { + CallExpression(callExpressionPath, state) { + if (!state.file.opts.filename?.includes('node_modules')) { const calleeName = callExpressionPath.node.callee.name; if ( calleeName === styledAliasImportedName || @@ -899,41 +871,44 @@ module.exports = function (b) { */ const extendedThemeComponents = callExpressionPath.node.arguments[0].properties; - extendedThemeComponents.forEach((property) => { - if ( - !t.isIdentifier(property.value) && - !t.isTemplateLiteral(property.value) && - !t.isConditionalExpression(property.value) - ) { - const { themeNode, componentConfigNode } = - findThemeAndComponentConfig(property.value.properties); - - let theme = themeNode - ? getObjectFromAstNode(themeNode?.value) - : {}; - let componentConfig = componentConfigNode - ? getObjectFromAstNode(componentConfigNode?.value) - : {}; - - const resultParamsNode = getBuildTimeParams( - theme, - componentConfig, - {}, - outputLibrary, - platform, - 'extended' - ); - if (resultParamsNode) { - property.value.properties.push( - t.objectProperty( - t.stringLiteral('BUILD_TIME_PARAMS'), - resultParamsNode - ) + if (Array.isArray(extendedThemeComponents)) { + extendedThemeComponents.forEach((property) => { + if ( + !t.isIdentifier(property.value) && + !t.isTemplateLiteral(property.value) && + !t.isConditionalExpression(property.value) + ) { + const { themeNode, componentConfigNode } = + findThemeAndComponentConfig(property.value.properties); + + let theme = themeNode + ? getObjectFromAstNode(themeNode?.value) + : {}; + let componentConfig = componentConfigNode + ? getObjectFromAstNode(componentConfigNode?.value) + : {}; + + const resultParamsNode = getBuildTimeParams( + theme, + componentConfig, + {}, + outputLibrary, + platform, + 'extended' ); + + if (resultParamsNode) { + property.value.properties.push( + t.objectProperty( + t.stringLiteral('BUILD_TIME_PARAMS'), + resultParamsNode + ) + ); + } } - } - }); + }); + } } } }, @@ -945,10 +920,10 @@ module.exports = function (b) { jsxOpeningElementPath.node.name.name ) ) { - let propsToBePersist = []; + const propsToBePersist = []; let sxPropsWithIdentifier = {}; - let mergedPropertyConfig = { + const mergedPropertyConfig = { ...ConfigDefault?.propertyTokenMap, ...propertyTokenMap, }; @@ -970,22 +945,24 @@ module.exports = function (b) { const prefixedMediaQueries = {}; - Object.keys(componentExtendedConfig?.tokens?.mediaQueries).forEach( - (key) => { - prefixedMediaQueries[key] = { - key: `@${key}`, - isMediaQuery: true, - }; - } - ); + if (componentExtendedConfig?.tokens?.mediaQueries) { + Object.keys(componentExtendedConfig?.tokens?.mediaQueries).forEach( + (key) => { + prefixedMediaQueries[key] = { + key: `@${key}`, + isMediaQuery: true, + }; + } + ); - Object.assign(reservedKeys, { ...prefixedMediaQueries }); + Object.assign(reservedKeys, { ...prefixedMediaQueries }); + } - const attr = jsxOpeningElementPath.node.attributes; + const attr = jsxOpeningElementPath?.node?.attributes; attr.forEach((attribute, index) => { if (t.isJSXAttribute(attribute)) { - const propName = attribute.name.name; - const propValue = attribute.value; + const propName = attribute?.name?.name; + const propValue = attribute?.value; if (t.isJSXExpressionContainer(propValue)) { if ( @@ -1091,7 +1068,7 @@ module.exports = function (b) { value: utilityPropValue, } = checkAndReturnUtilityProp( propName, - propValue.value, + propValue?.value, styledSystemProps, [], reservedKeys @@ -1144,7 +1121,7 @@ module.exports = function (b) { platform ); - const toBeInjected = BUILD_TIME_GLUESTACK_STYLESHEET.resolve( + BUILD_TIME_GLUESTACK_STYLESHEET.resolve( styledIds, componentExtendedConfig, {}, @@ -1163,13 +1140,12 @@ module.exports = function (b) { } }); - let styleIdsAst = generateObjectAst(verbosedStyleIds); + const styleIdsAst = generateObjectAst(verbosedStyleIds); - let toBeInjectedAst = generateObjectAst(toBeInjected); - - let orderResolvedArrayExpression = []; + const orderResolvedArrayExpression = []; orderedResolvedTheme.forEach((styledResolved) => { + delete styledResolved.toBeInjected; if (targetPlatform === 'native') { delete styledResolved.original; delete styledResolved.value; @@ -1181,14 +1157,10 @@ module.exports = function (b) { delete styledResolved.extendedConfig; delete styledResolved.value; } - let orderedResolvedAst = generateObjectAst(styledResolved); + const orderedResolvedAst = generateObjectAst(styledResolved); orderResolvedArrayExpression.push(orderedResolvedAst); }); - let orderedStyleIdsArrayAst = t.arrayExpression( - styledIds?.map((cssId) => t.stringLiteral(cssId)) - ); - jsxOpeningElementPath.node.attributes.push( t.jsxAttribute( t.jsxIdentifier('verbosedStyleIds'), @@ -1219,7 +1191,6 @@ module.exports = function (b) { } componentSXProp = undefined; - componentUtilityProps = undefined; } }, }, diff --git a/packages/styled/babel-plugin-styled-resolver/tsconfig.json_old b/packages/styled/babel-plugin-styled-resolver/tsconfig.json_old deleted file mode 100644 index 699c0bc7c8..0000000000 --- a/packages/styled/babel-plugin-styled-resolver/tsconfig.json_old +++ /dev/null @@ -1,29 +0,0 @@ -{ - "include": ["./src"], - "exclude": ["node_modules", "example"], - "compilerOptions": { - "emitDeclarationOnly": true, - "noEmit": false, - "baseUrl": ".", - "declaration": true, - "allowUnreachableCode": false, - "allowUnusedLabels": true, - "esModuleInterop": true, - "importsNotUsedAsValues": "error", - "forceConsistentCasingInFileNames": true, - "jsx": "react", - "lib": ["esnext", "dom"], - "module": "esnext", - "moduleResolution": "node", - "noFallthroughCasesInSwitch": true, - "noImplicitReturns": true, - "noImplicitUseStrict": false, - "noStrictGenericChecks": false, - "noUnusedLocals": false, - "noUnusedParameters": true, - "resolveJsonModule": true, - "skipLibCheck": true, - "strict": true, - "target": "esnext" - } -} diff --git a/packages/styled/react/package.json b/packages/styled/react/package.json index 43dd8f8898..09a24f4ff4 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.22", + "version": "1.0.26", "keywords": [ "React Native", "Next.js", @@ -48,8 +48,7 @@ }, "dependencies": { "inline-style-prefixer": "^6.0.1", - "normalize-css-color": "^1.0.2", - "react-native-svg": "^14.1.0" + "normalize-css-color": "^1.0.2" }, "react-native-builder-bob": { "source": "src", diff --git a/packages/styled/react/src/core/convert-utility-to-sx.ts b/packages/styled/react/src/core/convert-utility-to-sx.ts index 84f6f230b5..266216460c 100644 --- a/packages/styled/react/src/core/convert-utility-to-sx.ts +++ b/packages/styled/react/src/core/convert-utility-to-sx.ts @@ -1,5 +1,4 @@ import { setObjectKeyValue } from './../core/utils'; -import { convertSxToSxVerbosed } from '../convertSxToSxVerbosed'; import { reservedKeys as _reservedKeys } from './styled-system'; import type { reservedKeyType } from './styled-system'; @@ -65,7 +64,10 @@ export const checkAndReturnUtilityProp = ( propPath: [reservedKeys[reservedKey].key], value: propValue, }; - } else if (descendants.includes(reservedKey)) { + } else if ( + Array.isArray(descendants) && + descendants.includes(reservedKey) + ) { return { propPath: [reservedKey], value: propValue, @@ -125,12 +127,8 @@ export const convertUtilityPropsToSX = ( } }); - const sxPropsConvertedUtilityPropsToVerboseSx = convertSxToSxVerbosed( - sxPropsConvertedUtilityProps - ); - return { - sxProps: sxPropsConvertedUtilityPropsToVerboseSx, + sxProps: sxPropsConvertedUtilityProps, mergedProps: ignoredProps, }; }; diff --git a/packages/styled/react/src/core/styled-system.ts b/packages/styled/react/src/core/styled-system.ts index 94e0a44991..997e09f39a 100644 --- a/packages/styled/react/src/core/styled-system.ts +++ b/packages/styled/react/src/core/styled-system.ts @@ -17,8 +17,6 @@ export const CSSPropertiesMap = { bottom: 'auto', direction: 'ltr', display: 'flex', - end: 'auto', - start: 'auto', flex: 'none', flexDirection: 'column', flexBasis: 'auto', diff --git a/packages/styled/react/src/createConfig.ts b/packages/styled/react/src/createConfig.ts index bf411ad7e8..4c978836b7 100644 --- a/packages/styled/react/src/createConfig.ts +++ b/packages/styled/react/src/createConfig.ts @@ -132,7 +132,10 @@ export const resolveComponentTheme = (config: any, componentTheme: any) => { component?.componentConfig ); } else { - GluestackStyleSheet.update(component.BUILD_TIME_PARAMS?.orderedResolved); + const toBeInjected = GluestackStyleSheet.update( + component.BUILD_TIME_PARAMS?.orderedResolved + ); + component.BUILD_TIME_PARAMS.toBeInjected = toBeInjected; resolvedTheme = component; } diff --git a/packages/styled/react/src/styled.tsx b/packages/styled/react/src/styled.tsx index 428ef0aa75..f9b112952c 100644 --- a/packages/styled/react/src/styled.tsx +++ b/packages/styled/react/src/styled.tsx @@ -90,16 +90,8 @@ function convertUtiltiyToSXFromProps( componentStyleConfig: IComponentStyleConfig, reservedKeys: any = _reservedKeys ) { - // if (componentProps.debug === 'BOX_TEST') { - // return { - // sx: {}, - // rest: {}, - // }; - // } const { sx: userSX, ...componentRestProps }: any = componentProps; - const resolvedSXVerbosed = convertSxToSxVerbosed(userSX); - const { sxProps: utilityResolvedSX, mergedProps: restProps } = convertUtilityPropsToSX( styledSystemProps, @@ -108,9 +100,11 @@ function convertUtiltiyToSXFromProps( reservedKeys ); - const resolvedSxVerbose = deepMerge(utilityResolvedSX, resolvedSXVerbosed); + const resolvedSxVerbose = deepMergeObjects(utilityResolvedSX, userSX); - return { sx: resolvedSxVerbose, rest: restProps }; + const resolvedSXVerbosed = convertSxToSxVerbosed(resolvedSxVerbose); + + return { sx: resolvedSXVerbosed, rest: restProps }; } function getStateStyleCSSFromStyleIdsAndProps( @@ -985,7 +979,6 @@ export function verboseStyled( // END BASE COLOR MODE RESOLUTION let CONFIG: any = {}; - let isInjected = false; let plugins: any = []; let reservedKeys = { ..._reservedKeys }; @@ -1269,18 +1262,12 @@ export function verboseStyled( const sxStyleIds: any = React.useRef(BUILD_TIME_VERBOSED_STYLE_IDS); if (BUILD_TIME_ORDERED_RESOLVED.length > 0 && !isClient.current) { - if (!isInjected) { - const toBeInjected = GluestackStyleSheet.update( - BUILD_TIME_ORDERED_RESOLVED - ); + const toBeInjected = GluestackStyleSheet.update( + BUILD_TIME_ORDERED_RESOLVED + ); - if (Platform.OS === 'web') { - GluestackStyleSheet.inject( - toBeInjected, - styledContext.inlineStyleMap - ); - } - isInjected = true; + if (Platform.OS === 'web') { + GluestackStyleSheet.inject(toBeInjected, styledContext.inlineStyleMap); } sxStyleIds.current = BUILD_TIME_VERBOSED_STYLE_IDS; @@ -1988,7 +1975,6 @@ export function verboseStyled( // @ts-ignore Component = plugins[pluginName]?.componentMiddleWare({ Component: Component, - theme, componentStyleConfig, ExtendedConfig,