@gluestack-style/babel-plugin-styled-resolver - npm Package Compare versions

Comparing version 0.1.15-alpha.0 to 0.2.0-alpha.0

lib/index.js

@@ -1,1 +0,1 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var fs=require('fs');var path=require('path');var babel=require('@babel/parser');var generate=require('@babel/generator').default;var babelPresetTypeScript=require('@babel/preset-typescript');var traverse=require('@babel/traverse').default;var types=require('@babel/types');var _require=require('@gluestack-style/react/lib/commonjs/resolver/getStyleIds'),getStyleIds=_require.getStyleIds;var _require2=require('@gluestack-style/react/lib/commonjs/resolver/orderedResolved'),styledResolvedToOrderedSXResolved=_require2.styledResolvedToOrderedSXResolved;var _require3=require('@gluestack-style/react/lib/commonjs/resolver/styledResolved'),styledToStyledResolved=_require3.styledToStyledResolved;var _require4=require('@gluestack-style/react/lib/commonjs/convertSxToSxVerbosed'),convertStyledToStyledVerbosed=_require4.convertStyledToStyledVerbosed,convertSxToSxVerbosed=_require4.convertSxToSxVerbosed;var _require5=require('@gluestack-style/react/lib/commonjs/propertyTokenMap'),propertyTokenMap=_require5.propertyTokenMap;var _require6=require('@gluestack-style/react/lib/commonjs/stableHash'),stableHash=_require6.stableHash;var _require7=require('@gluestack-style/react/lib/commonjs/updateCSSStyleInOrderedResolved'),INTERNAL_updateCSSStyleInOrderedResolved=_require7.INTERNAL_updateCSSStyleInOrderedResolved;var _require8=require('@gluestack-style/react/lib/commonjs/updateCSSStyleInOrderedResolved.web'),INTERNAL_updateCSSStyleInOrderedResolvedWeb=_require8.INTERNAL_updateCSSStyleInOrderedResolved;var _require9=require('@gluestack-style/react/lib/commonjs/core/convert-utility-to-sx'),convertUtilityPropsToSX=_require9.convertUtilityPropsToSX;var _require10=require('@gluestack-style/react/lib/commonjs/core/styled-system'),CSSPropertiesMap=_require10.CSSPropertiesMap;var IMPORT_NAME='@gluestack-style/react';var configThemePath=[];function addQuotesToObjectKeys(code){var ast=babel.parse("var a = "+code,{presets:[babelPresetTypeScript],plugins:['typescript'],sourceType:'module'});traverse(ast,{ObjectProperty:function ObjectProperty(path){if(types.isTemplateLiteral(path.node.value)){path.node.value=types.stringLiteral(path.node.value.quasis[0].value.raw);}if(types.isIdentifier(path.node.key)){path.node.key=types.stringLiteral(path.node.key.name);}if(types.isNumericLiteral(path.node.key)){path.node.key=types.stringLiteral(path.node.key.extra.raw);}if(types.isStringLiteral(path.node.value)){path.node.value=types.stringLiteral(path.node.value.value);}}});var initAst;traverse(ast,{VariableDeclarator:function VariableDeclarator(path){initAst=path.node.init;}});var _generate=generate(initAst,{sourceType:'module',presets:[babelPresetTypeScript],plugins:['typescript']}),output=_generate.code;return output;}var merge=require('lodash.merge');var _require11=require('process'),exit=_require11.exit;var checkIfPathIsAbsolute=function checkIfPathIsAbsolute(path){return path.startsWith('/');};function getConfig(configPath){if(configPath){return fs.readFileSync(path.join(!checkIfPathIsAbsolute(configPath)?process.cwd():'',configPath),'utf8');}var isConfigJSExist=fs.existsSync(path.join(process.cwd(),'./gluestack-style.config.js'));var isGlueStackUIConfigJSExist=fs.existsSync(path.join(process.cwd(),'./gluestack-ui.config.js'));var isConfigTSExist=fs.existsSync(path.join(process.cwd(),'./gluestack-style.config.ts'));var isGlueStackUIConfigTSExist=fs.existsSync(path.join(process.cwd(),'./gluestack-ui.config.ts'));if(isConfigTSExist){return fs.readFileSync(path.join(process.cwd(),'./gluestack-style.config.ts'),'utf8');}if(isConfigJSExist){return fs.readFileSync(path.join(process.cwd(),'./gluestack-style.config.js'),'utf8');}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');}}function getSurroundingCharacters(string,index){var start=Math.max(0,index-5);var end=Math.min(string.length,index+6);return string.slice(start,end);}function getExportedConfigFromFileString(fileData){var _fileData,_objectCode,_addQuotesToObjectKey;if(!fileData){return{};}fileData=(_fileData=fileData)==null?void 0:_fileData.replace(/as const/g,'');var ast=babel.parse(fileData,{presets:[babelPresetTypeScript],plugins:['typescript'],sourceType:'module',comments:false});var config={};traverse(ast,{CallExpression:function CallExpression(path){var _path$node=path.node,callee=_path$node.callee,args=_path$node.arguments;if(types.isIdentifier(callee,{name:'createConfig'})&&args.length===1&&types.isObjectExpression(args[0])){path.replaceWith(args[0]);}}});traverse(ast,{ExportNamedDeclaration:function ExportNamedDeclaration(path){path.traverse({VariableDeclarator:function VariableDeclarator(variableDeclaratorPath){config=variableDeclaratorPath.node.init;}});},Identifier:function Identifier(path){if(path.node.name==='undefined'){path.node.name='null';}}});var objectCode=generate(config).code;objectCode=(_objectCode=objectCode)==null?void 0:_objectCode.replace(/\/\/.*|\/\*[\s\S]*?\*\//g,'');objectCode=(_addQuotesToObjectKey=addQuotesToObjectKeys(objectCode))==null?void 0:_addQuotesToObjectKey.replace(/'/g,'"');return JSON.parse(objectCode);}function replaceSingleQuotes(str){var inDoubleQuotes=false;var newStr='';for(var i=0;i<str.length;i++){if(str[i]==='"'){inDoubleQuotes=!inDoubleQuotes;}if(str[i]==="'"&&!inDoubleQuotes){newStr+='"';}else{newStr+=str[i];}}return newStr;}function getObjectFromAstNode(node){var objectCode=generate(node).code;objectCode=addQuotesToObjectKeys(objectCode.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g,function(m,g){return g?'':m;}));objectCode=replaceSingleQuotes(objectCode);return JSON.parse(objectCode);}var CONFIG=getExportedConfigFromFileString(getConfig());var ConfigDefault=CONFIG;module.exports=function(b){var t=b.types;function generateObjectAst(obj){var properties=Object.entries(obj).map(function(_ref){var _ref2=(0,_slicedToArray2.default)(_ref,2),key=_ref2[0],value=_ref2[1];if(typeof value==='undefined'){return;}else if(typeof value==='object'&&!Array.isArray(value)){return t.objectProperty(t.stringLiteral(key),generateObjectAst(value));}else if(typeof value==='object'&&Array.isArray(value)){var elements=value.map(function(obj){if(typeof obj==='string'){return t.stringLiteral(obj);}else{return generateObjectAst(obj);}});return t.objectProperty(t.stringLiteral(key),t.arrayExpression(elements));}else if(typeof value==='boolean'){return t.objectProperty(t.stringLiteral(key),t.booleanLiteral(value));}else{return t.objectProperty(t.stringLiteral(key),typeof value==='number'?t.numericLiteral(value):t.stringLiteral(value));}});return t.objectExpression(properties.filter(function(property){return property;}));}function generateArrayAst(arr){return t.arrayExpression(arr.map(function(obj){return generateObjectAst(obj);}));}function checkWebFileExists(filePath){if(filePath.includes('node_modules')){return false;}var ext=path.extname(filePath);var dirname=path.dirname(filePath);var basename=path.basename(filePath,ext);var webFilePath=path.join(dirname,basename+".web"+ext);return fs.existsSync(webFilePath);}var styledImportName='';var styledAlias='';var styledAliasImportedName='';var tempPropertyResolverNode;var isValidConfig=true;var platform='all';var sourceFileName=IMPORT_NAME;var currentFileName='file not found!';var configPath;var libraryName='@gluestack-style/react';var uiLibraryName='';var outputLibrary;var componentSXProp;var componentUtilityProps;var uiLibraryPath;var guessingStyledComponents=[];return{name:'ast-transform',visitor:{ImportDeclaration:function ImportDeclaration(importPath,state){var _state$opts,_state$opts2,_state$opts3,_state$opts4,_state$opts5,_state$opts6,_state$opts7,_state$opts9,_state$opts11;sourceFileName=(state==null?void 0:(_state$opts=state.opts)==null?void 0:_state$opts.filename)||IMPORT_NAME;currentFileName=state.file.opts.filename;styledAlias=state==null?void 0:(_state$opts2=state.opts)==null?void 0:_state$opts2.styledAlias;libraryName=(state==null?void 0:(_state$opts3=state.opts)==null?void 0:_state$opts3.libraryName)||libraryName;outputLibrary=(state==null?void 0:(_state$opts4=state.opts)==null?void 0:_state$opts4.outputLibrary)||outputLibrary;uiLibraryName=(state==null?void 0:(_state$opts5=state.opts)==null?void 0:_state$opts5.uiLibraryName)||uiLibraryName;uiLibraryPath=(state==null?void 0:(_state$opts6=state.opts)==null?void 0:_state$opts6.uiLibraryPath)||uiLibraryPath;if(state!=null&&(_state$opts7=state.opts)!=null&&_state$opts7.configPath){var _state$opts8;configPath=state==null?void 0:(_state$opts8=state.opts)==null?void 0:_state$opts8.configPath;}if(state!=null&&(_state$opts9=state.opts)!=null&&_state$opts9.configThemePath){var _state$opts10;configThemePath=state==null?void 0:(_state$opts10=state.opts)==null?void 0:_state$opts10.configThemePath;}if(state!=null&&(_state$opts11=state.opts)!=null&&_state$opts11.platform){var _state$opts12;platform=state==null?void 0:(_state$opts12=state.opts)==null?void 0:_state$opts12.platform;}else{platform='all';}if(configPath){ConfigDefault=getExportedConfigFromFileString(getConfig(configPath));}configThemePath.forEach(function(path){var _ConfigDefault;ConfigDefault=(_ConfigDefault=ConfigDefault)==null?void 0:_ConfigDefault[path];});configThemePath=[];if(!currentFileName.includes('node_modules')){if(currentFileName.includes('.web.')){platform='web';}else if(checkWebFileExists(currentFileName)){platform='native';}}var filePath=state.file.opts.filename.split('/');filePath.pop();var absoluteStyledImportPath=path.resolve(filePath.join('/'),importPath.node.source.value);if(importPath.node.source.value===uiLibraryName||absoluteStyledImportPath===uiLibraryPath){importPath.traverse({ImportSpecifier:function ImportSpecifier(importSpecifierPath){guessingStyledComponents.push(importSpecifierPath.node.local.name);}});}if(importPath.node.source.value===libraryName||absoluteStyledImportPath===sourceFileName){importPath.traverse({ImportSpecifier:function ImportSpecifier(importSpecifierPath){if(importSpecifierPath.node.imported.name==='styled'){styledImportName=importSpecifierPath.node.local.name;}if(importSpecifierPath.node.imported.name===styledAlias){styledAliasImportedName=importSpecifierPath.node.local.name;}}});}},CallExpression:function CallExpression(callExpressionPath){if(callExpressionPath.node.callee.name===styledAliasImportedName||callExpressionPath.node.callee.name===styledImportName){var _callExpressionPath$p,_callExpressionPath$p2;if(callExpressionPath!=null&&(_callExpressionPath$p=callExpressionPath.parent)!=null&&(_callExpressionPath$p2=_callExpressionPath$p.id)!=null&&_callExpressionPath$p2.name)guessingStyledComponents.push(callExpressionPath.parent.id.name);callExpressionPath.traverse({ObjectProperty:function ObjectProperty(ObjectPath){if(t.isIdentifier(ObjectPath.node.value)){if(ObjectPath.node.value.name==='undefined'){ObjectPath.remove();}}}});if(isValidConfig){var _args$,_args$2,_ConfigDefault2;var args=callExpressionPath.node.arguments;var componentThemeNode=args[1];var componentConfigNode=(_args$=args[2])!=null?_args$:t.objectExpression([]);var extendedThemeNode=(_args$2=args[3])!=null?_args$2:t.objectExpression([]);var extendedThemeNodeProps=[];if(extendedThemeNode&&extendedThemeNode!=null&&extendedThemeNode.properties){extendedThemeNode==null?void 0:extendedThemeNode.properties.forEach(function(prop){if(prop.key.name==='propertyResolver'){tempPropertyResolverNode=prop;}else{extendedThemeNodeProps.push(prop);}});extendedThemeNode.properties=extendedThemeNodeProps;}var theme=getObjectFromAstNode(componentThemeNode);var ExtendedConfig=getObjectFromAstNode(extendedThemeNode);var componentConfig=getObjectFromAstNode(componentConfigNode);if(extendedThemeNode&&tempPropertyResolverNode){extendedThemeNode.properties.push(tempPropertyResolverNode);}var mergedPropertyConfig=(0,_extends2.default)({},(_ConfigDefault2=ConfigDefault)==null?void 0:_ConfigDefault2.propertyTokenMap,propertyTokenMap);var componentExtendedConfig=merge({},(0,_extends2.default)({},ConfigDefault,{propertyTokenMap:(0,_extends2.default)({},mergedPropertyConfig)}),ExtendedConfig);var verbosedTheme=convertStyledToStyledVerbosed(theme);var resolvedStyles=styledToStyledResolved(verbosedTheme,[],componentExtendedConfig);var orderedResolved=styledResolvedToOrderedSXResolved(resolvedStyles);var themeHash=stableHash((0,_extends2.default)({},verbosedTheme,componentConfig));if(outputLibrary){themeHash=outputLibrary+'-'+themeHash;}if(platform==='all'){INTERNAL_updateCSSStyleInOrderedResolvedWeb(orderedResolved,themeHash,true);}else if(platform==='web'){INTERNAL_updateCSSStyleInOrderedResolvedWeb(orderedResolved,themeHash,false);}else{INTERNAL_updateCSSStyleInOrderedResolved(orderedResolved,themeHash,true);}var styleIds=getStyleIds(orderedResolved,componentConfig);var styleIdsAst=generateObjectAst(styleIds);var themeHashAst=t.stringLiteral(themeHash);var orderedResolvedAst=generateArrayAst(orderedResolved);var resultParamsNode=t.objectExpression([t.objectProperty(t.stringLiteral('orderedResolved'),orderedResolvedAst),t.objectProperty(t.stringLiteral('styleIds'),styleIdsAst),t.objectProperty(t.stringLiteral('themeHash'),themeHashAst)]);while(args.length<4){args.push(t.objectExpression([]));}if(!args[4]){args.push(resultParamsNode);}else{args[4]=resultParamsNode;}}}}}};};
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _extends4=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _toConsumableArray2=_interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));var fs=require('fs');var path=require('path');var babel=require('@babel/parser');var generate=require('@babel/generator').default;var babelPresetTypeScript=require('@babel/preset-typescript');var traverse=require('@babel/traverse').default;var types=require('@babel/types');var _require=require('@gluestack-style/react/lib/commonjs/resolver/getStyleIds'),getStyleIds=_require.getStyleIds;var _require2=require('@gluestack-style/react/lib/commonjs/resolver/orderedResolved'),styledResolvedToOrderedSXResolved=_require2.styledResolvedToOrderedSXResolved;var _require3=require('@gluestack-style/react/lib/commonjs/resolver/styledResolved'),styledToStyledResolved=_require3.styledToStyledResolved;var _require4=require('@gluestack-style/react/lib/commonjs/resolver/injectComponentAndDescendantStyles'),injectComponentAndDescendantStyles=_require4.injectComponentAndDescendantStyles;var _require5=require('@gluestack-style/react/lib/commonjs/convertSxToSxVerbosed'),convertStyledToStyledVerbosed=_require5.convertStyledToStyledVerbosed,convertSxToSxVerbosed=_require5.convertSxToSxVerbosed;var _require6=require('@gluestack-style/react/lib/commonjs/propertyTokenMap'),propertyTokenMap=_require6.propertyTokenMap;var _require7=require('@gluestack-style/react/lib/commonjs/stableHash'),stableHash=_require7.stableHash;var _require8=require('@gluestack-style/react/lib/commonjs/updateCSSStyleInOrderedResolved'),INTERNAL_updateCSSStyleInOrderedResolved=_require8.INTERNAL_updateCSSStyleInOrderedResolved;var _require9=require('@gluestack-style/react/lib/commonjs/updateCSSStyleInOrderedResolved.web'),INTERNAL_updateCSSStyleInOrderedResolvedWeb=_require9.INTERNAL_updateCSSStyleInOrderedResolved;var _require10=require('@gluestack-style/react/lib/commonjs/core/convert-utility-to-sx'),convertUtilityPropsToSX=_require10.convertUtilityPropsToSX;var _require11=require('@gluestack-style/react/lib/commonjs/core/styled-system'),CSSPropertiesMap=_require11.CSSPropertiesMap;var _require12=require('@gluestack-style/react/lib/commonjs/style-sheet/index'),StyleInjector=_require12.StyleInjector;var _require13=require('@gluestack-style/react/lib/commonjs/updateOrderUnResolvedMap'),updateOrderUnResolvedMap=_require13.updateOrderUnResolvedMap;var _require14=require('@gluestack-style/react/lib/commonjs/utils'),setObjectKeyValue=_require14.setObjectKeyValue;var IMPORT_NAME='@gluestack-style/react';var configThemePath=[];var BUILD_TIME_GLUESTACK_STYLESHEET=new StyleInjector();var convertExpressionContainerToStaticObject=function convertExpressionContainerToStaticObject(properties){var result=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var keyPath=arguments.length>2&&arguments[2]!==undefined?arguments[2]:[];var propsToBePersist=arguments.length>3&&arguments[3]!==undefined?arguments[3]:{};properties==null?void 0:properties.forEach(function(property,index){if(property.value.type==='ObjectExpression'){keyPath.push(property.key.value);convertExpressionContainerToStaticObject(property.value.properties,result,keyPath,propsToBePersist);keyPath.pop();}else if(property.value.type==='Identifier'){if(property.key.value){setObjectKeyValue(propsToBePersist,[].concat((0,_toConsumableArray2.default)(keyPath),[property.key.value]),property.value.name);}if(property.key.name){setObjectKeyValue(propsToBePersist,[].concat((0,_toConsumableArray2.default)(keyPath),[property.key.name]),property.value.name);}}else{if(property.key.value){setObjectKeyValue(result,[].concat((0,_toConsumableArray2.default)(keyPath),[property.key.value]),property.value.value);}if(property.key.name){setObjectKeyValue(result,[].concat((0,_toConsumableArray2.default)(keyPath),[property.key.name]),property.value.value);}}});return{result:result,propsToBePersist:propsToBePersist};};function addQuotesToObjectKeys(code){var ast=babel.parse("var a = "+code,{presets:[babelPresetTypeScript],plugins:['typescript'],sourceType:'module'});traverse(ast,{ObjectProperty:function ObjectProperty(path){if(types.isTemplateLiteral(path.node.value)){path.node.value=types.stringLiteral(path.node.value.quasis[0].value.raw);}if(types.isIdentifier(path.node.key)){path.node.key=types.stringLiteral(path.node.key.name);}if(types.isNumericLiteral(path.node.key)){path.node.key=types.stringLiteral(path.node.key.extra.raw);}if(types.isStringLiteral(path.node.value)){path.node.value=types.stringLiteral(path.node.value.value);}}});var initAst;traverse(ast,{VariableDeclarator:function VariableDeclarator(path){initAst=path.node.init;}});var _generate=generate(initAst,{sourceType:'module',presets:[babelPresetTypeScript],plugins:['typescript']}),output=_generate.code;return output;}var merge=require('lodash.merge');var _require15=require('process'),exit=_require15.exit;var checkIfPathIsAbsolute=function checkIfPathIsAbsolute(path){return path.startsWith('/');};function getConfig(configPath){if(configPath){return fs.readFileSync(path.join(!checkIfPathIsAbsolute(configPath)?process.cwd():'',configPath),'utf8');}var isConfigJSExist=fs.existsSync(path.join(process.cwd(),'./gluestack-style.config.js'));var isGlueStackUIConfigJSExist=fs.existsSync(path.join(process.cwd(),'./gluestack-ui.config.js'));var isConfigTSExist=fs.existsSync(path.join(process.cwd(),'./gluestack-style.config.ts'));var isGlueStackUIConfigTSExist=fs.existsSync(path.join(process.cwd(),'./gluestack-ui.config.ts'));if(isConfigTSExist){return fs.readFileSync(path.join(process.cwd(),'./gluestack-style.config.ts'),'utf8');}if(isConfigJSExist){return fs.readFileSync(path.join(process.cwd(),'./gluestack-style.config.js'),'utf8');}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');}}function getSurroundingCharacters(string,index){var start=Math.max(0,index-5);var end=Math.min(string.length,index+6);return string.slice(start,end);}function getExportedConfigFromFileString(fileData){var _fileData,_objectCode,_addQuotesToObjectKey;if(!fileData){return{};}fileData=(_fileData=fileData)==null?void 0:_fileData.replace(/as const/g,'');var ast=babel.parse(fileData,{presets:[babelPresetTypeScript],plugins:['typescript'],sourceType:'module',comments:false});var config={};traverse(ast,{CallExpression:function CallExpression(path){var _path$node=path.node,callee=_path$node.callee,args=_path$node.arguments;if(types.isIdentifier(callee,{name:'createConfig'})&&args.length===1&&types.isObjectExpression(args[0])){path.replaceWith(args[0]);}}});traverse(ast,{ExportNamedDeclaration:function ExportNamedDeclaration(path){path.traverse({VariableDeclarator:function VariableDeclarator(variableDeclaratorPath){config=variableDeclaratorPath.node.init;}});},Identifier:function Identifier(path){if(path.node.name==='undefined'){path.node.name='null';}}});var objectCode=generate(config).code;objectCode=(_objectCode=objectCode)==null?void 0:_objectCode.replace(/\/\/.*|\/\*[\s\S]*?\*\//g,'');objectCode=(_addQuotesToObjectKey=addQuotesToObjectKeys(objectCode))==null?void 0:_addQuotesToObjectKey.replace(/'/g,'"');return JSON.parse(objectCode);}function replaceSingleQuotes(str){var inDoubleQuotes=false;var newStr='';for(var i=0;i<str.length;i++){if(str[i]==='"'){inDoubleQuotes=!inDoubleQuotes;}if(str[i]==="'"&&!inDoubleQuotes){newStr+='"';}else{newStr+=str[i];}}return newStr;}function getObjectFromAstNode(node){var objectCode=generate(node).code;objectCode=addQuotesToObjectKeys(objectCode.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g,function(m,g){return g?'':m;}));objectCode=replaceSingleQuotes(objectCode);return JSON.parse(objectCode);}function removePropertiesVisitor(path){if(path.node.type==='ObjectProperty'){var valueNode=path.node.value;if(types.isStringLiteral(valueNode)||types.isNumericLiteral(valueNode)){path.remove();}}if(types.isObjectExpression(path.node)||types.isObjectProperty(path.node)){if(Array.isArray(path.get('properties')))path.get('properties').forEach(function(propertyPath){removePropertiesVisitor(propertyPath);});}}function addQuotesToObjectKeysIdentifiers(code){var ast=babel.parse("var a = "+code,{presets:[babelPresetTypeScript],plugins:['typescript'],sourceType:'module'});traverse(ast,{ObjectProperty:function ObjectProperty(path){removePropertiesVisitor(path);}});var initAst;traverse(ast,{VariableDeclarator:function VariableDeclarator(path){initAst=path.node.init;}});return initAst;}function getIdentifiersObjectFromAstNode(node){var objectCode=generate(node).code;return addQuotesToObjectKeysIdentifiers(objectCode.replace(/\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g,function(m,g){return g?'':m;}));}var CONFIG=getExportedConfigFromFileString(getConfig());var ConfigDefault=CONFIG;module.exports=function(b){var t=b.types;function generateObjectAstOfIdentifiers(obj){var properties=Object.keys(obj).map(function(key){if(typeof obj[key]==='object'){return t.objectProperty(t.stringLiteral(key),generateObjectAstOfIdentifiers(obj[key]));}else{return t.objectProperty(t.stringLiteral(key),t.identifier(obj[key]));}});return t.objectExpression(properties.filter(function(property){return property;}));}function generateObjectAst(obj){var properties=Object.entries(obj).map(function(_ref){var _ref2=(0,_slicedToArray2.default)(_ref,2),key=_ref2[0],value=_ref2[1];if(typeof value==='undefined'){return;}else if(typeof value==='object'&&!Array.isArray(value)){return t.objectProperty(t.stringLiteral(key),generateObjectAst(value));}else if(typeof value==='object'&&Array.isArray(value)){var elements=value.map(function(obj){if(typeof obj==='string'){return t.stringLiteral(obj);}else{return generateObjectAst(obj);}});return t.objectProperty(t.stringLiteral(key),t.arrayExpression(elements));}else if(typeof value==='boolean'){return t.objectProperty(t.stringLiteral(key),t.booleanLiteral(value));}else{return t.objectProperty(t.stringLiteral(key),typeof value==='number'?t.numericLiteral(value):t.stringLiteral(value));}});return t.objectExpression(properties.filter(function(property){return property;}));}function generateArrayAst(arr){return t.arrayExpression(arr.map(function(obj){return generateObjectAst(obj);}));}function checkWebFileExists(filePath){if(filePath.includes('node_modules')){return false;}var ext=path.extname(filePath);var dirname=path.dirname(filePath);var basename=path.basename(filePath,ext);var webFilePath=path.join(dirname,basename+".web"+ext);return fs.existsSync(webFilePath);}var styledImportName='';var styledAlias='';var styledAliasImportedName='';var tempPropertyResolverNode;var isValidConfig=true;var platform='all';var sourceFileName=IMPORT_NAME;var currentFileName='file not found!';var configPath;var libraryName='@gluestack-style/react';var uiLibraryName='';var outputLibrary;var componentSXProp;var componentUtilityProps;var uiLibraryPath;var guessingStyledComponents=[];return{name:'ast-transform',visitor:{ImportDeclaration:function ImportDeclaration(importPath,state){var _state$opts,_state$opts2,_state$opts3,_state$opts4,_state$opts5,_state$opts6,_state$opts7,_state$opts9,_state$opts11;sourceFileName=(state==null?void 0:(_state$opts=state.opts)==null?void 0:_state$opts.filename)||IMPORT_NAME;currentFileName=state.file.opts.filename;styledAlias=state==null?void 0:(_state$opts2=state.opts)==null?void 0:_state$opts2.styledAlias;libraryName=(state==null?void 0:(_state$opts3=state.opts)==null?void 0:_state$opts3.libraryName)||libraryName;outputLibrary=(state==null?void 0:(_state$opts4=state.opts)==null?void 0:_state$opts4.outputLibrary)||outputLibrary;uiLibraryName=(state==null?void 0:(_state$opts5=state.opts)==null?void 0:_state$opts5.uiLibraryName)||uiLibraryName;uiLibraryPath=(state==null?void 0:(_state$opts6=state.opts)==null?void 0:_state$opts6.uiLibraryPath)||uiLibraryPath;if(state!=null&&(_state$opts7=state.opts)!=null&&_state$opts7.configPath){var _state$opts8;configPath=state==null?void 0:(_state$opts8=state.opts)==null?void 0:_state$opts8.configPath;}if(state!=null&&(_state$opts9=state.opts)!=null&&_state$opts9.configThemePath){var _state$opts10;configThemePath=state==null?void 0:(_state$opts10=state.opts)==null?void 0:_state$opts10.configThemePath;}if(state!=null&&(_state$opts11=state.opts)!=null&&_state$opts11.platform){var _state$opts12;platform=state==null?void 0:(_state$opts12=state.opts)==null?void 0:_state$opts12.platform;}else{platform='all';}if(configPath){ConfigDefault=getExportedConfigFromFileString(getConfig(configPath));}configThemePath.forEach(function(path){var _ConfigDefault;ConfigDefault=(_ConfigDefault=ConfigDefault)==null?void 0:_ConfigDefault[path];});configThemePath=[];if(!currentFileName.includes('node_modules')){if(currentFileName.includes('.web.')){platform='web';}else if(checkWebFileExists(currentFileName)){platform='native';}}var filePath=state.file.opts.filename.split('/');filePath.pop();var absoluteStyledImportPath=path.resolve(filePath.join('/'),importPath.node.source.value);if(importPath.node.source.value===uiLibraryName||absoluteStyledImportPath===uiLibraryPath){importPath.traverse({ImportSpecifier:function ImportSpecifier(importSpecifierPath){guessingStyledComponents.push(importSpecifierPath.node.local.name);}});}if(importPath.node.source.value===libraryName||absoluteStyledImportPath===sourceFileName){importPath.traverse({ImportSpecifier:function ImportSpecifier(importSpecifierPath){if(importSpecifierPath.node.imported.name==='styled'){styledImportName=importSpecifierPath.node.local.name;}if(importSpecifierPath.node.imported.name===styledAlias){styledAliasImportedName=importSpecifierPath.node.local.name;}}});}},CallExpression:function CallExpression(callExpressionPath){if(callExpressionPath.node.callee.name===styledAliasImportedName||callExpressionPath.node.callee.name===styledImportName){var _callExpressionPath$p,_callExpressionPath$p2;if(callExpressionPath!=null&&(_callExpressionPath$p=callExpressionPath.parent)!=null&&(_callExpressionPath$p2=_callExpressionPath$p.id)!=null&&_callExpressionPath$p2.name)guessingStyledComponents.push(callExpressionPath.parent.id.name);callExpressionPath.traverse({ObjectProperty:function ObjectProperty(ObjectPath){if(t.isIdentifier(ObjectPath.node.value)){if(ObjectPath.node.value.name==='undefined'){ObjectPath.remove();}}}});if(isValidConfig){var _args$,_args$2,_ConfigDefault2;var args=callExpressionPath.node.arguments;var componentThemeNode=args[1];var componentConfigNode=(_args$=args[2])!=null?_args$:t.objectExpression([]);var extendedThemeNode=(_args$2=args[3])!=null?_args$2:t.objectExpression([]);var extendedThemeNodeProps=[];if(extendedThemeNode&&extendedThemeNode!=null&&extendedThemeNode.properties){extendedThemeNode==null?void 0:extendedThemeNode.properties.forEach(function(prop){if(prop.key.name==='propertyResolver'){tempPropertyResolverNode=prop;}else{extendedThemeNodeProps.push(prop);}});extendedThemeNode.properties=extendedThemeNodeProps;}var theme=getObjectFromAstNode(componentThemeNode);var ExtendedConfig=getObjectFromAstNode(extendedThemeNode);var componentConfig=getObjectFromAstNode(componentConfigNode);if(extendedThemeNode&&tempPropertyResolverNode){extendedThemeNode.properties.push(tempPropertyResolverNode);}var mergedPropertyConfig=(0,_extends4.default)({},(_ConfigDefault2=ConfigDefault)==null?void 0:_ConfigDefault2.propertyTokenMap,propertyTokenMap);var componentExtendedConfig=merge({},(0,_extends4.default)({},ConfigDefault,{propertyTokenMap:(0,_extends4.default)({},mergedPropertyConfig)}),ExtendedConfig);var verbosedTheme=convertStyledToStyledVerbosed(theme);var componentHash=stableHash((0,_extends4.default)({},theme,componentConfig,ExtendedConfig));if(outputLibrary){componentHash=outputLibrary+'-'+componentHash;}var _updateOrderUnResolve=updateOrderUnResolvedMap(verbosedTheme,componentHash,'boot',ExtendedConfig,BUILD_TIME_GLUESTACK_STYLESHEET),orderedUnResolvedTheme=_updateOrderUnResolve.orderedUnResolvedTheme,orderedStyleIdsArray=_updateOrderUnResolve.styleCSSIdsArr;BUILD_TIME_GLUESTACK_STYLESHEET.resolve(orderedStyleIdsArray,componentExtendedConfig,ExtendedConfig);var current_global_map=BUILD_TIME_GLUESTACK_STYLESHEET.getStyleMap();var orderedResolvedTheme=[];current_global_map==null?void 0:current_global_map.forEach(function(styledResolved){var _styledResolved$meta;if(orderedStyleIdsArray.includes(styledResolved==null?void 0:(_styledResolved$meta=styledResolved.meta)==null?void 0:_styledResolved$meta.cssId)){orderedResolvedTheme.push(styledResolved);}});var styleIds=getStyleIds(orderedUnResolvedTheme,componentConfig);var styleIdsAst=generateObjectAst(styleIds);var componentHashAst=t.stringLiteral(componentHash);var orderedResolvedAst=generateArrayAst(orderedResolvedTheme);var orderedStyleIdsArrayAst=t.arrayExpression(orderedStyleIdsArray==null?void 0:orderedStyleIdsArray.map(function(cssId){return t.stringLiteral(cssId);}));var resultParamsNode=t.objectExpression([t.objectProperty(t.stringLiteral('orderedResolved'),orderedResolvedAst),t.objectProperty(t.stringLiteral('orderedStyleIdsArray'),orderedStyleIdsArrayAst),t.objectProperty(t.stringLiteral('styleIds'),styleIdsAst),t.objectProperty(t.stringLiteral('componentHash'),componentHashAst)]);while(args.length<4){args.push(t.objectExpression([]));}if(!args[4]){args.push(resultParamsNode);}else{args[4]=resultParamsNode;}}}},JSXOpeningElement:function JSXOpeningElement(jsxOpeningElementPath){if(jsxOpeningElementPath.node.name&&jsxOpeningElementPath.node.name.name&&jsxOpeningElementPath.node.name.name!=='GluestackUIProvider'&&guessingStyledComponents.includes(jsxOpeningElementPath.node.name.name)){var _ConfigDefault3,_ConfigDefault4;var propsToBePersist=[];var sxPropsWithIdentifier={};var utilityPropsWithIdentifier={};var mergedPropertyConfig=(0,_extends4.default)({},(_ConfigDefault3=ConfigDefault)==null?void 0:_ConfigDefault3.propertyTokenMap,propertyTokenMap);var styledSystemProps=(0,_extends4.default)({},CSSPropertiesMap,(_ConfigDefault4=ConfigDefault)==null?void 0:_ConfigDefault4.aliases);var attr=jsxOpeningElementPath.node.attributes;attr.forEach(function(attribute,index){if(t.isJSXAttribute(attribute)){var propName=attribute.name.name;var propValue=attribute.value;if(t.isJSXExpressionContainer(propValue)){if(t.isIdentifier(propValue.expression)){propsToBePersist.push(attribute);}else{if(propName==='sx'){var objectProperties=propValue.expression.properties;sxPropsWithIdentifier=getIdentifiersObjectFromAstNode(propValue.expression);var _convertExpressionCon=convertExpressionContainerToStaticObject(objectProperties),sxPropsObject=_convertExpressionCon.result;componentSXProp=sxPropsObject;}else if(t.isStringLiteral(propValue.expression)||t.isNumericLiteral(propValue.expression)){if(styledSystemProps[propName]){var _componentUtilityProp;componentUtilityProps=(0,_extends4.default)((_componentUtilityProp=componentUtilityProps)!=null?_componentUtilityProp:{},(0,_defineProperty2.default)({},propName,propValue.expression.value));}}else{propsToBePersist.push(attribute);}}}else if(styledSystemProps[propName]){var _componentUtilityProp2;componentUtilityProps=(0,_extends4.default)((_componentUtilityProp2=componentUtilityProps)!=null?_componentUtilityProp2:{},(0,_defineProperty2.default)({},propName,propValue.value));}else{propsToBePersist.push(attribute);}}});jsxOpeningElementPath.node.attributes.splice(0,jsxOpeningElementPath.node.attributes.length);for(var key in utilityPropsWithIdentifier){if(componentSXProp[key])delete utilityPropsWithIdentifier[key];}var sx=(0,_extends4.default)({},componentUtilityProps,componentSXProp);if(sx){var verbosedSx=convertSxToSxVerbosed(sx);var inlineSxTheme={baseStyle:verbosedSx};var componentExtendedConfig=merge({},(0,_extends4.default)({},ConfigDefault,{propertyTokenMap:(0,_extends4.default)({},mergedPropertyConfig)}));var resolvedStyles=styledToStyledResolved(inlineSxTheme,[],componentExtendedConfig);var orderedResolved=styledResolvedToOrderedSXResolved(resolvedStyles);var sxHash=stableHash(sx);if(outputLibrary){sxHash=outputLibrary+'-'+sxHash;}if(platform==='all'){INTERNAL_updateCSSStyleInOrderedResolvedWeb(orderedResolved,sxHash,true,'gs');}else if(platform==='web'){INTERNAL_updateCSSStyleInOrderedResolvedWeb(orderedResolved,sxHash,false,'gs');}else{INTERNAL_updateCSSStyleInOrderedResolved(orderedResolved,sxHash,true,'gs');}var orderCSSIds=injectComponentAndDescendantStyles(orderedResolved,sxHash,'inline',BUILD_TIME_GLUESTACK_STYLESHEET,false);var current_global_map=BUILD_TIME_GLUESTACK_STYLESHEET.getStyleMap();var orderedResolvedTheme=[];current_global_map==null?void 0:current_global_map.forEach(function(styledResolved){var _styledResolved$meta2;if(orderCSSIds.includes(styledResolved==null?void 0:(_styledResolved$meta2=styledResolved.meta)==null?void 0:_styledResolved$meta2.cssId)){orderedResolvedTheme.push(styledResolved);}});var styleIds=getStyleIds(orderedResolved,componentExtendedConfig);var styleIdsAst=generateObjectAst(styleIds);var orderResolvedArrayExpression=[];orderedResolved.forEach(function(styledResolved){var orderedResolvedAst=generateObjectAst(styledResolved);orderResolvedArrayExpression.push(orderedResolvedAst);});var orderedStyleIdsArrayAst=t.arrayExpression(orderCSSIds==null?void 0:orderCSSIds.map(function(cssId){return t.stringLiteral(cssId);}));jsxOpeningElementPath.node.attributes=propsToBePersist;if(Object.keys(sxPropsWithIdentifier).length>0){jsxOpeningElementPath.node.attributes.push(t.jsxAttribute(t.jsxIdentifier('sx'),t.jsxExpressionContainer(sxPropsWithIdentifier)));}jsxOpeningElementPath.node.attributes.push(t.jsxAttribute(t.jsxIdentifier('styledIds'),t.jsxExpressionContainer(styleIdsAst)));jsxOpeningElementPath.node.attributes.push(t.jsxAttribute(t.jsxIdentifier('orderResolved'),t.jsxExpressionContainer(t.arrayExpression(orderResolvedArrayExpression))));jsxOpeningElementPath.node.attributes.push(t.jsxAttribute(t.jsxIdentifier('sxHash'),t.stringLiteral(sxHash)));jsxOpeningElementPath.node.attributes.push(t.jsxAttribute(t.jsxIdentifier('orderedStyleIdsArray'),t.jsxExpressionContainer(orderedStyleIdsArrayAst)));}componentSXProp=undefined;componentUtilityProps=undefined;}}}};};

package.json

 {
   "name": "@gluestack-style/babel-plugin-styled-resolver",
-  "version": "0.1.15-alpha.0",
+  "version": "0.2.0-alpha.0",
   "description": "A gluestack-style babel plugin that transpiles your styled function calls and resolves the component styling in build time.",
@@ -5,0 +5,0 @@ "keywords": [

src/index.js

@@ -17,2 +17,5 @@ const fs = require('fs');
 } = require('@gluestack-style/react/lib/commonjs/resolver/styledResolved');
+const {
+  injectComponentAndDescendantStyles,
+} = require('@gluestack-style/react/lib/commonjs/resolver/injectComponentAndDescendantStyles');
 
@@ -42,6 +45,71 @@ const {
 } = require('@gluestack-style/react/lib/commonjs/core/styled-system');
+const {
+  StyleInjector,
+} = require('@gluestack-style/react/lib/commonjs/style-sheet/index');
+const {
+  updateOrderUnResolvedMap,
+} = require('@gluestack-style/react/lib/commonjs/updateOrderUnResolvedMap');
+const {
+  setObjectKeyValue,
+} = require('@gluestack-style/react/lib/commonjs/utils');
 
 const IMPORT_NAME = '@gluestack-style/react';
 let configThemePath = [];
+const BUILD_TIME_GLUESTACK_STYLESHEET = new StyleInjector();
 
+const convertExpressionContainerToStaticObject = (
+  properties,
+  result = {},
+  keyPath = [],
+  propsToBePersist = {}
+) => {
+  properties?.forEach((property, index) => {
+    if (property.value.type === 'ObjectExpression') {
+      keyPath.push(property.key.value);
+      convertExpressionContainerToStaticObject(
+        property.value.properties,
+        result,
+        keyPath,
+        propsToBePersist
+      );
+      keyPath.pop();
+    } else if (property.value.type === 'Identifier') {
+      if (property.key.value) {
+        setObjectKeyValue(
+          propsToBePersist,
+          [...keyPath, property.key.value],
+          property.value.name
+        );
+      }
+      if (property.key.name) {
+        setObjectKeyValue(
+          propsToBePersist,
+          [...keyPath, property.key.name],
+          property.value.name
+        );
+      }
+    } else {
+      if (property.key.value) {
+        setObjectKeyValue(
+          result,
+          [...keyPath, property.key.value],
+          property.value.value
+        );
+      }
+
+      if (property.key.name) {
+        setObjectKeyValue(
+          result,
+          [...keyPath, property.key.name],
+          property.value.value
+        );
+      }
+    }
+  });
+  return {
+    result,
+    propsToBePersist,
+  };
+};
+
 function addQuotesToObjectKeys(code) {
@@ -234,2 +302,55 @@ const ast = babel.parse(`var a = ${code}`, {
 
+function removePropertiesVisitor(path) {
+  if (path.node.type === 'ObjectProperty') {
+    const valueNode = path.node.value;
+    if (types.isStringLiteral(valueNode) || types.isNumericLiteral(valueNode)) {
+      path.remove();
+    }
+  }
+  if (
+    types.isObjectExpression(path.node) ||
+    types.isObjectProperty(path.node)
+  ) {
+    if (Array.isArray(path.get('properties')))
+      path.get('properties').forEach((propertyPath) => {
+        removePropertiesVisitor(propertyPath);
+      });
+  }
+}
+
+function addQuotesToObjectKeysIdentifiers(code) {
+  const ast = babel.parse(`var a = ${code}`, {
+    presets: [babelPresetTypeScript],
+    plugins: ['typescript'],
+    sourceType: 'module',
+  });
+
+  traverse(ast, {
+    ObjectProperty: (path) => {
+      removePropertiesVisitor(path);
+    },
+  });
+
+  let initAst;
+
+  traverse(ast, {
+    VariableDeclarator: (path) => {
+      initAst = path.node.init;
+    },
+  });
+
+  return initAst;
+}
+
+function getIdentifiersObjectFromAstNode(node) {
+  let objectCode = generate(node).code;
+
+  return addQuotesToObjectKeysIdentifiers(
+    objectCode.replace(
+      /\\"|"(?:\\"|[^"])*"|(\/\/.*|\/\*[\s\S]*?\*\/)/g,
+      (m, g) => (g ? '' : m)
+    )
+  );
+}
+
 const CONFIG = getExportedConfigFromFileString(getConfig());
@@ -242,2 +363,17 @@
 
+  function generateObjectAstOfIdentifiers(obj) {
+    let properties = Object.keys(obj).map((key) => {
+      if (typeof obj[key] === 'object') {
+        return t.objectProperty(
+          t.stringLiteral(key),
+          generateObjectAstOfIdentifiers(obj[key])
+        );
+      } else {
+        return t.objectProperty(t.stringLiteral(key), t.identifier(obj[key]));
+      }
+    });
+
+    return t.objectExpression(properties.filter((property) => property));
+  }
+
   function generateObjectAst(obj) {
@@ -453,51 +589,52 @@ let properties = Object.entries(obj).map(([key, value]) => {
 
-            let resolvedStyles = styledToStyledResolved(
-              verbosedTheme,
-              [],
-              componentExtendedConfig
-            );
-
-            let orderedResolved =
-              styledResolvedToOrderedSXResolved(resolvedStyles);
-            // console.log('\n\n >>>>>>>>>>>>>>>>>>>>>\n');
-            // console.log(JSON.stringify(verbosedTheme));
-            // console.log('\n >>>>>>>>>>>>>>>>>>>>>\n\n');
-
-            let themeHash = stableHash({
-              ...verbosedTheme,
+            let componentHash = stableHash({
+              ...theme,
               ...componentConfig,
+              ...ExtendedConfig,
             });
 
             if (outputLibrary) {
-              themeHash = outputLibrary + '-' + themeHash;
+              componentHash = outputLibrary + '-' + componentHash;
             }
 
-            if (platform === 'all') {
-              INTERNAL_updateCSSStyleInOrderedResolvedWeb(
-                orderedResolved,
-                themeHash,
-                true
-              );
-            } else if (platform === 'web') {
-              INTERNAL_updateCSSStyleInOrderedResolvedWeb(
-                orderedResolved,
-                themeHash,
-                false
-              );
-            } else {
-              INTERNAL_updateCSSStyleInOrderedResolved(
-                orderedResolved,
-                themeHash,
-                true
-              );
-            }
+            const {
+              orderedUnResolvedTheme,
+              styleCSSIdsArr: orderedStyleIdsArray,
+            } = updateOrderUnResolvedMap(
+              verbosedTheme,
+              componentHash,
+              'boot',
+              ExtendedConfig,
+              BUILD_TIME_GLUESTACK_STYLESHEET
+            );
 
-            let styleIds = getStyleIds(orderedResolved, componentConfig);
+            BUILD_TIME_GLUESTACK_STYLESHEET.resolve(
+              orderedStyleIdsArray,
+              componentExtendedConfig,
+              ExtendedConfig
+            );
 
+            const current_global_map =
+              BUILD_TIME_GLUESTACK_STYLESHEET.getStyleMap();
+
+            const orderedResolvedTheme = [];
+
+            current_global_map?.forEach((styledResolved) => {
+              if (orderedStyleIdsArray.includes(styledResolved?.meta?.cssId)) {
+                orderedResolvedTheme.push(styledResolved);
+              }
+            });
+
+            let styleIds = getStyleIds(orderedUnResolvedTheme, componentConfig);
+
             let styleIdsAst = generateObjectAst(styleIds);
 
-            let themeHashAst = t.stringLiteral(themeHash);
+            let componentHashAst = t.stringLiteral(componentHash);
 
-            let orderedResolvedAst = generateArrayAst(orderedResolved);
+            let orderedResolvedAst = generateArrayAst(orderedResolvedTheme);
 
+            let orderedStyleIdsArrayAst = t.arrayExpression(
+              orderedStyleIdsArray?.map((cssId) => t.stringLiteral(cssId))
+            );
+
             let resultParamsNode = t.objectExpression([
@@ -508,4 +645,11 @@ t.objectProperty(
               ),
+              t.objectProperty(
+                t.stringLiteral('orderedStyleIdsArray'),
+                orderedStyleIdsArrayAst
+              ),
               t.objectProperty(t.stringLiteral('styleIds'), styleIdsAst),
-              t.objectProperty(t.stringLiteral('themeHash'), themeHashAst),
+              t.objectProperty(
+                t.stringLiteral('componentHash'),
+                componentHashAst
+              ),
             ]);
@@ -543,151 +687,220 @@
       },
-      // JSXOpeningElement(jsxOpeningElementPath) {
-      //   if (
-      //     jsxOpeningElementPath.node.name &&
-      //     jsxOpeningElementPath.node.name.name &&
-      //     guessingStyledComponents.includes(
-      //       jsxOpeningElementPath.node.name.name
-      //     )
-      //   ) {
-      //     let propsToBePersist = [];
+      JSXOpeningElement(jsxOpeningElementPath) {
+        if (
+          jsxOpeningElementPath.node.name &&
+          jsxOpeningElementPath.node.name.name &&
+          jsxOpeningElementPath.node.name.name !== 'GluestackUIProvider' &&
+          guessingStyledComponents.includes(
+            jsxOpeningElementPath.node.name.name
+          )
+        ) {
+          let propsToBePersist = [];
+          let sxPropsWithIdentifier = {};
+          let utilityPropsWithIdentifier = {};
 
-      //     let mergedPropertyConfig = {
-      //       ...ConfigDefault?.propertyTokenMap,
-      //       ...propertyTokenMap,
-      //     };
+          let mergedPropertyConfig = {
+            ...ConfigDefault?.propertyTokenMap,
+            ...propertyTokenMap,
+          };
 
-      //     const styledSystemProps = {
-      //       ...CSSPropertiesMap,
-      //       ...CONFIG?.aliases,
-      //     };
+          const styledSystemProps = {
+            ...CSSPropertiesMap,
+            ...ConfigDefault?.aliases,
+          };
 
-      //     const attr = jsxOpeningElementPath.node.attributes;
-      //     attr.forEach((attribute, index) => {
-      //       if (t.isJSXAttribute(attribute)) {
-      //         const propName = attribute.name.name;
-      //         const propValue = attribute.value;
+          const attr = jsxOpeningElementPath.node.attributes;
+          attr.forEach((attribute, index) => {
+            if (t.isJSXAttribute(attribute)) {
+              const propName = attribute.name.name;
+              const propValue = attribute.value;
 
-      //         if (
-      //           propValue.type === 'JSXExpressionContainer' &&
-      //           !t.isIdentifier(propValue.expression) &&
-      //           propName === 'sx'
-      //         ) {
-      //           const objectProperties = propValue.expression;
+              if (t.isJSXExpressionContainer(propValue)) {
+                if (t.isIdentifier(propValue.expression)) {
+                  propsToBePersist.push(attribute);
+                } else {
+                  if (propName === 'sx') {
+                    const objectProperties = propValue.expression.properties;
 
-      //           componentSXProp = getObjectFromAstNode(objectProperties);
-      //         } else if (styledSystemProps[propName]) {
-      //           componentUtilityProps = Object.assign(
-      //             componentUtilityProps ?? {},
-      //             {
-      //               [propName]: propValue.value,
-      //             }
-      //           );
-      //         } else {
-      //           propsToBePersist.push(attribute);
-      //         }
-      //       }
-      //     });
+                    sxPropsWithIdentifier = getIdentifiersObjectFromAstNode(
+                      propValue.expression
+                    );
 
-      //     jsxOpeningElementPath.node.attributes.splice(
-      //       0,
-      //       jsxOpeningElementPath.node.attributes.length
-      //     );
+                    const { result: sxPropsObject } =
+                      convertExpressionContainerToStaticObject(
+                        objectProperties
+                      );
+                    componentSXProp = sxPropsObject;
+                  } else if (
+                    t.isStringLiteral(propValue.expression) ||
+                    t.isNumericLiteral(propValue.expression)
+                  ) {
+                    if (styledSystemProps[propName]) {
+                      componentUtilityProps = Object.assign(
+                        componentUtilityProps ?? {},
+                        {
+                          [propName]: propValue.expression.value,
+                        }
+                      );
+                    }
+                  } else {
+                    propsToBePersist.push(attribute);
+                  }
+                }
+              } else if (styledSystemProps[propName]) {
+                componentUtilityProps = Object.assign(
+                  componentUtilityProps ?? {},
+                  {
+                    [propName]: propValue.value,
+                  }
+                );
+              } else {
+                propsToBePersist.push(attribute);
+              }
+            }
+          });
 
-      //     const sx = {
-      //       ...componentUtilityProps,
-      //       ...componentSXProp,
-      //     };
+          jsxOpeningElementPath.node.attributes.splice(
+            0,
+            jsxOpeningElementPath.node.attributes.length
+          );
 
-      //     if (sx) {
-      //       const verbosedSx = convertSxToSxVerbosed(sx);
+          for (const key in utilityPropsWithIdentifier) {
+            if (componentSXProp[key]) delete utilityPropsWithIdentifier[key];
+          }
 
-      //       const inlineSxTheme = {
-      //         baseStyle: verbosedSx,
-      //       };
+          const sx = {
+            ...componentUtilityProps,
+            ...componentSXProp,
+          };
 
-      //       let componentExtendedConfig = merge(
-      //         {},
-      //         {
-      //           ...ConfigDefault,
-      //           propertyTokenMap: { ...mergedPropertyConfig },
-      //         }
-      //       );
+          if (sx) {
+            const verbosedSx = convertSxToSxVerbosed(sx);
 
-      //       let resolvedStyles = styledToStyledResolved(
-      //         inlineSxTheme,
-      //         [],
-      //         componentExtendedConfig
-      //       );
+            const inlineSxTheme = {
+              baseStyle: verbosedSx,
+            };
 
-      //       let orderedResolved =
-      //         styledResolvedToOrderedSXResolved(resolvedStyles);
+            let componentExtendedConfig = merge(
+              {},
+              {
+                ...ConfigDefault,
+                propertyTokenMap: { ...mergedPropertyConfig },
+              }
+            );
 
-      //       let sxHash = stableHash(sx);
+            let resolvedStyles = styledToStyledResolved(
+              inlineSxTheme,
+              [],
+              componentExtendedConfig
+            );
 
-      //       if (outputLibrary) {
-      //         sxHash = outputLibrary + '-' + sxHash;
-      //       }
+            let orderedResolved =
+              styledResolvedToOrderedSXResolved(resolvedStyles);
 
-      //       if (platform === 'all') {
-      //         INTERNAL_updateCSSStyleInOrderedResolvedWeb(
-      //           orderedResolved,
-      //           sxHash,
-      //           true,
-      //           'gs'
-      //         );
-      //       } else if (platform === 'web') {
-      //         INTERNAL_updateCSSStyleInOrderedResolvedWeb(
-      //           orderedResolved,
-      //           sxHash,
-      //           false,
-      //           'gs'
-      //         );
-      //       } else {
-      //         INTERNAL_updateCSSStyleInOrderedResolved(
-      //           orderedResolved,
-      //           sxHash,
-      //           true,
-      //           'gs'
-      //         );
-      //       }
+            let sxHash = stableHash(sx);
 
-      //       let styleIds = getStyleIds(
-      //         orderedResolved,
-      //         componentExtendedConfig
-      //       );
+            if (outputLibrary) {
+              sxHash = outputLibrary + '-' + sxHash;
+            }
 
-      //       let styleIdsAst = generateObjectAst(styleIds);
+            if (platform === 'all') {
+              INTERNAL_updateCSSStyleInOrderedResolvedWeb(
+                orderedResolved,
+                sxHash,
+                true,
+                'gs'
+              );
+            } else if (platform === 'web') {
+              INTERNAL_updateCSSStyleInOrderedResolvedWeb(
+                orderedResolved,
+                sxHash,
+                false,
+                'gs'
+              );
+            } else {
+              INTERNAL_updateCSSStyleInOrderedResolved(
+                orderedResolved,
+                sxHash,
+                true,
+                'gs'
+              );
+            }
 
-      //       let orderResolvedArrayExpression = [];
+            const orderCSSIds = injectComponentAndDescendantStyles(
+              orderedResolved,
+              sxHash,
+              'inline',
+              BUILD_TIME_GLUESTACK_STYLESHEET,
+              false
+            );
 
-      //       orderedResolved.forEach((styledResolved) => {
-      //         let orderedResolvedAst = generateObjectAst(styledResolved);
-      //         orderResolvedArrayExpression.push(orderedResolvedAst);
-      //       });
+            const current_global_map =
+              BUILD_TIME_GLUESTACK_STYLESHEET.getStyleMap();
 
-      //       jsxOpeningElementPath.node.attributes = propsToBePersist;
-      //       jsxOpeningElementPath.node.attributes.push(
-      //         t.jsxAttribute(
-      //           t.jsxIdentifier('styledIds'),
-      //           t.jsxExpressionContainer(styleIdsAst)
-      //         )
-      //       );
-      //       jsxOpeningElementPath.node.attributes.push(
-      //         t.jsxAttribute(
-      //           t.jsxIdentifier('orderResolved'),
-      //           t.jsxExpressionContainer(
-      //             t.arrayExpression(orderResolvedArrayExpression)
-      //           )
-      //         )
-      //       );
-      //       jsxOpeningElementPath.node.attributes.push(
-      //         t.jsxAttribute(t.jsxIdentifier('sxHash'), t.stringLiteral(sxHash))
-      //       );
-      //     }
-      //     componentSXProp = undefined;
-      //     componentUtilityProps = undefined;
-      //   }
-      // },
+            const orderedResolvedTheme = [];
+
+            current_global_map?.forEach((styledResolved) => {
+              if (orderCSSIds.includes(styledResolved?.meta?.cssId)) {
+                orderedResolvedTheme.push(styledResolved);
+              }
+            });
+
+            let styleIds = getStyleIds(
+              orderedResolved,
+              componentExtendedConfig
+            );
+
+            let styleIdsAst = generateObjectAst(styleIds);
+
+            let orderResolvedArrayExpression = [];
+
+            orderedResolved.forEach((styledResolved) => {
+              let orderedResolvedAst = generateObjectAst(styledResolved);
+              orderResolvedArrayExpression.push(orderedResolvedAst);
+            });
+
+            let orderedStyleIdsArrayAst = t.arrayExpression(
+              orderCSSIds?.map((cssId) => t.stringLiteral(cssId))
+            );
+
+            jsxOpeningElementPath.node.attributes = propsToBePersist;
+
+            if (Object.keys(sxPropsWithIdentifier).length > 0) {
+              jsxOpeningElementPath.node.attributes.push(
+                t.jsxAttribute(
+                  t.jsxIdentifier('sx'),
+                  t.jsxExpressionContainer(sxPropsWithIdentifier)
+                )
+              );
+            }
+            jsxOpeningElementPath.node.attributes.push(
+              t.jsxAttribute(
+                t.jsxIdentifier('styledIds'),
+                t.jsxExpressionContainer(styleIdsAst)
+              )
+            );
+            jsxOpeningElementPath.node.attributes.push(
+              t.jsxAttribute(
+                t.jsxIdentifier('orderResolved'),
+                t.jsxExpressionContainer(
+                  t.arrayExpression(orderResolvedArrayExpression)
+                )
+              )
+            );
+            jsxOpeningElementPath.node.attributes.push(
+              t.jsxAttribute(t.jsxIdentifier('sxHash'), t.stringLiteral(sxHash))
+            );
+            jsxOpeningElementPath.node.attributes.push(
+              t.jsxAttribute(
+                t.jsxIdentifier('orderedStyleIdsArray'),
+                t.jsxExpressionContainer(orderedStyleIdsArrayAst)
+              )
+            );
+          }
+          componentSXProp = undefined;
+          componentUtilityProps = undefined;
+        }
+      },
     },
   };
 };

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

71190

increased by26.29%

Lines of code

1455

increased by15.02%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes